Google places API “rankby=location” problems

Question

So I am currently working on a prototype that utilises the Google places API, and am struggling with the API documentation shown here: https://developers.google.com/places/web-service/search

In short, the rankby='location' option now seems to require a radius setting, contrary to the documentation (if radius is commented out, the API request errors out: "Uncaught Error: Missing parameter. You must specify radius.").

Infact, the rankby='location' option does not seem to do anything, as the list that I get back has items further away (using lat/long dist conversion), listed before items closer etc - and is the exact same response as when I comment that option out (searching for all parks within radius).

codepen: https://codepen.io/creative-lab-sydney/pen/18afe9d8500d490cbe93be68109c5b82

code sample for simple places api "nearbySearch" request:

const places = document.querySelector('#places');
const RADIUS = 700;
let request = {
  location: userLocation, // taken from navigator.geoLocation
  radius: RADIUS, // mandatory now (?) RADIUS = 50;
  type: ['park'],
  rankby: 'distance',
};
const service = new google.maps.places.PlacesService(document.querySelector('#moo'));
service.nearbySearch(request, callback); 
function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    Object.keys(results).map(key => {
      let item = results[key];
      let placeLocation = {
        lat: item.geometry.location.lat(),
        lng: item.geometry.location.lng()
      };
      let distObj = getDistance(userLocation, placeLocation);
      let div = document.createElement('div');
      div.appendChild(document.createTextNode(`${item.name} - dist: ${distObj.text}`));
      places.appendChild(div);
    });
  }
}

Has anyone else struggled with this API recently?

Answer 1

OK, so it seems I had the syntax slightly wrong. The syntax for the request should be:

var request = {
   location: userLocation,
   type: ['park'],
   rankBy: google.maps.places.RankBy.DISTANCE,
 };