CODEWITHSUNDEEP
javascriptjqueryjsongoogle-maps-api-3google-places-api
codefreaK
codefreaK

Reputation: 3662

Google place Api find nearby place with distance between current place and nearby place with sorting

I am trying to find nearby places and calculate the distance from current place to the nearby places and then i want to display all the places in a table sorted increasing order of distance from current place .Right now i have succeeded in

  1. Find Nearby places
  2. Find Distance from current place to each nearby place
  3. Display each such place and distance in the order as it is received as response from google I have added the data as json array and added it to console

I want to sort this array display the sorted array instead of the direct result as in step3.Can anyone please help me with it???

DEMO

JQuery

Code for calculating distance and append to table with id Display

function createMarker(obj) {

    // prepare new Marker object
    var mark = new google.maps.Marker({
        position: obj.geometry.location,
        map: map,
        title: obj.name
    });
      alert(obj.name);
   var lat=document.getElementById('lat').value;
   var long=document.getElementById('lng').value;
  // alert(lat);
  //alert(long);


  var p1 = new google.maps.LatLng(lat,long);
var p2 = new google.maps.LatLng(obj.geometry.location.lat(),obj.geometry.location.lng());

  google.maps.LatLng.prototype.distanceFrom = function(latlng) {
  var lat = [this.lat(), latlng.lat()]
  var lng = [this.lng(), latlng.lng()]
  var R = 6378137;
  var dLat = (lat[1]-lat[0]) * Math.PI / 180;
  var dLng = (lng[1]-lng[0]) * Math.PI / 180;
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
  Math.sin(dLng/2) * Math.sin(dLng/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  return Math.round(d);
}
 // var loc1 = new GLatLng(lat, long);
//var loc2 = new GLatLng(obj.geometry.location.lat(), obj.geometry.location.lng());
var dist = p2.distanceFrom(p1);
//alert(dist/1000+'m');
  var distn=dist/1000;
  var dost=distn+(distn <1 ? "m" : "km")
  $('#Display').append('<tr><td>'+obj.name+'</td><td>'+dost+'</td></tr>');
  datas.push({ app:obj.name,message:distn});
 //alert(google.maps.geometry.spherical.computeDistanceBetween(p1, p2)+'sa');




    markers.push(mark);

    // prepare info window
    var infowindow = new google.maps.InfoWindow({
        content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name + 
        '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
    });

    // add event handler to current marker
    google.maps.event.addListener(mark, 'click', function() {
        clearInfos();
        infowindow.open(map,mark);
    });



    infos.push(infowindow);

  console.log(datas);


   // parse(datas);
}

JSON DATA Outputed(Sample) place may vary but distance is the field

 [{
       "place": "Taïm",
       "Distance": 1.193
   }, {
       "place": "Balthazar",
       "Distance": 1.127
   }, {
       "place": "Tribeca Grill",
       "Distance": 0.678
   }, {
       "place": "Lombardi's Pizza",
       "Distance": 1.179
   }, {
       "place": "Whole Foods Market",
       "Distance": 0.484
   }, {
       "place": "Best Western Bowery Hanbee Hotel",
       "Distance": 1.015
   }, {
       "place": "Les Halles",
       "Distance": 0.536
   }, {
       "place": "Cafe Gitane",
       "Distance": 1.367
   }, {
       "place": "Shake Shack",
       "Distance": 0.782
   }, {
       "place": "Bubby's",
       "Distance": 0.64
   }, {
       "place": "Ninja New York",
       "Distance": 0.397
   }, {
       "place": "La Esquina",
       "Distance": 1.056
   }, {
       "place": "Peasant",
       "Distance": 1.277
   }, {
       "place": "Apotheke",
       "Distance": 0.658
   }, {
       "place": "Joe's Shanghai",
       "Distance": 0.697
   }, {
       "place": "Kaffe 1668",
       "Distance": 0.436
   }, {
       "place": "Rice To Riches",
       "Distance": 1.199
   }, {
       "place": "SUBWAY® Restaurants",
       "Distance": 0.382
   }, {
       "place": "Bouley",
       "Distance": 0.384
   }, {
       "place": "North End Grill",
       "Distance": 0.808
   }]

Upvotes: 1

Views: 3657

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22489

The Places library has a class that allows you to get the results in a specific order. Please see the documentation on the RankBy class. 

var request = {
    location: coords,
    rankBy: google.maps.places.RankBy.DISTANCE
};

var service = new google.maps.places.PlacesService(map);
service.search(request, callback);

To calculate the distance between 2 points, you can use the Geometry library which has a computeDistanceBetween method. See here.

var distance = google.maps.geometry.spherical.computeDistanceBetween(a, b);

If using the 2 mentioned libraries, don't forget to include them in the API script call.

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry

Hope this helps!

Upvotes: 2

Related Questions