Google's AutocompleteService and Autocomplete returning different results with same query

Question

I have the followıng query, which is a ZIP code: 11368.

When I create a autocomplete object (not the service) I am getting the zip code's actual region at the top:

This is the code:

  autocomplete = new google.maps.places.Autocomplete(
       document.getElementById('PlaceSearch'),
       { types: ['(regions)'] });
       [...]

This is exactly what I want. However, I need to use a custom autocomplete system site-wise for design reasons so I've moved to AutocompleteService which is the non-UI, code-only version of the same thing (well at least it should be). I create my autocomplete service:

x = new google.maps.places.AutocompleteService();

And I use:

 x.getQueryPredictions({ input: key }, function (results, status) {
 if (status == google.maps.places.PlacesServiceStatus.OK) {
           [...]
    });
});

However, this is what I get from the results:

I am using description property to display the entry, though it's not the problem as place IDs of the first entry in returned locations are completely different as well even though I'm typing in exactly the same query.

I've also tried:

x.getQueryPredictions({ input: key, types: ['(regions)'] },

x.getQueryPredictions({ input: key, types: ['(geocode)'] },

x.getQueryPredictions({ input: key, types: ['geocode'] }

However it doesn't have any effect at all. It's exactly the same. I've also seen Different result between google maps Autocomplete and AutocompleteService but it's answer answers a question at the typeahead level while the results at my query are incorrect at the API level without even hitting typeahead; I've checked it with a debugger at the callback function directly from the autocomplete service.

I've then inspected network requests at both cases and here is the request at the working on:

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions?1s11368&4sen-US&9s(regions)&15e3&key=XXXXXX&callback=_xdc_._qxy1y2&token=45006

It returns the correct JSON.

Here is the request that returns the incorrect JSON:

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetQueryPredictionsJson?1s11368&4sen-US&9s(regions)&15e3&key=XXXXXX&callback=_xdc_._38p24d&token=20471

And it returns the incorrect JSON. From what I see it's clear that I need to pass in (regions) as the types parameter, and it's still incorrect. More absurd, the only difference between the two queries is a variable called token (I've tried replacing the incorrect query's token with the correct one's but I've got The Google Maps JavaScript API must be downloaded directly from Google's servers. error) and the callback function, which I'm sure has nothing to do with the returned JSON. The only thing I can think of that is Google does something at initialization level on its servers while returning the token, which bound to that server/instance (hence the token).

What am I doing wrong and how can I get the same results with Google's own typeahead implementation programatically?

Answer 1

I've found the solution. I was calling getQueryPredictions instead of getPredictions and it was returning different results. I've changed my code to call getPredictions and it started working correctly.