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

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:

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:

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 april@syclo.com, 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.