Draw Polygon and get the Bounding Points in Google Maps Javascript API 3


Today I’ll share how to draw a polygon (shape) and get the bounding points in Google Maps Javascript API 3.

Also Disable/Enable drawing and plot a drawing with the co-ordinates you already have.

What can you do?

  • You can draw a bounded area by multiple clicks on the Google Map.
  • Get the co-ordinates of the vertices which can be stored for future reference.
  • Disable/Enable Drawing at any event.
  • Also you can plot any shape on the map with the co-ordinates array.

If you want to disable the drawing after one drawing you can set use the following:

    drawingControl: false


Suppose you want to draw a shape on the map. then use the following.

Let us assume you have the following co-ordinates’

var coords = [[22.5831268539849, 88.40925693511963],
[22.584236342219164, 88.41129541397095],
[22.584632585851494, 88.41196060180664],
[22.584384933714855, 88.41310858726501],
[22.584058032212745, 88.41470718383789],
[22.583978783246916, 88.41514706611633],
[22.583889628105865, 88.41515779495239],
[22.583820285178493, 88.41518998146057],
[22.583770754494708, 88.41527581214905],
[22.58188857531463, 88.41470718383789],
[22.579897399875247, 88.41427803039551],
[22.579768616393363, 88.41412782669067],
[22.580432345357693, 88.41115593910217]];

Then you can simply plot that on map and also the map will fit to the shape by the following code.

var bounds = new google.maps.LatLngBounds();
var points = [];
for (var i = 0; i < coords.length; i++) {
       lat: coords[i][0],
       lng: coords[i][1]

var areaToDraw = new google.maps.Polygon({
    paths: points

If you have any problem or want to customize, feel free to ask here in comment.

Facebook Comments

Leave a Reply