Welcome to my JavaScript blog, onemarco.com, or as I like to call it, Blog de Alionso. I’ve been developing with JavaScript for about six months now and I’ve learned so much from others’ blogs. I'll be sharing some of the scripts I've developed recently, in the hopes that my experience and knowledge will help others.
What?
Today I present the Tooltip object for Google Maps. It is used to add quickly-appearing, easy-to-style (via CSS) tooltips to Google Maps' markers. This is in contrast to the built-in tooltips of versions 2.5 and higher, which appear after a short delay and cannot be styled. You can view an example the new example of the tooltips in action which also includes a sidebar.
View the Tooltip source code. The code is free to use for any reason without any restrictions. Just credit me if you redistribute it.
Why?
I developed the tooltips for two reasons. First, I find it difficult to figure out which marker a sidebar entry belongs to. It is time consuming to look at the letter for the entry and find the matching letter on the map, especially when markers overlap and hide each other. It is easier if the tooltip appears above the marker when I hover over the sidebar entry. Secondly, sometimes I just want to quickly figure out what a certain marker on the map is without having to look for its corresponding letter in the sidebar. And having to click on the marker to pull up the location's name is annoying, especially when it moves the center of the map. It just seems natural to me that when you hover on a marker, the name of the location should appear. Besides, it was a good exercise in extending the Google Maps API.
How?
Adding tooltips to a Google Map, using the Tooltip object is easy. I'll explain the steps I use when implementing the tooltips. The constructor for the tooltip takes three parameters: the marker, the text, and the padding between the tooltip and the marker.
var marker = new GMarker(new GLatLng(29.78933,-95.716748));
var tooltip = new Tooltip(marker,'HEB Grocery Store',4);
marker.tooltip = tooltip;
map.addOverlay(marker);
map.addOverlay(tooltip);
GEvent.addListener(marker,'mouseover',function(){
this.tooltip.show();
});
GEvent.addListener(marker,'mouseout',function(){
this.tooltip.hide();
});
After I've created the tooltip, I set it to the marker's tooltip property. Then, I add the marker and tooltip to the map via the addOverlay method of the GMap2 object. The last step is to add the mouseover and mouseout listeners to the marker to show and hide the tooltip.
Things to consider
- You may want to suppress the tooltip when the
GInfoWindowis open. Since the markers do not have a property that indicates whether their info window is open, you would need to add listeners to theirinfowindowopenandinfowindowcloseevents. For an example of how to do this check out the source code of the Tooltips with drop shadows example. - Another possible extension would be to add a timeout to the
hidemethod of theTooltipobject to delay how quickly the tooltip disappears. One limitation of the tooltip is that it currently only supports text. If you wanted more advanced styling, you could add support to theThe new version of the tooltip now supports DOM Elements for the content.Tooltipobject for inserting DOM Elements.TheThe new version of the tooltip now casts a drop shadow.Tooltipobject does not cast a drop shadow. If you want to keep it consistent with the Google Maps look-and-feel, this would be something to consider adding.
