About MapTooltip

In a project I’m working on there’s a need to have tooltips on polylines. I have tried to find simple ways of doing this but haven’t been able to find any. After researching this and eventually coming up with a solution I decided to package it into a small library so that I could share it with fellow Google Maps developers.

Reference

The constructor creates an object of the type MapTooltip. It takes two required arguments and one optional.

MapTooltip(reference:object, tooltip:string, opts?:object)

reference

The first argument, reference, is a reference to the overlay that you will attach the tooltip to, for example a GPolyline.

tooltip

The second argument, tooltip, is a string containing what will appear inside of the tooltip. You can either provide just a plain text string or some HTML.

opts

The third argument which is optional, opts, is an object literal that contains all options on how the tooltip will look and behave. It can have the following settings:

• width
  The width of the tooltip, ex: “100px”
• padding
  The padding around the content of the tooltip
  For a 3px padding: “3px”
  For a 2px top/bottom padding and a 5px left/right padding: “2px 5px”
• backgroundColor
  Backgroundcolor of the tooltip, ex: “#ff9″
• color
  The color of the text inside the tooltip, ex: “#000″
• border
  The styling of the border of the tooltip, ex: “1px solid green”
• fontSize
  The size of the text inside the tooltip, ex: “1em”
• offsetX
  The horizontal distance in pixels from the pointer to the tooltip, ex “10″
• offsetY
  The vertical distance in pixels from the pointer to the tooltip, ex: “10″

It might for example look like this:

var options = {
    'width': '250px',
    'border': '3px dotted #00f'
}

Using MapTooltip

To use MapTooltip is pretty easy. First add a Google Map as you normally would. Then follow the steps below to attach a tooltip to an object in the map.

1. Load the library

Import the library to the web page with the script tag.

<script src="http://maptooltip.googlecode.com/files/mapTooltip.js" type="text/javascript"></script>

2. Attach appropriate events

Add a mouseover event to the object on your map that you wish to have a tooltip. You will also have to add a mouseout event that removes the tooltip.

// Attach mouseover event to a polyline that will trigger the tooltip
GEvent.addListener(polyline, 'mouseover', function() {
	this.overlay = new MapTooltip(this, 'This is a polyline');
	map.addOverlay(this.overlay);
	// Attach mousout event to the polyline that will delete the tooltip
	GEvent.addListener(polyline, 'mouseout', function() {
		map.removeOverlay(this.overlay);
	});
});

That’s it. Be sure to check out the live demo to see it in action. The demo includes tooltips attached to markers, polylines and polygons. One of the tooltip is styled in a different way using the opts parameter.

Check out the live demo

Copyright

MapTooltip is released under the MIT License and is free for any use.

Downloads

mapTooltip.js

Acknowledgments

MapTooltip is heavily influenced by the article Custom Info Window / Popup for Google Maps, or Loving the GOverlay.

Known bugs

If you import the Google Maps API with ver=2.x it’s not going to work as expected since it seems that it doesn’t handle mouseover events on GMap2 when the pointer is over an GOverlay quite the same way as in previous versions. I don’t know if this is a temporary glitch or if it’s supposed to work this way in the future.

Update [2009-04-11]: In the latest release of the Google Maps API the above mentioned problems currently occur. I will try to find a way around, but until then you can stick to version 2.151 to make it work correctly.

For ideas on this or for other bugs you might encounter, please contact me either in the comments or through the Contact page.