15

I have an input for address searching that call the google API for autocomplete. It works but I want to add a session token on the query but I don't know how to do that.

I search everywhere on the internet but I only see: "use var sessionToken = new google.maps.places.AutocompleteSessionToken(); for generating a session token". Ok but I don't know where to put this variable :/

<script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script>
<form>
    <label>Address</label>
    <input id="user_input_autocomplete_address" placeholder="Votre adresse...">
</form>
<script>
    function initializeAutocomplete(id) {
        var element = document.getElementById(id);

        if (element) {
            var autocomplete = new google.maps.places.Autocomplete(element, { types: ['address'] });
            autocomplete.setComponentRestrictions({'country': ['fr']});
            google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
        }
    }   
    function onPlaceChanged() {  
        var place = this.getPlace();
        console.log(place);

        for (var i in place.address_components) {    
            var component = place.address_components[i];    

            for (var j in component.types) {
                var type_element = document.getElementById(component.types[j]);      

                if (type_element) {        
                    type_element.value = component.long_name;
                }    
            }  
        }
    }
    google.maps.event.addDomListener(window, 'load', function() {  
        initializeAutocomplete('user_input_autocomplete_address');
    });
</script>

It's working, I have the auto completion but this script doesn't use a unique Session Token. So for each letter typed in the input, each query use a different query.

evan
  • 5,443
  • 2
  • 11
  • 20
Launch IT
  • 151
  • 1
  • 1
  • 3
  • Similar question: https://stackoverflow.com/questions/51728344/google-places-autocomplete-widget-is-generating-a-new-session-key-per-every-requ – xomena Aug 07 '19 at 23:09

3 Answers3

27

You're using the Autocomplete widget which handles sessions automatically. You don't need to generate sessions yourself according to Google's documentation.

If you wanted to use the AutocompleteService class though, yes you would need to use google.maps.places.AutocompleteSessionToken(). See Google's code example in the link above to see how/where it's added:

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

Hope this helps!

evan
  • 5,443
  • 2
  • 11
  • 20
4

Actually sessionToken is correct, not sessiontoken. https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.sessionToken

Predrag Nikolic
  • 41
  • 4
-6

There is a small mistake in the answer above. Instead of sessionToken, it should be sessiontoken.

autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessiontoken: sessionToken
},
displaySuggestions);

https://developers.google.com/places/web-service/session-tokens

Smiglo
  • 1
  • 1
  • 1
    No it's not. It's `sessionToken`. You can try it yourself. If you name the property `sessiontoken`, the token won't be added to the request. If you name it `sessionToken`, it does get attached to the request. So please, delete this answer, it can be misleading for others. Also, the link you added is kinda not valid, because that docs page is not actually finished, it's looks like they abandoned it halfway through, so you cannot trust it. – Javi Marzán Nov 10 '20 at 15:35