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

Polygon with Hole Example for Google Maps API

View Example


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" "">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Polygon Example</title>
<script type="text/javascript" src=""></script>
<style type="text/css">
body { margin: 20; padding: 20 }
	width: 740px;
	height: 400px;
<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"),

        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

<body onload="initialize()">
<div id="map_canvas"></div>