Google Maps API Tutorial

Translate this page:

Sidebar

On the actual Google maps page there's a panel on the left where you can click on a link to pop the info window open on a specific marker.

How do we do that with the API?

Here's a simple example

Link to the example and view the source.

The method involves setting up an empty <div> which is going to contain the clickable list, collecting the clickable html for each marker at the same time as we create each marker, then finally placing the assembled chunk of html into the <div>.

This time, it's not possible to use function closures to hold all the variables we're going to need later, at the time when the sidebar entry gets clicked, so we build an array of markers, which we use to specify which marker should get the info window.

I use the createMarker() function to handle all this. It creates the marker, sets up the listener for the marker "click" event, inserts entries into the gmarkers[] array, and adds an entry to the sidebar list.

The "gmarkers.length" information isn't preserved by function closure, it gets turned into text and written into the html. This line

   side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' 
   + name + '</a><br>';

creates a string of html like this

   <a href="javasript:myclick(1)">That Place</a><br>

The myclick(i) function triggers a "click" event on the marker, and the info window opens just as it would if the user clicked the marker.

After all the markers have been created, the assembled sidebar html code is put into document.getElementById("side_bar").innerHTML

Potential Pitfalls

If you go the route of using an onLoad() function, you need to make sure that the map and the array are accessible to the myclick() function. That's going to mean making the variables global by declaring them outside the onLoad() function
```
   var map;
   var gmarkers = [];
   function onLoad() { . . . 
```
If your map is inside a <frame>, be aware that your clicks behave as if they occurred in the parent document and therefore you need to use "framename.myclick()" instead of just "myclick()" in your <a> tag.
If you want your code to also work correctly if someone happens to open the frame, rather than the parent page (which can easily happen if someone performs a web search and finds the text that they're looking for inside your frame) then you need to check if the framename is defined.
```
 if (typeof framename != "undefined") {
   side_bar_html += '<a href="javascript:framename.myclick(' + i + ')">'
                + name + '</a><br>';
 } else {
   side_bar_html += '<a href="javascript:myclick(' + i + ')">'
                + name + '</a><br>';
 }
```
The word "sidebar" is a non-standard reserved Javascript variable name in Firefox, associated with setting bookmarks.
In MSIE, creating a div with id="sidebar" also creates a Javascript variable called "sidebar".
So if you use id="sidebar", there is potential for confusion if you ever want to use the Firefox "sidebar" variable to manage Firefox bookmarks.
Thanks to Barnaby Fry for spotting this pitfall.

Here's an example that uses lettered markers.

Potential Pitfalls

The Google markers only go from A to Z. If you've got more than 26 locations then you'll need to use a different set of markers.
If you want to put marker images next to the sidebar entries, remember that MSIE6 doesn't support transparent PNG files natively, so either use a separate set of images for the sidebar entries or check the identity of the browser and make AlphaImageLoader calls if the browser is MSIE6, otherwise your sidebar will look rather ugly.

Here's an example that puts the sidebar into a custom GControl.

Here's an example that highlights the corresponding entry in the sidebar whenever the info window is open.

Note that the "linkid" variable, which identifies the link being highligthed, must be local to the createMarker() function, so that it holds function closure, and the "lastlinkid" variable, which remembers which link needs to be set back to the default style, must be global.

You can use any style change you like to highlight the sidebar entry. In this case I turn the background yellow.

Back to Mike's Homepage
Up to the start of this tutorial