Google Map Api

Posted 1 month ago by lawkunchi

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());
          });
        }
      }

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.