[解決済み] Googleマーカーから緯度・経度を取得する

質問

Google Mapsの地図に、ドラッグできるマーカーを作りました。ユーザーがマーカーをドラッグしたときに、新しい緯度と経度を知る必要があるのですが、それを行うための最良の方法がわかりません。

新しい座標を取得するにはどうしたらよいでしょうか。

どのように解決するのですか？

ここでは JSFiddleのデモ . Google Maps API V3では、ドラッグ可能なマーカーの緯度と経度を追跡するのはとても簡単です。 まずは以下のようなHTMLとCSSをベースにしてみましょう。

<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>

#map_canvas{
    width: 400px;
    height: 300px;
}

#current{
     padding-top: 25px;
}

以下は、google map を初期化する JavaScript の例です。 ドラッグしたいマーカーを作成し、dragable プロパティを true に設定します。 もちろん、このプロパティをウィンドウの onload イベントにアタッチしてロードする必要があることに注意してください。

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(47.651968, 9.478485),
    draggable: true
});

ここでは、2つのイベント dragstart を付加し、ドラッグの開始を追跡しています。 dragend を使って、マーカーがドラッグされなくなったときにドラッグするようにし、それを取り付ける方法は google.maps.event.addListener . ここで行っているのは current のコンテンツを設定し、ドラッグを停止したらマーカーの緯度と経度を設定することです。 Google のマウスイベントには 'latlng' というプロパティがあり、イベントが発生すると 'google.maps.LatLng' オブジェクトを返します。 つまり、ここでやっていることは、基本的には、このリスナーの識別子を使用しています。 google.maps.event.addListener によって返されるこのリスナーの識別子を使用して、プロパティ latLng を取得し、ドラッグエンドの現在位置を抽出します。 ドラッグが停止したときの緯度経度を取得したら、その緯度経度を current div に表示します。

google.maps.event.addListener(myMarker, 'dragend', function(evt){
    document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

google.maps.event.addListener(myMarker, 'dragstart', function(evt){
    document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});

最後に、マーカーを中央に配置して、地図上に表示します。

map.setCenter(myMarker.position);
myMarker.setMap(map);

私の回答について何か質問があれば教えてください。