Draw A Polygon On Google Maps Using JavaScript

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}
   ];

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);