ここではGoogle Maps API V3 マーカーをドラッグ&ドロップで動かして緯度経度取得する方法について解説しています。
※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/

デモはこちら
https://office-goto.info/demo/marker-draggable/
サンプルソース
google.maps.event.addDomListener(window, 'load', function() {
var latlng = new google.maps.LatLng(35.671277, 139.718489);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), options);
// InfoWindowオブジェクト
var infowindow = new google.maps.InfoWindow();
// Markerオブジェクト
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
// Markerのドラッグ終了イベント
google.maps.event.addListener(marker, "dragend", function(e) {
$('#lat').attr('value', e.latLng.lat());
$('#lng').attr('value', e.latLng.lng());
});
});
まず、Markerをドラッグ&ドロップで移動させるにはMarkerのdraggable:trueで動かせるようになります。
そして、Markerのドラッグ終了イベントを定義しイベントから緯度経度を取得しています。
