Draw A Polygon On Google Maps

Google Maps API 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}
   ];

Hey, Like what you're reading?

🔥 1,750+ students already enrolled!
4.5 ⭐️⭐️⭐️⭐️⭐️ (86+ ratings) BEST SELLER

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