Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?
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<iwArray.length; i++) {
iwArray[i].close();
}
iwArray = [];
// find markers in area
for (var i = 0; i < randomMarkers.length; i++) {
console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition());
console.log("marker["+i+"] posn="+randomMarkers[i].marker.getPosition().toUrlValue(6));
if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
console.log('=> is in searchArea');
var iw = new google.maps.InfoWindow();
iw.setContent("is in searchArea");
iw.open(map, randomMarkers[i].marker);
iwArray.push(iw);
} else {
console.log('=> 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
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>