This example uses the Data layer to create a polygon with two internal holes. See the developer's guide. If you're not using the data layer to create an inner hole, you must define a path wound in the opposite direction to the outer path as shown in this alternative.
You can also view this example fullscreen.
// This example uses the Google Maps JavaScript API's Data layer // to create a rectangular polygon with 2 holes in it. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: {lat: -33.872, lng: 151.252}, }); // Define the LatLng coordinates for the outer path. var outerCoords = [ {lat: -32.364, lng: 153.207}, // north west {lat: -35.364, lng: 153.207}, // south west {lat: -35.364, lng: 158.207}, // south east {lat: -32.364, lng: 158.207} // north east ]; // Define the LatLng coordinates for an inner path. var innerCoords1 = [ {lat: -33.364, lng: 154.207}, {lat: -34.364, lng: 154.207}, {lat: -34.364, lng: 155.207}, {lat: -33.364, lng: 155.207} ]; // Define the LatLng coordinates for another inner path. var innerCoords2 = [ {lat: -33.364, lng: 156.207}, {lat: -34.364, lng: 156.207}, {lat: -34.364, lng: 157.207}, {lat: -33.364, lng: 157.207} ]; map.data.add({geometry: new google.maps.Data.Polygon([outerCoords, innerCoords1, innerCoords2])}) }
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html> <html> <head> <title>Data Layer: Polygon</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> // This example uses the Google Maps JavaScript API's Data layer // to create a rectangular polygon with 2 holes in it. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: {lat: -33.872, lng: 151.252}, }); // Define the LatLng coordinates for the outer path. var outerCoords = [ {lat: -32.364, lng: 153.207}, // north west {lat: -35.364, lng: 153.207}, // south west {lat: -35.364, lng: 158.207}, // south east {lat: -32.364, lng: 158.207} // north east ]; // Define the LatLng coordinates for an inner path. var innerCoords1 = [ {lat: -33.364, lng: 154.207}, {lat: -34.364, lng: 154.207}, {lat: -34.364, lng: 155.207}, {lat: -33.364, lng: 155.207} ]; // Define the LatLng coordinates for another inner path. var innerCoords2 = [ {lat: -33.364, lng: 156.207}, {lat: -34.364, lng: 156.207}, {lat: -34.364, lng: 157.207}, {lat: -33.364, lng: 157.207} ]; map.data.add({geometry: new google.maps.Data.Polygon([outerCoords, innerCoords1, innerCoords2])}) } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>