Google Maps API V3 マーカーをドラッグ&ドロップで動かして緯度経度取得

ここではGoogle Maps API V3 マーカーをドラッグ&ドロップで動かして緯度経度取得する方法について解説しています。

GoogleMap

デモはこちら
http://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のドラッグ終了イベントを定義しイベントから緯度経度を取得しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください