It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

# Polygon Auto-Completion

This example creates a map with a simple polygon, to demonstrate the autoclose behavior for polygons. Note that only three coordinates are defined. There's no need to specify the final coordinates to complete the polygon, because the Google Maps JavaScript API will automatically draw the closing side.

### TypeScript

```// This example creates a simple polygon representing the Bermuda Triangle. Note
// that the code specifies only three LatLng coordinates for the polygon. The
// API automatically draws a stroke connecting the last LatLng back to the first
// LatLng.

function initMap(): void {
document.getElementById("map") as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain"
}
);

// Define the LatLng coordinates for the polygon's path. Note that there's
// no need to specify the final coordinates to complete the polygon, because
// The Google Maps JavaScript API will automatically draw the closing side.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 }
];

paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}```

### JavaScript

```// This example creates a simple polygon representing the Bermuda Triangle. Note
// that the code specifies only three LatLng coordinates for the polygon. The
// API automatically draws a stroke connecting the last LatLng back to the first
// LatLng.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain"
});
// Define the LatLng coordinates for the polygon's path. Note that there's
// no need to specify the final coordinates to complete the polygon, because
// The Google Maps JavaScript API will automatically draw the closing side.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 }
];
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}```

### HTML

```<!DOCTYPE html>
<html>
<title>Polygon Auto-Completion</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
defer
></script>
<script src="./app.js"></script>
<body>
<div id="map"></div>
</body>
</html>```

### All

```<!DOCTYPE html>
<html>
<title>Polygon Auto-Completion</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
defer
></script>
<style type="text/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;
}
</style>
<script>
"use strict";

// This example creates a simple polygon representing the Bermuda Triangle. Note
// that the code specifies only three LatLng coordinates for the polygon. The
// API automatically draws a stroke connecting the last LatLng back to the first
// LatLng.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: "terrain"
}); // Define the LatLng coordinates for the polygon's path. Note that there's
// no need to specify the final coordinates to complete the polygon, because
// The Google Maps JavaScript API will automatically draw the closing side.

const triangleCoords = [
{
lat: 25.774,
lng: -80.19
},
{
lat: 18.466,
lng: -66.118
},
{
lat: 32.321,
lng: -64.757
}
];
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>