CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3autocompletegoogle-places-api
ToddN
ToddN

Reputation: 2961

Google Place Autcomplete Address API forces HTML Autocomplete = Off

We have a standard form for address (Street 1, Street 2, City, State, Zip, Country).

When I add the code for Google Places Autocomplete API on Street 1 it automatically changes the input fields autocomplete to off when loading the page which makes HTML/Browser Autofills not work on Street 1.

<input autocomplete="address-line1" type = "text" name = "shipping_address_1" id = "shipping_address_1"   class="ct-required form-control" tabindex=7>

Any ideas on how to rectify this; why would Google Place Autcomplete API change the field to autocomplete='off'?

I have tried to modify the Google javascript variable "autocomplete" to "autocomp" thinking it had something to with that but still same result.

      var placeSearch, autocomp;
  var componentForm = {
    shipping_address_1: 'short_name',
    shipping_address_2: 'long_name',
    shipping_city: 'long_name',
    shipping_state: 'short_name',
    shipping_country: 'long_name',
    shipping_zip: 'short_name'
  };



  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomp = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('shipping_address_1')),
        {
            types: ['geocode'],
            componentRestrictions: {country: "us"}
        });

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomp.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomp.getPlace();
    //debug autofillinplaes
    console.log(place);


    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

if (place.address_components) {
    // Get each component of the address from the place details
    // and fill the corresponding field on the form.

    var components_by_type = {};

    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      var c = place.address_components[i];
      components_by_type[c.types[0]] = c;

    }
     var streetnumb = components_by_type['street_number'].short_name;

          var address1 = streetnumb+" "+components_by_type['route'].long_name;
            document.getElementById('shipping_address_1').value = address1;

         var locality = components_by_type['locality'].long_name;     
        document.getElementById('shipping_city').value = locality;

         var administrative_area_level_1 = components_by_type['administrative_area_level_1'].short_name;      
        document.getElementById('shipping_state').value = administrative_area_level_1;

          var country = components_by_type['country'].short_name;             
        document.getElementById('shipping_country').value = country;

          var postal_code = components_by_type['postal_code'].short_name;         
        document.getElementById('shipping_zip').value = postal_code;
... [DO ADDRESS VALIDATION, UPDATE INPUT FIELDS] ...}

Upvotes: 4

Views: 1590

Answers (1)

Jaikanth J
Jaikanth J

Reputation: 592

autocomp = new google.maps.places.Autocomplete(
document.getElementById('shipping_address_1')),
        {
            types: ['geocode'],
            componentRestrictions: {country: "us"}
        });

By writing the above code you are telling GMaps that this is the field you need to predict places for. its kinda like a search bar for places, any kind of search bar wouldn't have autocomplete on it.It wouldn't make any sense if its autofilled by browser.

if you want to have it that way, use the WebService API, send HTTP requests and fill the fields with its response.

From the Docs, A request for establishments containing the string "Amoeba" within an area centered in San Francisco, CA: https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Amoeba&types=establishment&location=37.76999,-122.44696&strictbounds&key=YOUR_API_KEY A GET request to the above URL with Query Parameters input=Paris&types=geocode will give a JSON Object containing the predictions.

{
  "status": "OK",
  "predictions" : [
      {
         "description" : "Paris, France",
         "id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
         "matched_substrings" : [
            {
               "length" : 5,
               "offset" : 0
            }
         ],
    ... more results
    ]
}

Upvotes: 1

Related Questions