Как я могу получить «широту и долготу» выбранного места с помощью API Карт Google?

Question

Я пытаюсь использовать сервис Google Maps API, чтобы позволить моим посетителям сайта вводить свой адрес в поле. Когда он/она выбирает соответствующий адрес, я хочу получить информацию о указанном адресе latitude и longitude.

Используя код в API documentation, у меня есть карта и текстовое поле на моем сайте. Однако, как только Google найдет соответствующий адрес, мне нужно получить latitude и longitude информацию только по выбранному адресу.

Вот функция, которая инициализирует карту

function initMap() { 

    var mapElement = document.getElementById('map'); 

    var map = new google.maps.Map(mapElement, { 
     center: { 
     lat: -34.397, 
     lng: 150.644 
     }, 
     zoom: 6 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map 
    }); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 

     var places = searchBox.getPlaces(); 

     console.log(places); 
     if (places.length == 0) { 
     return; 
     } 

     // Clear out the old markers. 
     markers.forEach(function(marker) { 
     marker.setMap(null); 
     }); 
     markers = []; 

     // For each place, get the icon, name and location. 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function(place) { 

     if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
     } 
     /* 
     var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
     }; 
     */ 


     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
      map: map, 
      //icon: icon, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     //coords.latitude 

     var latitude = place.geometry.location.lat(); 
     var longitude = place.geometry.location.lng(); 

     console.log(latitude, longitude); 

     if (place.geometry.viewport) { 
      // Only geocodes have viewport. 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 

     }); 

     map.fitBounds(bounds); 

    }); 


} 

следующие строки кода дал мне информацию, что я ищу. Тем не менее, кажется, что он отображает его больше, чем однажды (возможно, он отображает информацию для нескольких адресов). Как я могу получить информацию latitude и longitude только по одному адресу?

var latitude = place.geometry.location.lat(); 
    var longitude = place.geometry.location.lng(); 

Я попытался добавить щелчок слушателя, где я могу захватить информацию один Ликского событие, как этот

map.addListener("click", function (event) { 
     var lat = event.latLng.lat(); 
     var lng = event.latLng.lng(); 

     console.log(lat, lng); 
    }); 

Однако это дает мне latitude и longitude места, где я нажимаю на карте , а не адрес, который я выбрал из текстового поля после того, как автозаполнение предложило соответствующие адреса

Answer 1

Я уверен, что есть более простой способ, но я использую maps.google.com и щелкнув правой кнопкой мыши, где бы я ни захотел найти координаты для и выберите что здесь?, тогда долгота и широта будут отображаться в нижней части карты.

Answer 2

Используя API Google, вы можете просто отправить запрос AJAX, вам не нужна карта на вашей странице для получения координат. Проверь это!

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

var responseAsObject; 
$("#div").load("url", function(response, status, xhr) { 
responseAsObject = $.parseJSON(response); 
}); 
var long = responseAsObject.results.geometry.location.lng; 
var lat = responseAsObject.results.geometry.location.lat;