Polygon With Holes

Learn how to create polygons on a map with empty spaces inside them.

We'll cover the following

Polygon with a hole

We have looked at how to add or remove polygons from a map. Now, let’s look at an interesting example below in which we render a polygon over the Pentagon in Washington, DC, and create a hole over the open area in the middle of the Pentagon:

To create an empty area within a polygon, we need to create two paths, one inside the other. To add these two paths to the Polygon object, we must pass an array of arrays of LatLng values to the paths parameters, as shown below:

Press + to interact
const PolygonObj = new google.maps.Polygon({
	paths: [
		[
			{ lat: 25.774, lng: -80.19 }, // First vertice of the Bermuda Triangle at Miami, Florida (US)
			{ lat: 18.466, lng: -66.118 }, // Second vertice of the Bermuda Triangle at San Juan, Puerto Rico
			{ lat: 32.321, lng: -64.757 }, // Third vertice of the Bermuda Triangle at Bermuda (UK)
		],
		[
			{ lat: 28.745, lng: -70.579 }, // First random coordinate in the middle of the Bermuda Triangle
			{ lat: 29.57, lng: -67.514 }, // Second random coordinate in the middle of the Bermuda Triangle
			{ lat: 27.339, lng: -66.668 }, // Third random coordinate in the middle of the Bermuda Triangle
		],
	],
	...
});

To create a perfect hole inside the polygon, the coordinates defining the inner path must be opposite to those defining the outer path. In this context, “opposite” means that if the outer path is clockwise, the inner path must be counter-clockwise.

For example, in the diagram below, we define two triangular paths—the outer and inner paths. These two paths define the boundaries of the polygon and the hole inside it, respectively.

We define our outer path in a clockwise direction—A–>B–>C–>A. To make a triangular hole inside the hypothetical polygon, the inner path must be counter-clockwise and must also lie within the region enclosed by the outer path. So, to wind the inner path in a direction opposite to the outer path, we define the inner path in a counter-clockwise direction—that is, D–>F–>E–>D.

Code example

In the example below, we draw a polygon with two paths is drawn to along the boundaries of the Bermuda Triangle. The inner path is wound in the opposite direction of the outer path.

Console
Polygon with hole
Here’s a brief explanation of the JavaScript file in the code widget above:


    

  • Lines 8–12: We define an outerCoords array that defines the sequence of coordinates that form the outer path of the Bermuda Triangle. The direction of this path is counter-clockwise.
    • 

  • Lines 15–19: We define an innerCoords array that defines the sequence of coordinates that form the outer boundary of the hole inside the Bermuda Triangle. To form a hole, we wind the path coordinates in the opposite clockwise direction, which is why the point sequence is first, third, and then second.
    • 

  • Lines 22–30: We construct a new Polygon object.
    • 

  • Line 23: We make an array of innerCoords and outerCoords arrays and pass it to the paths parameter in the Polygon constructor to designate our polygon’s boundary both outside and inside.
    •