Как заполнить широту и долготу после заполнения поля ввода с помощью Google Map в JavaScript

Question

Я использую Google Map API для автозаполнения данных в поле ввода с помощью JavaScript.Я предоставляю свой код ниже.

<input type="text" class="form-control" id="pick_addr" name="pick_addr" required="required" tabindex="2" placeholder="Enter pick up address" ng-model="pick_addr" autocomplete="off">
<input type="hidden" class="form-control" id="src_lat" name="src_lat" required="required" tabindex="2" ng-model="src_lat">
<input type="hidden" class="form-control" id="src_lon" name="src_lon" required="required" tabindex="2" ng-model="src_lon">

<script>
function initMap() {
   var input = document.getElementById('pick_addr');
   var autocomplete = new google.maps.places.Autocomplete(input);
}
</script>

Здесь я могу успешно получить данные автозаполнения с помощью Google Map API, но мне нужно, когда в этом поле есть данные автозаполнения, соответствующие широта и долгота будут выбраны для обоих скрытых полей.

Answer 1

Чтобы получить широту и долготу результата места, поместите этот код в функцию обратного вызова place_changed (срабатывает, когда пользователь выбирает место)

document.getElementById("src_lat").value = place.geometry.location.lat();
document.getElementById("src_lon").value = place.geometry.location.lng();

function initMap() {
  var input = document.getElementById('pick_addr');
  var autocomplete = new google.maps.places.Autocomplete(input);


  // Set the data fields to return when the user selects a place.
  autocomplete.setFields(
    ['address_components', 'geometry', 'icon', 'name']);
  autocomplete.addListener('place_changed', function() {

    var place = autocomplete.getPlace();
    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    document.getElementById("src_lat").value = place.geometry.location.lat();
    document.getElementById("src_lon").value = place.geometry.location.lng();
  });
}

<input type="text" class="form-control" id="pick_addr" name="pick_addr" required="required" tabindex="2" placeholder="Enter pick up address" ng-model="pick_addr" autocomplete="off">
<input class="form-control" id="src_lat" name="src_lat" required="required" tabindex="2" ng-model="src_lat">
<input class="form-control" id="src_lon" name="src_lon" required="required" tabindex="2" ng-model="src_lon">

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>