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

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

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:

drawingManager.setOptions({
    drawingControl: false

});
drawingManager.setDrawingMode(null);

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++) {
    points.push({
       lat: coords[i][0],
       lng: coords[i][1]
    });
    bounds.extend(points[i]);
}
map.fitBounds(bounds);

var areaToDraw = new google.maps.Polygon({
    paths: points
});
areaToDraw.setMap(map);

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

Facebook Comments

Author

Sunil is the founder of The Soul of Design. He is a passionate blogger, Web application Developer, Musician. Expert on php, codeigniter, Wordpress, bootstrap etc.

Leave a Reply

Related Posts

Enter your keyword