Where does the selected value from the Google Places Autocomplete API dropdown list get stored?

Viewed 18

Despite being a noob, I've managed to implement Places autocompletion into my personal project and it works just fine. The fact is, I need to pass the city that the user selects from the dropdown list (and that gets written into the input field) to an input field located in a different webpage without server-side stuff, as its default value. I've read it can be done with localStorage, no question so far. To be clear, it's a basic trip planner, and this is the user flow: on the homepage you select your destinaton, on the second page you complete other details, like your starting point. I want the destination on this form to have as its default value the city selected in the previous page.

The problem is, I thought that the input field's "value" attribute or "textContent" on the homepage would be automatically changed when the city was selected, so I could easily retrieve this value with DOM methods, like this:

const cityChoice = document.getElementById("autocomplete_search").value;

But it doesn't work, obviously as I'm a beginner and I still don't know the inner workings of API's requests. Here is the vanilla JS I've found on the internet to implement the autocomplete function:

google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {

      var input = document.getElementById('autocomplete_search');

      var autocomplete = new google.maps.places.Autocomplete(input);

      autocomplete.addListener('place_changed', function () {

      var place = autocomplete.getPlace();

    });

  }

Anybody can help?

EDIT: I'm using Chrome and running my website locally. When I make the first and only search and select one item from the dropdown list, for example "Miami", within the developers tools > sources > maps.googleapis.com > maps/api > place/js folder I can find a file called "PlaceService.GetPlaceDetails??(and stuff)", which contains this:

_xdc_._o4nk34 && _xdc_._o4nk34( {
   "html_attributions" : [],
   "result" : {
      "address_components" : [
         {
            "long_name" : "Miami",
            "short_name" : "Miami",
            "types" : [ "locality" ]
         },
         {
            "long_name" : "Contea di Miami-Dade",
            "short_name" : "Contea di Miami-Dade",
            "types" : [ "administrative_area_level_2"]
         },
         {
            "long_name" : "Florida",
            "short_name" : "FL",
            "types" : [ "administrative_area_level_1"]
         },
         {
            "long_name" : "Stati Uniti",
            "short_name" : "US",
            "types" : [ "country" ]
         }
      ],
      "adr_address" : "\u003cspan class=\"locality\"\u003eMiami\u003c/span\u003e, \u003cspan class=\"region\"\u003eFlorida\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eStati Uniti\u003c/span\u003e",
      **"formatted_address" : "Miami, Florida, Stati Uniti"**,
      "geometry" : {
         "location" : {
            "lat" : 25.7616798,
            "lng" : -80.1917902
         }, 

I'm not pasting all the JSON content, but the formatted address is exactly the value I'm trying to store in a variable. I know how to access a JSON's specific value with dot notation, my problem is I don't know how to refer to this file.

0 Answers
Related