Limit Google json map markers to viewable map - json

Question

I have the a situation where I want to limit the search results from a database that presents Google map markers on a map. Currently there are no criteria to limit this, however there could be sitautions where there are many markers and I want to contain this. I receive my markers in JSON - what would be the best practice to filter these to say 2km of the users current location?
My hunch is to do this with the actual JSON data on generation - but an idea of best practice here would be greatly appreciated as there isn't much in terms of guidance on SO.
Thanks!
Code presented below:
function showMarkers(str) {
if (str == "") {
document.getElementById("products").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//$('#mapMarkerPositions').html(this.responseText);
let data = JSON.parse(this.responseText);
merchantMarkers = [];
for (let i = 0; i < data.length; i++) {
merchantMarkers[i] = data[i];
}
resetMarker();
reloadMarkers();
}
}
xmlhttp.open("GET", "filterMarkers.php?s=" + str, true);
xmlhttp.send();
}
Then for the actual map:
<div id="merchantLocations">
<script>
var map;
var markers = [];
var merchantMarkers = [];
</script>
</div>
(additional code between this)
setMarkers(merchantMarkers);
var infowindow = new google.maps.InfoWindow({})
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
}
function setMarkers(locations) {
var infowindow = new google.maps.InfoWindow({});
for (var i = 0; i < locations.length; i++) {
var merchant = locations[i];
var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icons.icon,
label: merchant[4]
});
/* ****************** */
map.panTo(myLatLng);
/* ****************** */
google.maps.event.addListener(
marker,
'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker)
}
})(marker, i));
markers.push(marker);
}
}
function resetMarker() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
function reloadMarkers() {
setMarkers(merchantMarkers);
}

Answer 1

Since you already have a set of markers with their locations (lat/lng) as well as the device's location using Geolocation, and you only want to put markers within a certain radius from the device origin, then what you can do is to compare the distance between the markers and the device location. You can use Distance Matrix API for this. The DM API can take in X no. of origin and destination in the form of address, latitude/longitude coordinates, or a place ID. So for example you have 1 origin (device's location) and multiple destinations (markers). This will provide you the distance results between your origin and each of your destinations. For example:
https://maps.googleapis.com/maps/api/distancematrix/json?origins=40.6655101,-73.89188969999998&destinations=40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.659569%2C-73.933783%7C40.729029%2C-73.851524%7C40.6860072%2C-73.6334271%7C40.598566%2C-73.7527626%7C40.659569%2C-73.933783%7C40.729029%2C-73.851524%7C40.6860072%2C-73.6334271%7C40.598566%2C-73.7527626&key=YOUR_API_KEY
After getting the distance between them, you can then just add a simple if statement:
let result = JSON.parse(this.responseText);
//iterate through all the markers
for(i = 0 ; i <= no_of_markers ; i++ ){
//only show markers that are <= to 2km
if (result.rows[0].elements[i].distance.value <= 20000){
//Show Marker
}
}
Here is where you can learn more about Distance Matrix API. Note that you may also be billed for using this only if you went over the $200 free credit given per month. Here is the pricing sheet for your reference.