Is there any way we can generate map area using list of latitude and longitude?

Question

we have list of lat-long and we want to display on google map. Here are list of latitude and longitude,I am expecting generate customise google maps for this list.

Input:
12.123456, 72.123456
12.123654, 72.366666
....   
....
12.123456, 72.123456

Output:

Note: these inputs are for references, not actual data.

polygon may helps you. https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays — Hardeep Singh, Sep 21 '17 at 07:51
Yep poylogn! Also, if you try with 4 points of more (which of course you will) Check [this answer](https://stackoverflow.com/questions/45056207/how-to-draw-a-polygon-in-google-map-using-many-coordinates/45060097#45060097) I wrote on how to sort your points to avoid lines crossing etc... — m.nachury, Sep 21 '17 at 07:55
thanks @HardeepSingh Solved! jsfiddle link here https://jsfiddle.net/rjnitt/12g7jL8y/2/ — Rohit Jain, Sep 21 '17 at 08:48

score 0 · Answer 1 · answered Sep 21 '17 at 08:03

You should replace the your API_KEY to see the output correctly.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  // Your coordinates should go here.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'red',
    fillOpacity: 0.1
  });
  bermudaTriangle.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Is there any way we can generate map area using list of latitude and longitude?

1 Answers1