CODEWITHSUNDEEP
javascriptgoogle-apigoogle-places-api
Just A Guy
Just A Guy

Reputation: 159

How to loop through additional pages using google places and javascript API?

I am building a single page application and am using the frontend javascript API to access google maps and places. I am successfully able to generate a google map and get the establishments details through this api, however, the javascript API does not return a "next_page_token" that allows me to search for additional results after the first 20.

How do you use the javascript API to get the next_page_token to loop through multiple pages of results? I am desperate since I can't find any information about this anywhere.

Edit - Including some additional info.

Doing a nearbySearch using the documentation provided by Google here simply returns a set of 20 results with no additional properties in the response.

Here is the request I am making using Javascript API. I have the script included on my index.html file.

let map = new google.maps.Map(this.$refs.map, {
    center: this.location,
    zoom: 12,
    disableDefaultUI: true,
    scrollwheel: false
})

let request = {
    location: this.location,
  radius: 10000,
  type: ['restaurants'] 
}

let service = new google.maps.places.PlacesService(map)
service.nearbySearch(request, (results, status) => {
    console.log("Results", results)
    console.log("Status", status)
})

Here is what google is sending back. Taking from console in devtools.

Results (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Results from nearbySearch request third argument.

a4 {f: ƒ, b: ƒ, l: "CqQCIAEAAPcNpixD40jA39VnP-WMOZT21nGCcfpK_smpYhG66W…UWk72OjPB1A7Mdudz6UhoUD_vqC-QSk7CKnoveUXK0IHnQ8es", j: 1528768999850, hasNextPage: true}

Upvotes: 1

Views: 2051

Answers (2)

Tim Wickstrom
Tim Wickstrom

Reputation: 5701

From the google page search API

Accessing Additional Results:

By default, each Nearby Search or Text Search returns up to 20 establishment results per query; however, each search can return as many as 60 results, split across three pages. If your search will return more than 20, then the search response will include an additional value — next_page_token. Pass the value of the next_page_token to the pagetoken parameter of a new search to see the next set of results. If the next_page_token is null, or is not returned, then there are no further results. There is a short delay between when a next_page_token is issued, and when it will become valid. Requesting the next page before it is available will return an INVALID_REQUEST response. Retrying the request with the same next_page_token will return the next page of results

So in short in the response from a call like: https://maps.googleapis.com/maps/api/place/textsearch/xml?query=restaurants+in+Sydney&key=YOUR_API_KEY

-OR-

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&rankby=distance&type=food&key=YOUR_API_KEY

You will find:

{
   "html_attributions" : [],
   "next_page_token" : "CpQCAgEAAFxg8o-eU7_uKn7Yqjana-HQIx1hr5BrT4zBaEko29ANsXtp9mrqN0yrKWhf-y2PUpHRLQb1GT-mtxNcXou8TwkXhi1Jbk-ReY7oulyuvKSQrw1lgJElggGlo0d6indiH1U-tDwquw4tU_UXoQ_sj8OBo8XBUuWjuuFShqmLMP-0W59Vr6CaXdLrF8M3wFR4dUUhSf5UC4QCLaOMVP92lyh0OdtF_m_9Dt7lz-Wniod9zDrHeDsz_by570K3jL1VuDKTl_U1cJ0mzz_zDHGfOUf7VU1kVIs1WnM9SGvnm8YZURLTtMLMWx8-doGUE56Af_VfKjGDYW361OOIj9GmkyCFtaoCmTMIr5kgyeUSnB-IEhDlzujVrV6O9Mt7N4DagR6RGhT3g1viYLS4kO5YindU6dm3GIof1Q",
   "results" : [{...}]
}

IMPORTANT NOTE: A next_page_token will not be returned if there are no additional results to display. The maximum number of results that can be returned is 60. There is a short delay between when a next_page_token is issued, and when it will become valid.

Read more: https://developers.google.com/places/web-service/search#PlaceSearchPaging

Upvotes: 3

uncleoptimus
uncleoptimus

Reputation: 380

I am looking at the doc page for "nearbySearch" and this example sticks out:

// Perform a nearby search.
  service.nearbySearch(
      {location: pyrmont, radius: 500, type: ['store']},
      function(results, status, pagination) {
        if (status !== 'OK') return;

        createMarkers(results);
        moreButton.disabled = !pagination.hasNextPage;
        getNextPage = pagination.hasNextPage && function() {
          pagination.nextPage();
        };
      });

because notice the callback takes a third parameter that is used to fetch additional results.

Upvotes: 1

Related Questions