Populate The Longitude And Latitude Using Google Maps Api

I have the following html and javascript. The javascript populates location details from the google maps api to the html form fields. The idea is someone to enter their original lo

Solution 1:

You don't have any code to populate the latitude and longitude fields. Add this to fillInAddress:

document.getElementById('latitude'+unique).value = place.geometry.location.lat();
document.getElementById('longitude'+unique).value = place.geometry.location.lng();

complete function:

functionfillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType + unique).value = val;
    }
  }
  document.getElementById('latitude'+unique).value = place.geometry.location.lat();
  document.getElementById('longitude'+unique).value = place.geometry.location.lng();
}

proof of concept fiddle

code snippet:

// This example displays an address form, using the autocomplete feature// of the Google Places API to help users fill in the information.var placeSearch, autocomplete, autocomplete2;
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() {
  // 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', function() {
    fillInAddress(autocomplete, "");
  });

  autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete2')), {
      types: ['geocode']
    });
  autocomplete2.addListener('place_changed', function() {
    fillInAddress(autocomplete2, "2");
  });

}

functionfillInAddress(autocomplete, unique) {
  // Get the place details from the autocomplete object.var place = autocomplete.getPlace();

  for (var component in componentForm) {
    if (!!document.getElementById(component + unique)) {
      document.getElementById(component + unique).value = '';
      document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType + unique).value = val;
    }
  }
  document.getElementById('latitude' + unique).value = place.geometry.location.lat();
  document.getElementById('longitude' + unique).value = place.geometry.location.lng();

}
google.maps.event.addDomListener(window, "load", initAutocomplete);

functiongeolocate() {
    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());
      });
    }
  }
  // [END region_geolocation]

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=places"></script><divid="locationField"><inputid="autocomplete"placeholder="Start typing your address"onFocus="geolocate()"type="text" /></div><divid="addressone"><inputtype="text"id="street_number"name="street_number" /><inputtype="text"id="route"name="street_name" /><inputtype="text"id="locality"name="town_city" /><inputtype="text"id="administrative_area_level_1"name="administrative_area_level_1" /><inputtype="text"id="postal_code"name="postcode" /><inputtype="text"id="country"name="country" /><inputtype="text"id="longitude"name="longitude" /><inputtype="text"id="latitude"name="latitude" /></div><divid="locationField2"><inputid="autocomplete2"placeholder="Start typing your address"onFocus="geolocate()"type="text" /></div><divid="addresstwo"><inputtype="text"id="street_number2"name="street_number2" /><inputtype="text"id="route2"name="street_name2" /><inputtype="text"id="locality2"name="town_city2" /><inputtype="text"id="administrative_area_level_12"name="administrative_area_level_12" /><inputtype="text"id="postal_code2"name="postcode2" /><inputtype="text"id="country2"name="country2" /><inputtype="text"id="longitude2"name="longitude2" /><inputtype="text"id="latitude2"name="latitude2" /></div>