API Карт Google 3: получить координаты от правого щелчка

У меня есть 2 текстовых поля для lat и lon, когда пользователь вводит новую запись в db.

У меня есть живой просмотр Карт Google, который отлично работает, теперь то, что я хочу сделать, это добавить на карту щелчок правой кнопкой мыши, который заполняет текстовые поля lat/lon с нажатой кнопкой.

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

Ответы

Ответ 1

google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat=" + lat + "; Lng=" + lng);
});

Ответ 2

Вы можете создать InfoWindow объект (классная документация здесь) и присоедините к нему обработчик событий rightclick, который заполнит его широтой и долготой щелкнутого местоположения на карте.

function initMap() {
  var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(-33.8688, 151.2093)
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
      map: map,
    }),
    infowindow = new google.maps.InfoWindow;
  map.addListener('rightclick', function(e) {
    map.setCenter(e.latLng);
    marker.setPosition(e.latLng);
    infowindow.setContent("Latitude: " + e.latLng.lat() +
      "<br>" + "Longitude: " + e.latLng.lng());
    infowindow.open(map, marker);
  });
}

html,
body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap" async defer></script>
<div id="map-canvas"></div>