nearest 5 location ( marker ) in google map

Question

I use google map to put my json markers in map ( this is my map website ) and this is my main code

function initialize(pram) {

var mapOptions = {
    center: new google.maps.LatLng(33.3118943, 44.4959916),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

$.getJSON('data.php?search=' + pram, function (data) {

    $.each(data.points, function (i, value) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(value.lat, value.lon),
            map: map
        });

        google.maps.event.addListener(marker, 'click', portInfo);

        function portInfo() {
            $("#moreInfoId").html(value.id);
            $("#moreInfoPortName").html(value.port_name);
            $("#moreInfoTime").html(value.time);
            $('#mapModal').modal();
        }
    });
});

}

I just want when I click on marker its get nearest 5 markers how I do this ?

Answer 1

One approach could be to have some logic to determine the distance between two points. Then use that logic to sort your array of markers (you'll have to store them in an array) and retrieve the first five.

Sort has as arguments the objects it uses two compare so you need partially apply the object that you take as a reference to calculate the distance. This could be the logic to perform the sort:

function distance(p1, p2) {
  return Math.sqrt(Math.pow((p2.lat - p1.lat), 2) + Math.pow((p2.lon - p1.lon), 2));
}

function sortByDistance(me, a, b) {
  return a === me ? 1 :  b === me ? -1 : distance(me, a) - distance(me, b);
}

var dummy = [{lat: 6, lon: 6}, {lat: 7, lon: 1}, {lat: 1, lon: 8}, {lat: 9, lon: 10}, {lat: 5, lon: 4}, {lat: 3, lon: 2}, {lat: 6, lon: 7}, {lat: 2, lon: 7}, {lat: 10, lon: 9}, {lat: 4, lon: 3}];

dummy.forEach(function(me) {
  console.log('My five nearest points are:');
  console.log(dummy.sort(sortByDistance.bind(null, me)).slice(0, 5));
});

Then you would use this logic in yours:

function initialize(pram) {

  var mapOptions = {
    center: new google.maps.LatLng(33.3118943, 44.4959916),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  $.getJSON('data.php?search=' + pram, function(data) {
    // Array to store the markers.
    var markers = [];
    $.each(data.points, function(i, value) {

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(value.lat, value.lon),
        map: map
      });

      // Store the marker in the array
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', portInfo);

      function portInfo() {
        // Use the functions I presented earlier to sort the array and retrieve the nearest five
        var nearestFive = markers.sort(sortByDistance.bind(null, value)).slice(0, 5);
        $("#moreInfoId").html(value.id);
        $("#moreInfoPortName").html(value.port_name);
        $("#moreInfoTime").html(value.time);
        $('#mapModal').modal();
      }
    });
  });

}

This would be the main idea. I guess you'll have to make some adjustments and test if it performs well but, in order to retrieve the nearest five, you need to sort the array based on the distance to a certain value. To make it more performant you could store this neares five somehow in order to avoid having to recalculating them anytime the user clicks on the marker but that's something I leave to you.

Hope it helps.