Data Layer: Polygon
Page Summary
This example demonstrates how to create a polygon with two inner holes using the Google Maps JavaScript API's Data layer.
The Data.Polygon object is used, accepting arrays of LatLng coordinates for the outer and inner paths.
An alternative approach for creating inner holes without the Data layer involves defining a path wound in the opposite direction to the outer path.
The sample code showcases creating a rectangular polygon with two inner holes, providing coordinates for each path.
To run this sample locally, you need Git and Node.js installed, then follow the instructions to clone the repository, install dependencies, and start the application.
This example uses theData layer tocreate a polygon with two internal holes. If you don't use the data layer tocreate an inner hole, you must define a path wound in the opposite direction tothe outer path as shown inthis alternative.
Read thedocumentation.
TypeScript
// This example uses the Google Maps JavaScript API's Data layer// to create a rectangular polygon with 2 holes in it.functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:6,center:{lat:-33.872,lng:151.252},});// Define the LatLng coordinates for the outer path.constouterCoords=[{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.constinnerCoords1=[{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.constinnerCoords2=[{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:newgoogle.maps.Data.Polygon([outerCoords,innerCoords1,innerCoords2,]),});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
JavaScript
// This example uses the Google Maps JavaScript API's Data layer// to create a rectangular polygon with 2 holes in it.functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:6,center:{lat:-33.872,lng:151.252},});// Define the LatLng coordinates for the outer path.constouterCoords=[{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.constinnerCoords1=[{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.constinnerCoords2=[{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:newgoogle.maps.Data.Polygon([outerCoords,innerCoords1,innerCoords2,]),});}window.initMap=initMap;
CSS
/* * 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;}
HTML
<html> <head> <title>Data Layer: Polygon</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body></html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow theseinstructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
gitclone-bsample-layer-data-polygonhttps://github.com/googlemaps/js-samples.gitcdjs-samplesnpminpmstart
Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.
gitcheckoutsample-SAMPLE_NAMEnpminpmstart
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-12-11 UTC.