Hack 52. Put a Map and HTML into Your Info Windows

Add more context to your info windows by including a map and HTML.

There are times you want to include both a map and some text in the same info window. With a little hackery you can get the sort of effect demoed at http://mappinghacks.com/projects/gmaps/map_in_box.html and shown in Figure 6-4.

Figure 6-4. A map and text in the same info window

Within the Google Maps API there is an info window class that enables you to click on a point or overlay and get additional information about whatever it was that you clicked on. According to the API documentation, there are really only two types of methods that create info windows. The first type is those that take some kind of HTML in one of their arguments, namely openInfoWindow(), openInfoWindowHtml( ), and openInfoWindowXslt( ). The second type is really just a single method that takes no HTML as input and produces a blow-up map of some point inside of the info window, but nothing else. This method is showMapBlowup().

There are also times when we need both a map and text in the same window. However, when we look at the full prototype for the showMapBlowup() method, namely showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?), we see there is no way to insert text into a map blowup. How do we get a map and text into an info window?

When we look at the openInfoWindowHtml( ), we see that it has the prototype openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?), where htmlStr is any string of HTML. Well, since we are using a div element to create the main map, why not try putting a div element into the htmlStr? As it turns out, that works almost wonderfully:

	GEvent.addListener(testmarker, "click", function ( ) {
	 var text = '

'; text += '

'; text += 'Here is some text.
'; text += 'This is a link to <a href="http://maps.google.com/">Google Maps</a>'; testmarker.openInfoWindowHtml(text); var minimap = new GMap(document.getElementById(minimap)); minimap.centerAndZoom(pt,1); minimap.addControl(new GSmallMapControl( )); }); map.addOverlay(testmarker);

Here pt is a previously defined point, and testmarker is a marker that we have to place somewhere. Note that, if you like, you can add your own controls to the blow-up map and put it into a different mode (satellite or hybrid).

However, there is a problem with all this. If we close the info window and then reopen it, we find that the map is gone! We haven't been able to figure out why this happens, but it turns out that there is a workaround:

	 var count = 0;
	 GEvent.addListener(testmarker, "click", function () {
	 var text = '

'; var whichmini = "minimap" + count; text += '

'; text += 'Here is some text.
'; text += 'This is a link to <a href="http://maps.google.com/">Google Maps</a>
'; text += 'The current value of the infoWindow map counter is ' + count + '.'; testmarker.openInfoWindowHtml(text); var minimap = new GMap(document.getElementById(whichmini)); minimap.centerAndZoom(pt,1); minimap.addControl(new GSmallMapControl( )); count++; }); map.addOverlay(testmarker);

What we have done here is add in a counter. Each time we open the info window, the counter is incremented by one. So if we put this counter into the id for the div element, then each time that we open the infoWindow, we will be opening a new div element. Note that we need to reference this new name in the constructor for the mini-map as well.

6.3.1. See Also

• Part of the credit for this should go to [e-mail], who came up with the idea of putting a div element inside of the HTML in an info window. I came up with the code that added the counter and made it work more than once. See the thread at http://groups-beta.google.com/group/Google-Maps-API/browse_frm/thread/ab3075a8e91f8ecf/ for more details.

John T. Guthrie