Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?

Question

I\'m trying to get all markers within a given radius (google.maps.Circle) by using google.maps.geometry.poly.containsLocation as recommended here,

Answer 1

The solution suggested by @Sumuray will create points also outside of the circle, but still in the bounds (square/rectangle) of the circle.

using the method he suggested:

// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {

  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng(52.525595, 13.393085);

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();
  for (var i = 0; i < 50; i++) {
    var marker = generateMarkerInBoundries(circleBounds);
    marker.setMap(map);
  }

  function generateMarkerInBoundries(boundries) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(0, 0));
    while (!boundries.contains(marker.position)) {
      var
        ne = boundries.getNorthEast(),
        sw = boundries.getSouthWest(),
        lat = randomFloat(ne.lat(), sw.lat()),
        lng = randomFloat(ne.lng(), sw.lng());
      marker.setPosition(new google.maps.LatLng(lat, lng))
    }
    return marker;
  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

}

#map-canvas {
  height: 500px;
  width: 500px;
  border: 3px solid black;
}

You can clearly see that some of the markers are outside of the circle, but within the bounding box of the circle.

To fix the issue, you could use the geometry library and add a method to check if the point is within the circle's radius

// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')) {

  // Coordinates to center the map
  var myLatlng = new google.maps.LatLng(52.525595, 13.393085);

  // Other options for the map, pretty much selfexplanatory
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // Attach a map to the DOM Element, with the defined settings
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
  });
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000,
    fillColor: '#AA0000',
    fillOpacity: 0.15,
    strokeWeight: 0.9,
    position: myLatlng
  });
  circle.bindTo('center', marker, 'position');

  var circleBounds = circle.getBounds();
  for (var i = 0; i < 50; i++) {
    var marker = generateMarkerInCircleRadius(circleBounds);
    marker.setMap(map);
  }

  function generateMarkerInCircleRadius(boundries) {
    var marker = new google.maps.Marker();
    marker.setPosition(new google.maps.LatLng(0, 0));
    while (!isMarkerInRadius(marker, circle)) {
      var
        ne = boundries.getNorthEast(),
        sw = boundries.getSouthWest(),
        lat = randomFloat(ne.lat(), sw.lat()),
        lng = randomFloat(ne.lng(), sw.lng());
      marker.setPosition(new google.maps.LatLng(lat, lng))
    }
    return marker;
  }

  function randomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

  function isMarkerInRadius(marker, circle) {
    return google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), circle.getCenter()) <= circle.getRadius();
  }
}

#map-canvas {
  height: 500px;
  width: 500px;
  border: 3px solid black;
}