Google Map Api

I'm using google map api to auto populate an address. So I have a form which requires 2 different addresses, so how do I go about auto populating the next address like the form below.


THE FORM
      <form>
        <ul>
          <li class="li">
            <label>Enter Address</label>
            <input type="text" id="autocomplete" name="address">
          </li>

          <li class="li">
            <label>Street Address</label>
            <input type="text"  id="street_number">
          </li>

          <li class="li">
            <label>City</label>
            <input type="text" class="field" id="locality">
          </li>

          <li class="li">
            <label>State</label>
            <input type="text" id="administrative_area_level_1">
          </li>

          <li class="li">
            <label>Zip Code</label>
            <input type="number" id="postal_code">
          </li>
          <li>
            <label>Country</label>
            <input type="text" id="country">
          </li>
        </ul>


        <ul>
          <li class="li">
            <label>Enter Address</label>
            <input type="text" id="autocomplete" name="address">
          </li>

          <li class="li">
            <label>Street Address</label>
            <input type="text"  id="street_number">
          </li>

          <li class="li">
            <label>City</label>
            <input type="text" class="field" id="locality">
          </li>

          <li class="li">
            <label>State</label>
            <input type="text" id="administrative_area_level_1">
          </li>

          <li class="li">
            <label>Zip Code</label>
            <input type="number" id="postal_code">
          </li>
          <li>
            <label>Country</label>
            <input type="text" id="country">
          </li>
        </ul>

      </form>

THE JS FROM GOOGLE

var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

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

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

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

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

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }

realrandyallen

7 years ago

Best Answer

Level 44

The main issue is the code is using the id property to geocode and populate the fields. The id field has to be unique so you cannot have duplicates on the same page. You'll need to change each autocomplete to a class on the address input and then change the Google code to get by class name:

<input type="text" class="autocomplete" name="address">

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

The same is true for every address field, the id will need to be changed to a name attribute

<input type="text"  name="street_number">

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

... 

document.getElementsByName(addressType).value = val;

You're probably still going to run into some naming conflicts, you'll probably need to initAutocomplete each instance of '.autocomplete' separately

1 like

Please or to participate in this conversation.