how to calculate the number of marker inside manually drawn polygon on google map

Question

I have a map where there can be n number of marker plotted on the google map, when the user draw the polygon on the map I need to know the makers plotted inside the polygon.

I tried to draw the polygon on the map which is as shown below

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
    <style>
        html,body{height:100%;margin:0}
        #map_canvas{height:90%;}
    </style>
    <script>
        function initialize() {
            var myLatLng = {lat: 52.5498783, lng: 13.425209099999961};

            var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(52.5498783, 13.425209099999961),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Hello World!'
            });

            google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
                //do it with the right mouse-button only
                if(e.button!=2)return;
                //the polygon
                poly=new google.maps.Polyline({map:map,clickable:false});
                //move-listener
                var move=google.maps.event.addListener(map,'mousemove',function(e){
                    poly.getPath().push(e.latLng);
                });
                //mouseup-listener
                google.maps.event.addListenerOnce(map,'mouseup',function(e){
                    google.maps.event.removeListener(move);

                        var path=poly.getPath();
                        poly.setMap(null);
                        poly=new google.maps.Polygon({map:map,path:path});

                });

            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
Use the right mouse-button to draw an overlay<br/>

<div id="map_canvas"></div>
</body>
</html>

use right mouse button to draw

for now I have only one marker, how to find the number of markers inside the polygon and their latitude and longitude the polygons can be of any shape on the map.

score 2 · Answer 1 · answered Dec 17 '15 at 08:59

You could utilize containsLocation() function to determine whether marker is located inside a polygon or not.

This example draws a green polygon when the marker falls outside of the specified polygon, and a red polygon when the marker falls inside the polygon.

function initialize() {
    var myLatLng = { lat: 52.5498783, lng: 13.425209099999961 };

    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(52.5498783, 13.425209099999961),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
    });

    google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {
        //do it with the right mouse-button only
        if (e.button != 2) return;
        //the polygon
        var poly = new google.maps.Polyline({ map: map, clickable: false });
        //move-listener
        var move = google.maps.event.addListener(map, 'mousemove', function (e) {
            poly.getPath().push(e.latLng);
        });
        //mouseup-listener
        google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
            google.maps.event.removeListener(move);

            var path = poly.getPath();
            poly.setMap(null);
            poly = new google.maps.Polygon({ map: map, path: path });

            var resultColor = google.maps.geometry.poly.containsLocation(marker.getPosition(), poly) ? 'green' : 'red';
            poly.setOptions({ fillColor: resultColor, strokeOpacity: 0.5 });

        });

    });
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body {
    height: 100%;
    margin: 0;
}

#map_canvas {
    height: 90%;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"> </script>
Use the right mouse-button to draw an overlay<br />
<div id="map_canvas"></div>

score 1 · Answer 2 · answered Dec 17 '15 at 14:29

To get the number of markers inside the polygon, one option is to keep references to them in array, then iterate through that array checking to see if the marker is in the polygon or not. To determine if a marker is inside the polygon, the geometry library poly namespace method containsLocation can be used:

  var markerCnt = 0;
  for (var i = 0; i < markers.length; i++) {
    if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
      markerCnt++;
    }
  }
  document.getElementById('numberMarkers').innerHTML += "There are " + markerCnt + " markers in the polygon<br>";

proof of concept fiddle

code snippet:

var markers = [];

function initialize() {

  var myLatLng = {
    lat: 52.5498783,
    lng: 13.425209099999961
  };

  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
  markers.push(marker);
  google.maps.event.addListener(map, 'bounds_changed', makeRandomMarkers);
  var poly;
  google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
    //do it with the right mouse-button only
    if (e.button != 2) return;
    //the polygon
    if (poly && poly.setMap) {
      poly.setMap(null);
    }
    poly = new google.maps.Polyline({
      map: map,
      clickable: false
    });
    //move-listener
    var move = google.maps.event.addListener(map, 'mousemove', function(e) {
      poly.getPath().push(e.latLng);
    });
    //mouseup-listener
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
      google.maps.event.removeListener(move);

      var path = poly.getPath();
      poly.setMap(null);
      poly = new google.maps.Polygon({
        map: map,
        path: path
      });
      var markerCnt = 0;
      for (var i = 0; i < markers.length; i++) {
        if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
          markerCnt++;
        }
      }
      document.getElementById('numberMarkers').innerHTML = "There are " + markerCnt + " markers in the polygon<br>";
    });

  });
}

function getRandom(min, max) {
  return Math.random() * (max - min + 1) + min;
}
google.maps.event.addDomListener(window, 'load', initialize);

function makeRandomMarkers() {
  var bounds = map.getBounds();
  var maxLat = bounds.getNorthEast().lat(); // 70;
  var minLat = bounds.getSouthWest().lat(); // 37;
  var maxLong = bounds.getNorthEast().lng(); // 50;
  var minLong = bounds.getSouthWest().lng(); // -8;


  for (var j = 0; j < 50; j++) {

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(getRandom(minLat, maxLat),
        getRandom(minLong, maxLong)),
      map: map
    });
    markers.push(marker);
  }
}

html,
body {
  height: 100%;
  margin: 0
}
#map_canvas {
  height: 90%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Use the right mouse-button to draw an overlay
<br/>
<div id="numberMarkers"></div>
<div id="map_canvas"></div>

how to calculate the number of marker inside manually drawn polygon on google map

2 Answers2