Google's AutocompleteService and Autocomplete returning different results with same query
<p>I have the followıng query, which is a ZIP code:
<code>11368</code>.</p>

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

<p><a href="https://i.stack.imgur.com/gEIR0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gEIR0.jpg" alt="enter image description here"></a></p>

<p>This is the code:</p>

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

<p>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 <code>AutocompleteService</code> which is the non-UI, code-only version of the same thing (well at least it should be). I create my autocomplete service:</p>

<p><code>x = new google.maps.places.AutocompleteService();</code></p>

<p>And I use:</p>

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

<p>However, this is what I get from the results:</p>

<p><a href="https://i.stack.imgur.com/I9DnN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I9DnN.jpg" alt="enter image description here"></a></p>

<p>I am using <code>description</code> 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.</p>

<p>I've also tried:</p>

<p><code>x.getQueryPredictions({ input: key, types: ['(regions)'] }</code>,</p>

<p><code>x.getQueryPredictions({ input: key, types: ['(geocode)'] }</code>,</p>

<p><code>x.getQueryPredictions({ input: key, types: ['geocode'] }</code></p>

<p>However it doesn't have <em>any</em> effect at all. It's exactly the same. I've also seen <a href="https://stackoverflow.com/questions/15515537/different-result-between-google-maps-autocomplete-and-autocompleteservice">Different result between google maps Autocomplete and AutocompleteService</a> but it's answer answers a question at the <code>typeahead</code> 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.</p>

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

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

<p>It returns the correct JSON.</p>

<p>Here is the request that returns the incorrect JSON:</p>

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

<p>And it returns the incorrect JSON. From what I see it's clear that I need to pass in <code>(regions)</code> as the <code>types</code> parameter, and it's still incorrect. More absurd, the only difference between the two queries is a variable called <code>token</code> (I've tried replacing the incorrect query's token with the correct one's but I've got <code>The Google Maps JavaScript API must be downloaded directly from Google's servers.</code> 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).</p>

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