Javascript - Google Maps - Autofill

I have a form that I am putting together and I am trying to have it auto fill my fields. I have been successful with 95% of it, however, I am having difficulty getting the Lat / Lo

Solution 1:

1. your HTML is invalid. You have two elements with id="LatLngBounds".
2. you don't have any code to populate the latitude and longitude values in the form.

Fixing those makes it work for me:

code snippet:

var placeSearch, autocomplete;
     // Need to add Lat / Long to populate field.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',

    };

    functioninitAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {
        types: ['geocode']
      });
      autocomplete.addListener('place_changed', fillInAddress);
    }

    functionfillInAddress() {
      var place = autocomplete.getPlace();
      for (var component in componentForm) {
        document.getElementById(component).value = "";
        document.getElementById(component).disabled = true;
      }
      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;
        }
      }
      document.getElementById("Latitude").value = place.geometry.location.lat();
      document.getElementById("Longitude").value = place.geometry.location.lng();
    }
    google.maps.event.addDomListener(window, "load", initAutocomplete);

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=places"></script><divclass="control-group"><labelclass="control-label">Address *</label><divclass="controls"><inputvalue="Beacon St, Boston, MA"placeholder="Enter the customers full address"class="form-control"id="autocomplete"type="text"></div></div><divclass="control-group"><labelclass="control-label">House Number</label><divclass="controls"><inputvalue=""class="form-control"id="street_number"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">Street Address</label><divclass="controls"><inputvalue=""class="form-control"id="route"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">City</label><divclass="controls"><inputvalue=""class="form-control"id="locality"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">State</label><divclass="controls"><inputvalue=""class="form-control"id="administrative_area_level_1"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">Zipcode</label><divclass="controls"><inputvalue=""class="form-control"id="postal_code"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">Country</label><divclass="controls"><inputvalue=""class="form-control"id="country"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">Lat</label><divclass="controls"><inputvalue=""class="form-control"id="Latitude"disabled="true"></div></div><divclass="control-group"><labelclass="control-label">Long</label><divclass="controls"><inputvalue=""class="form-control"id="Longitude"disabled="true"></div></div>