Google Maps Tooltips

The Code

A self-contained library for using tooltips instead of the standard "speech bubble" that google provides.

Example map #1 - build using Xml input for both map markers and descriptions of them

Example map #2 - free-form text linked with map markers

Javascript code

API

  1. Like many google map work, you need to keep track of your markers. This code uses "gMarkers". You must add markers to this array when you create them if you want this behavior. 
        gMarkers[markerIndex] = marker;
    // in other words...
    gMarkers[4] = marker;
  2. After creating a marker, turning on tooltip support is easy:
    	setupMarkerForTooltip(GMap2, GMarker, tooltip text, reference index);
  3. To have the tooltip show on mousing over,
    	setShowTooltipOnMouseover(GMarker);
  4. Use addTooltipOnMouseover(element, markerIndex) to show the GMarker tooltip when there is a mouse-over on a given non-map element. For example, if you want a town in your text to bring up a tooltip on the map, use this function to link the two.
  5. changeClassOnMarkerMouseover(element, markerIndex) adds event handlers to the map marker. When the user mouses over the given marker, a CSS class name is added on the given element. It is removed on the mouse out. This allows you to reflect actions in the map on the rest of the document. Obviously you can add your own event handlers if you want to do more-- this is just a common case.
  6. To control an individual marker's tooltip, use the showTooltip() and hideTooltip() within your JS code. You need the marker's index. This is demonstrated in Mike's tutorial mentioned below.

Background

There are hoards of google map mash-ups floating around the web, many of them intriguing. I had a slightly different problem of needing to integrating maps into a larger web site without "giving it over" to the maps. The subtle flavor of maps, rather than Hot Sauce maps.

I poked around at sites, and found on "Mike's" site a good tutorial on all things google map. He takes you through building nice maps step-by-step, and pushes the technology a bit. I recommend it highly. I liked the "tooltip" support that was implemented there.

I wanted more. I begin with his code and then shaped it into what I needed. He started by showing that the list highlighting could show tooltips, but I wanted very tight integration that worked both ways. I also wanted something I could use and turn wire up-- just a line or two. I wondered how easy I could make it. Here's my answer.

Andrew J. Peterson
April 2006