The default
Google Maps markers have mouse over tool tips but with the standard light yellow box. With some relatively simple Javascript code and cascading style sheet declarations, you can quickly create your own marker tool tips with a custom style. The basic steps are:
- Declare a tool tip style.
- Create a child DIV element for the tool tip under the parent Google Maps DIV element.
- Create the markers and set the tool tip text property
- Show the tool tip DIV element when the mouse hovers over the marker
- Hide the tool tip DIV element when the mouse exits the marker
Declare a tool tip style
As shown below in the sample html code, define a style class (e.g.
toolTip) for the tool tip so that the tool tip has a light yellow background with small text and a solid dark gray border.
<html>
<head>
<title>My first tool tip</title>
<style type="text/css">
.toolTip {
font-size: small;
background-color:#ffff71;
border:1px #7f7f7f solid;
}
</style>
</head>
<body>
<div id="map" style="height: 450px;" >
Loading...
</div>
</body>
</html>
Create the Tool TIp Child DIV Element
Traditionally, a Google Maps instance is placed on a web page through a DIV element in the HTML code. In this example, that element has an ID of "map". To show tool tips on this Google Maps instance, we need to create a child DIV element underneath it using Javascript.
var map;
var toolTip;
var divToolTip = "toolTip";
var divMapId = "map";
var icon = new GIcon(G_DEFAULT_ICON);
var pnt = new GLatLng(1.3629,103.8263);
//Create a new Google Maps instance
map = new GMap2(document.getElementById(divMapId));
//create the child tool tip DIV element and hide it
toolTip = document.createElement(divToolTip);
document.getElementById(divMapId).appendChild(toolTip);
toolTip.style.visibility="hidden";
Create the markers
Now create the markers and add them as overlays on the map. If you are using custom icons, the
clickable property must be set to be true in order to trigger the mouse events.
//Create the marker
var opt = {};
opt.icon = icon;
opt.draggable = false;
//clickable must be set to true to trigger the mouse events
opt.clickable = true;
opt.dragCrossMove = false;
var mkr = new GMarker (pnt, opt);
mkr.tooltip='<div class="toolTip">'+ 'My first tooltip' + '<\/div>';
map.addOverlay(mkr);
Create and register the mouse event handlers
To show the tool tips as the mouse move over the markers, create and register the
showToolTip function. Basically, this function simply shows the child tool tip DIV element. Also create and register the
hideToolTip function, which just hides the child tool tip DIV element.
//Register the marker event handlers
GEvent.addListener(mkr,"mouseover", function() {
showToolTip(mkr);
});
GEvent.addListener(mkr,"mouseout", function() {
hideToolTip();
});
//function to hide the tool tip
function hideToolTip () {
toolTip.style.visibility="hidden";
};
//function to show the tool tip
function showToolTip(marker) {
toolTip.innerHTML = marker.tooltip;
var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
var anchor=marker.getIcon().iconAnchor;
var width=marker.getIcon().iconSize.width;
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y));
pos.apply(toolTip);
toolTip.style.visibility="visible";
};
That's all there is to it.
