Draw A Polygon On Google Maps Using JavaScript
Last modified on September 25th, 2022
Raja Tamil

In this example, you’re going to learn how to draw a polygon on the Google Maps canvas.
Declare the Map Object
<div id="map"></div>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">
<script>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(51.173791, 9.327271),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>
⚠️ By default, the map has “for development purpose only” watermark on it. You can remove it by adding an API Key in the library URL. You can find how to create it here.
Define the LatLng Coordinates for the Polygon’s Path
var polygoneCoords = [
{lat: 51.177329, lng: 9.321499},
{lat: 51.177168, lng: 9.328837},
{lat: 51.175446, lng: 9.328837},
{lat: 51.175527, lng: 9.321198},
{lat: 51.177329, lng: 9.321499}
];
[blog-in-between-card]
Construct the Polygon Object
var myPolygon = new google.maps.Polygon({
paths: polygoneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
Draw A Polygon On The Map
myPolygon.setMap(map);

Show/Post Comments