Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Customized Tooltip Example for Google Maps API

View Example


Notes

By default, the "title" property in google.maps.Marker is used to display tooltip. A customized tooltip can support HTML content instead of just text, and is thus much cooler. Also, a customized tooltip can be bounded to mouse over and thus displayed faster.

To support customized tooltip, we need to use a tooltip package custom_map_tooltip.js.

To use this package, a "tooltip" property needs to be used in google.maps.Marker. Also, a tooltip object is bounded to the marker on mouse over and mouse out events. A ".tooltip" style also needs to be defined.

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            tooltip: '<B>This is a customized tooltip</B>'
        });

        var tooltip = new Tooltip({map: map}, marker);
        tooltip.bindTo("text", marker, "tooltip");
        google.maps.event.addListener(marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(marker.getPosition());
        });
  	
        google.maps.event.addListener(marker, 'mouseout', function() {
            tooltip.removeTip();
        });

.tooltip { position:absolute;
	width: 145px;
	padding: 5px;
	border: 1px solid gray;
	font-size: 9pt;
	font-family: Verdana;
	background-color: #fff;
	color: #000;
}


Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Customized Tooltip</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/custom_map_tooltip.js"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
.tooltip { position:absolute;
	width: 145px;
	padding: 5px;
	border: 1px solid gray;
	font-size: 9pt;
	font-family: Verdana;
	background-color: #fff;
	color: #000;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
     	
        var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            tooltip: '<B>This is a customized tooltip</B>'
        });

        var tooltip = new Tooltip({map: map}, marker);
        tooltip.bindTo("text", marker, "tooltip");
        google.maps.event.addListener(marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(marker.getPosition());
        });
  	
        google.maps.event.addListener(marker, 'mouseout', function() {
            tooltip.removeTip();
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>


Other Used Files

js/custom_map_tooltip.js