google maps api v3 how to rank by closest distance

Question

Does anyone know how to use the rank by distance search option that is mentioned here? https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Listing this in the request options doesn't seem to work. Here's my portion of code relative to this:

var request = {
  location: coords,
  //radius: 30000,
  keyword: ['puma, retail'],
  types: ['store'],
  rankBy: google.maps.places.RankBy.DISTANCE
};

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

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
                            listResults(results[i]);
        }
    } 
}

Code will locate and list results if I include a radius, but the results aren't listed in ascending order by distance. Google's docs say a radius isn't necessary either if using the rankBy option. Am I missing something?

Answer 1

You cannot use radius and RankBy.DISTANCE properties together. Therefore you have two options:

1) Search by radius then sort the results by distance in your own code.

Example:

var request = {
               location: coords,
               radius: 30000,
               keyword: ['puma, retail'],
               types: ['store']
               };
service = new google.maps.places.PlacesService(map);
service.search(request, callback);

function callback(results, status) {
         if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
           sortresults(results[i]);//sortresult uses haversine to calcuate distance and then arranges the result in the order of distance
           createMarker(results[i]);
           listResults(results[i]);
       }
   } 
}

Option 2: Search by RankBy.Distance then cap the result using the radius. Again you would need haversine formula to calculate distances.

var request = {
               location: coords,
               rankBy: google.maps.places.RankBy.DISTANCE,
               keyword: ['puma, retail'],
               types: ['store']
               };
service = new google.maps.places.PlacesService(map);
service.search(request, callback);

function callback(results, status) {
         if (status == google.maps.places.PlacesServiceStatus.OK) {

           for (var i = 0; i < results.length; i++) {
           d= distance(coords,results[i].latlng)
           if(d<rd)
            {createMarker(results[i]);
             listResults(results[i]);
            }
           }
   } 
}

//Returns Distance between two latlng objects using haversine formula
distance(p1, p2) {
 if (!p1 || !p2) 
  return 0;
 var R = 6371000; // Radius of the Earth in m
 var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
 var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
 var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
 Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
 Math.sin(dLon / 2) * Math.sin(dLon / 2);
 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 var d = R * c;
 return d;
 }