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 the Google Maps API. 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.
Nice post Marco.
For the readers: I have seen Marco’s work implemented and it is seamless.
I would add to the limitations that the tooltip does not handle the case where the tooltip will fall outside the bounds of the map as displayed.
Thx! ‘Was very useful to understand one or two things.
REALLY realy good effort!
I rarely use caps, but You deserved it !
Regards,
Jan Zon
Thank you for this. But I haven’t been able to figure out how to make a multi-line tooltip.
I notice in your example you have a multi-line tooltip, but the source code seems more complicated than I need.
I simply want to break up a tooltip over 2 lines to keep within a small map window size (only 200px!).
How can this be done?
Thx,
James
Okay, I’ve gone ahead and simply used all the source files you provided and modified the example to get close to what I want.
The question now becomes:
Is it possible to reduce the height of the tooltip box?
I only have 2 lines of text and the box is quite a bit bigger than necessary.
I can’t decipher the //DRAW TOOLTIP section in the source file as to how the logic determines the height of the box…
Help?
Thx,
James
Hi ,
I would like to show the tool tip for the markers in a google when i clicked the marker on map. Plz do reply
I found this script API very useful and the way your handled commonly encountered events for markers, without touching map boundaries..:– Great Job
Very nice work, simple yet very effective!
@Don Hosek - One way to get around this (though probably not the most efficient solution) is to add a line to the beginning of the Tooltip’s show() method that calls this.redraw(true);, which will recalculate the locations of the markers. Currently, I think redraw is only called when you re-zoom the map (or otherwise refresh the entire map).
hi,
you saved my site… works much better with that tooltip. Great, thanks,
Kamiel, Berlin
GREEN CHALLENGE DOT ORG
hi
Thanks for both v1 and v2 of the tooltips, I found them extremely useful and they saved me a lot of time. We are currently using your code in our ruby on rails google maps wrapper and its working great!
cheers
yawningman
Absolutely gorgeous.
Your tooltip script is awesome. What impressed me the most (and which led me to use it) was it’s size: about 1.5kb.
Good job, keep the good work.
P.S.: nice layout of your blog, too.
Thanks for these easy to implement mouseover tooltips. Have been looking for this for a while.
One thing though. In this version the tooltip text doesn’t parse HTML. If you want to parse html change this line in the tooltip.js file:
div.appendChild(document.createTextNode(this.text_));
to:
div.innerHTML = this.text_;
document.body.appendChild(div);
Now you can use HTML tags within the tooltip.