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

Polygon Example for Google Maps API

View Example


Notes

The key is to use google.maps.Polygon class. To hide the polygon, use polygon.setMap(null);

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: Polygon Example</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 coords = [
            new google.maps.LatLng(37.286172, -121.80929),
            new google.maps.LatLng(37.086172, -121.60929),
            new google.maps.LatLng(37.486172, -121.40929),
            new google.maps.LatLng(37.286172, -121.80929)
        ];

        var polygon = new google.maps.Polygon({
            paths: coords,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#00FF00',
            fillOpacity: 0.35
        });

        polygon.setMap(map);
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>