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

Elabel-based Customized InfoWindow Example for Google Maps API

View Example


Notes

Click the marker to see the customized infowindow. Elabel package is used in this example. Elabel allows developers to flexibly define any customized window style. On the other hand, developers have to design all the details such as window border and the close button, like the following code demonstrates:
    	var infowindowhtml = '<div style="width: 200px; position: relative; background-color: #DCF5DA; padding: 10px 5px 5px 5px; -webkit-border-radius:5px; -moz-border-radius:5px; border:1px solid #C9D7F2;">';
    	infowindowhtml += '<img src="images/close.gif" style="cursor: pointer; cursor: hand; position: absolute; top: 0; right: 0;" onclick="infowindow.setMap(null);">';
        infowindowhtml += '<B>This is a customized info window</B>';
        infowindowhtml += '</div>';
        
        infowindow = new ELabel(map, marker.getPosition(), infowindowhtml, null, new google.maps.Size(11,5), 100);
        
        google.maps.event.addListener(marker, 'click', function() {
        	infowindow.setMap(map);
        });


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: Elabel based Customized InfoWindow</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/elabel3.js"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
	  var infowindow;

      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,
            title: 'A Customized InfoWindow Marker'
        });
        
    	var infowindowhtml = '<div style="width: 200px; position: relative; background-color: #DCF5DA; padding: 10px 5px 5px 5px; -webkit-border-radius:5px; -moz-border-radius:5px; border:1px solid #C9D7F2;">';
    	infowindowhtml += '<img src="images/close.gif" style="cursor: pointer; cursor: hand; position: absolute; top: 0; right: 0;" onclick="infowindow.setMap(null);">';
        infowindowhtml += '<B>This is a customized info window</B>';
        infowindowhtml += '</div>';
        
        infowindow = new ELabel(map, marker.getPosition(), infowindowhtml, null, new google.maps.Size(11,5), 100);
        
        google.maps.event.addListener(marker, 'click', function() {
        	infowindow.setMap(map);
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>


Other Used Files

js/elabel3.js
images/close.gif