How to get an array of points that would build a Polygon google map

Question

I want to build a polygon area as pictures using google MAP, you can know how to get the array of coordinates for the area?

picture of desired polygon

Answer 1

You can build a Polygon using an array of lat, lng couples of at least 3 elements.

If the array isn't close, Google Maps will close it by default.

While for the most of DBMS, you must save an array of coordinates that is closed. What does close mean? Essentially, the first and the last points of the array are equal. DBMS like MongoDB will throw an error for bad formatted geospatial data. MongoDB Documentation on $polygon.Another thing to mention is that, MongoDB accepts ONLY lng, lat formatted coordinates.

As you can see from Official Google Maps Documentation on Polygons you can draw a Polygon starting from an array of coordinates:

// Define the LatLng coordinates for the polygon.
var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
];

Then you can construct it and set it on the map:

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords, //Array of Coordinates
    strokeColor: '#FF0000', //Color of the line
    strokeOpacity: 0.8, //Color opacity
    strokeWeight: 3, //Line weight
    fillColor: '#FF0000', //Inner Color
    fillOpacity: 0.35 //Inner color opacity
 });
 //Set it on the map
 bermudaTriangle.setMap(map);

Then, you can add information to your polygon using clickListener and infoWindows

// Add a listener for the click event and opens infoWindow
bermudaTriangle.addListener('click', showArrays);

infoWindow = new google.maps.InfoWindow;

You can read more about infoWindows here.

Finally, here you can find a Plunker I made up using Google Maps Docs and AngularJS. Of course you can do it with pure Javascript.

Last but not least, make sure of having points on the boundaries and with reasonable lat, lng coordinates.

I hope I've been helpful.