Google Maps API Tutorials (JavaScript)

Draw A Polygon On Google Maps Using JavaScript

Last modified on September 25th, 2022
Raja Tamil
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}
   ];

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

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

ACCESS FREE COURSE NOW