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

containsLocation is a method on google.maps.Polygon objects not google.maps.Circle objects

To determine if a marker is within a circle use google.maps.geometry.spherical.computeDistanceBetween

if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
    console.log('=> is in searchArea');
} else {
    console.log('=> is NOT in searchArea');
}

working fiddle

working code snippet:

var map,
  searchArea,
  searchAreaMarker,
  searchAreaRadius = 1000, // metres
  startLat = 40.782827,
  startLng = -73.966167;

function init() {
  var startLatLng = new google.maps.LatLng(startLat, startLng);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: startLatLng,
    zoom: 12
  });

  searchArea = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.2,
    map: map,
    center: startLatLng,
    radius: searchAreaRadius
  });

  searchAreaMarker = new google.maps.Marker({
    position: startLatLng,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    title: 'searchAreaMarker'
  });

  var randomMarkers = [{
    title: 'Marker 1',
    latLng: new google.maps.LatLng(40.770088, -73.971146)
  }, {
    title: 'Marker 2',
    latLng: new google.maps.LatLng(40.782048, -73.972691)
  }, {
    title: 'Marker 3',
    latLng: new google.maps.LatLng(40.769048, -73.987797)
  }, {
    title: 'Marker 4',
    latLng: new google.maps.LatLng(40.773858, -73.956211)
  }, {
    title: 'Marker 5',
    latLng: new google.maps.LatLng(40.800372, -73.952091)
  }, {
    title: 'Marker 6',
    latLng: new google.maps.LatLng(40.804661, -73.939388)
  }];

  for (var i = 0; i < randomMarkers.length; i++) {
    randomMarkers[i].marker = new google.maps.Marker({
      position: randomMarkers[i].latLng,
      map: map,
      title: randomMarkers[i].title
    });
  }

  google.maps.event.addListener(searchAreaMarker, 'dragend', function(e) {
    startLatLng = e.latLng;

    searchArea.setOptions({
      center: startLatLng
    });

    map.panTo(searchAreaMarker.getPosition());
    findMarkersInArea();
  });
  var iwArray = [];
  function findMarkersInArea() {
    // close open infowindows
    for (var i=0; i is NOT in searchArea');
        var iw = new google.maps.InfoWindow();
        iw.setContent("outside searchArea");
        iw.open(map, randomMarkers[i].marker);
        iwArray.push(iw);
      }
    }
  }
  // initial config
  findMarkersInArea();
}

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

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}