CODEWITHSUNDEEP
google-maps-api-3google-maps-markersgoogle-polyline
Rachel Goinco
Rachel Goinco

Reputation: 11

How to add a random point inside a polygon in Google Maps?

I have a bounds to a place and created a polygon of that place. How can I generate a random point inside the bounds of that polygon?

Upvotes: 1

Views: 4807

Answers (1)

geocodezip
geocodezip

Reputation: 161324

One way of doing it. This will calculate the bounds of the polygon, then guess a random point inside that bounds, if the point is contained by the polygon, it will put a marker there. 

// calculate the bounds of the polygon
var bounds = new google.maps.LatLngBounds();

for (var i=0; i < polygon.getPath().getLength(); i++) {
    bounds.extend(polygon.getPath().getAt(i));
}

var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();

// Guess 100 random points inside the bounds, 
// put a marker at the first one contained by the polygon and break out of the loop
for (var i = 0; i < 100; i++) {
   var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
   var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
   var point = new google.maps.LatLng(ptLat,ptLng);
   if (google.maps.geometry.poly.containsLocation(point,polygon)) {
     var marker = new google.maps.Marker({position:point, map:map});
     break;
   }
}

working fiddle

working fiddle with up to 100 random points

var polygon;

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 4,
        center: new google.maps.LatLng(22.7964, 79.8456),
        mapTypeId: google.maps.MapTypeId.HYBRID
    });

    var coords =
    [
        new google.maps.LatLng(18.979026,72.949219), //Mumbai
        new google.maps.LatLng(28.613459,77.255859), //Delhi
        new google.maps.LatLng(22.512557,88.417969), //Kolkata
        new google.maps.LatLng(12.940322,77.607422) //Bengaluru
    ];

    polygon = new google.maps.Polygon({
        paths: coords,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.26
    });

    polygon.setMap(map);

    var bounds = new google.maps.LatLngBounds();
    
    for (var i=0; i < polygon.getPath().getLength(); i++) {
        bounds.extend(polygon.getPath().getAt(i));
    }
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    for (var i = 0; i < 100; i++) {
       var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
       var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
       var point = new google.maps.LatLng(ptLat,ptLng);
       if (google.maps.geometry.poly.containsLocation(point,polygon)) {
         var marker = new google.maps.Marker({position:point, map:map});
         var infowindow = new google.maps.InfoWindow({});
           google.maps.event.addListener(marker, "click", function(evt) {
               infowindow.setContent(marker.getPosition().toUrlValue(6));
               infowindow.open(map, marker);
           });
         break;
       }
    }

}
        
        google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 530px; height: 500px">
</div>

Upvotes: 9

Related Questions