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

Polygon with Hole Example for Google Maps API

View Example


Notes

Polygon with hole is essentially two polygons: One outside and the other inside.
The key is to make sure the two polygons are different on directions (e.g., one is clockwise and the other should be counter-clockwise).

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.686172, -122.20929),
            new google.maps.LatLng(37.686172, -121.40929),
            new google.maps.LatLng(36.886172, -121.40929),
            new google.maps.LatLng(36.886172, -122.20929),
            new google.maps.LatLng(37.686172, -122.20929)
        ];

        var coords2 = [
            new google.maps.LatLng(37.486172, -122.00929),
            new google.maps.LatLng(37.086172, -122.00929),
            new google.maps.LatLng(37.086172, -121.60929),
            new google.maps.LatLng(37.486172, -121.60929),
            new google.maps.LatLng(37.486172, -122.00929)
        ];          

        var polygon = new google.maps.Polygon({
            paths: [coords, coords2],
            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>