Google Map マーカーのドラッグドロップで緯度・経度を取得
Google Mapを使うとき、特定の場所の緯度・経度を取得したいことが多々あります。
公式ドキュメントにあるように、住所をクエリー送信して取得すればよいのですが、微妙に位置がズレてるときってないですか？
緯度・経度の数値をチビチビと調整するのは、あまりにも面倒なので。
地図上のマーカーをドラッグ＆ドロップできるようにして、その位置の緯度・経度を表示するスクリプトです。
(2012/10/23追記)以下はver.2時代の例です。これではなく、新しいAPIを使うことをお勧めします。このページのデータは、とりあえず放置中です…。
(2013/02/04追記)ずっと放置もアレなので、新しいGoogle Map API(ver.3)対応のサンプルを公開しました。ver.2は正式に廃止予定なので、古いコードは早めに書き換えましょう。
(2014/05/24追記) サポート終了についてはこちら：https://developers.google.com/maps/documentation/javascript/v2/
(2015/07/29追記) 上記サポート終了ページもなくなっていたため、リンクを外しました。
このページのスクリプトはまだ動いているようですが、過去はこうだったんだなぁという参考以外には利用しないでください。
ソース
HTMLのヘッダにスクリプトを書いておいて、
<script src="http://maps.google.com/maps?file=api&v=2&key=（マップAPIキー)"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = 'map';
var lat = 34.666358; // 初期位置
var lng = 133.918576; // 初期位置
var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
var point = new GLatLng(lat, lng);
var map = new GMap2(document.getElementById(mapname));
map.setCenter(point, 13);
// ドラッグ可能なマーカー
var mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById('latitude').value = p.lat();
document.getElementById('longitude').value = p.lng();
} );
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById('latitude').value = mk.getLatLng().lat();
document.getElementById('longitude').value = mk.getLatLng().lng();
// コントロール（小）
map.addControl(new GSmallMapControl);
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
bodyでは地図表示と、緯度経度の表示場所を確保してあげれば。
<!-- 地図表示div --> <div id="map"></div> <!-- 緯度・経度の表示場所 --> <form method="post" id="latlng"> <label for="latitude">緯度</label> <input type="text" id="latitude" name="latitude" /> <label form="longitude">経度</label> <input type="text" id="longitude" name="longitude" /> </form>
[ ページ先頭へ ]
実例
マーカーをドラッグドロップすると、その位置の緯度経度が表示されます。地図を拡大して、ピンポイント指定もできます。
緯度・経度をサーバに送信して保存すれば、いつでもその位置の地図を表示できますね。
[ ページ先頭へ ]
参考
公式ドキュメント：ジオコーディング
http://code.google.com/intl/ja/apis/maps/documentation/services.html#Geocoding
最終更新日：2015/07/29
[ ページ先頭へ ]