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

Standard InfoWindow Example for Google Maps API

View Example


Notes

The key is to use google.maps.InfoWindow:
        var infowindow = new google.maps.InfoWindow({
        	  content: '<B>Hello world</B>'
        });
        google.maps.event.addListener(marker, 'click', function() {
        	infowindow.open(map, marker);
        });


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: Standard InfoWindow</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</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,
            title: 'An InfoWindow Marker'
        });
        var infowindow = new google.maps.InfoWindow({
        	  content: '<B>Hello world</B>'
        });
        google.maps.event.addListener(marker, 'click', function() {
        	infowindow.open(map, marker);
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>