javascript - Showing nearest multiple markers on Google Map API JS V3 from current position of users at range of 30kms

Question

I am creating an Mobile App where user(customer) will see multiple markers of drivers who is on the 30kms of range from the users current position.

I am able to display multi markers, which are stored in the database by using JSON and JQuery.

function multimarker(map)
{
        jQuery.ajax({                              
    url: baseurl +  "getdriverlocation.php",
    type: "JSON",
    async: true,
    success: function(data){
       var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)

        jQuery(myArray).each(function( index, element ) {     
        driverlat = element.driver_lat;
        driverlng = element.driver_lng;
        locations.push([driverlat , driverlng])
});
    var bounds = new google.maps.LatLngBounds();
 for (i  = 0; i < locations.length; i++)
                 { 

                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
            drivermarker=new google.maps.Marker({position:latlng1});
            drivermarker.setMap(map);
           var infowindow = new google.maps.InfoWindow();
           google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
            return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, drivermarker);

        }
      })(drivermarker, i));
                         bounds.extend(latlng1);
                 }
        map.fitBounds(bounds);
} 
});

}

also able to plot current position on the same map

function currentpostionmap()
{
    ?if ( navigator.geolocation ) {


????????function success(pos) 
         {
???????????? var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            ?var myOptions = {
????????????zoom: 15,
????????????center: latlng,
????????????mapTypeId: google.maps.MapTypeId.ROADMAP
????????};
????????map = new google.maps.Map(document.getElementById("map"), myOptions);
??????    var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

????????marker = new google.maps.Marker({
????????????position: latlng,
????????????map: map,
            icon: image123
????????
????????});
             multimarker(map);

????????}
????????function fail(error) {
?????????? var latlng = new google.maps.LatLng(18.5204, 73.8567);
            ?var myOptions = {
????????????zoom: 10,
????????????center: latlng,
????????????mapTypeId: google.maps.MapTypeId.ROADMAP
????????};
????????    map = new google.maps.Map(document.getElementById("map"), myOptions);
??????
???????     marker = new google.maps.Marker({
????????????position: latlng,
????????????map: map
???????????
????????    });


????????}
????????// Find the users current position.? Cache the location for 5 minutes, timeout after 6 seconds
?????   navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
????} 
}

Now I just want to display only those marker which are at the distance of 30km from the current position.

Else will not be displayed.

How to do it?

Answer 1

Only add the markers to the map if they meet your criteria. Be sure to include the geometry library.

for (i  = 0; i < locations.length; i++) { 
  var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
  if (google.maps.geometry.spherical.computeDistanceBetween(latlng1,map.getCenter()) < 30000) {
    drivermarker=new google.maps.Marker({position:latlng1});
    drivermarker.setMap(map);
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, drivermarker);
      }
    })(drivermarker, i));
    bounds.extend(latlng1);
  }
}
map.fitBounds(bounds);