Menu
I'm trying to get all markers within a given radius (google.maps.Circle) by using google.maps.geometry.poly.containsLocation as recommended here, but I get an error: TypeError: e is undefined.
Snippet:
// ...
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
// ...
Full code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
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());
// find markers in area
for (var i = 0; i < randomMarkers.length; i++) {
console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition());
// ---------- Here comes the error:
// TypeError: e is undefined
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
console.log('=> is in searchArea');
} else {
console.log('=> is NOT in searchArea');
}
}
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
297
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
