Google Map マーカーのドラッグドロップで緯度・経度を取得(v3版)
Google Mapで、特定の場所の緯度・経度を取得したいことが多々あります。
ピンポイントに位置指定するために、地図上のマーカーをドラッグ＆ドロップして、その位置の緯度・経度を表示するスクリプトの、ver.3対応版です。
JavaScript Maps API V3 は、誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスです。
とのことなので、自由に使わせていただきます。ありがとう、Google。
以下のサンプルも自己責任でご自由にお使いください。
(2020/07 追記) JavascriptAPIが無料でなくなって久しいです。記事内容、絶賛放置中です。 そのうち手を入れます…。
ソース
HTMLのヘッダにスクリプトを書いておきます。
APIキーは、特にお金はかからないので、各自で取得してください。取得方法はGoogleの公式ドキュメントをご参照ください。
senserには、GPSなどのセンサー情報を使うかどうかを指定します。今回は使わないのでfalseです。スマホ向けでユーザーの現在位置を使うようなときにtrueにします（その例はまた別の機会に）。
(2015/07/29追記) senserは必須じゃなくなってますね。他にもちょっと変わっているみたいなのでご注意ください。そのうちこの記事の内容見直します。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false"></script>
<script type="text/javascript">
// ページ読み込み完了時に実行する関数
function init() {
// 初期位置
var okayamaTheLegend = new google.maps.LatLng(34.666358, 133.918576);
// マップ表示
var okayamap = new google.maps.Map(document.getElementById("map"), {
center: okayamaTheLegend,
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// ドラッグできるマーカーを表示
var marker = new google.maps.Marker({
position: okayamaTheLegend,
title: "Okayama the Legend!",
draggable: true // ドラッグ可能にする
});
marker.setMap(okayamap) ;
// マーカーのドロップ（ドラッグ終了）時のイベント
google.maps.event.addListener( marker, 'dragend', function(ev){
// イベントの引数evの、プロパティ.latLngが緯度経度。
document.getElementById('latitude').value = ev.latLng.lat();
document.getElementById('longitude').value = ev.latLng.lng();
});
}
// ONLOADイベントにセット
window.onload = init();
</script>
bodyでは地図表示と、緯度経度の表示場所を確保しましょう。
当然、IDはスクリプトで使うものを指定します。
<form>
<label for="latitude">緯度</label>
<input type="text" id="latitude" size="20" />
<label for="longitude">経度</label>
<input type="text" id="longitude" size="20" />
</form>
<div id="map" style="width:480px;height:400px;">
[ ページ先頭へ ]
実例
マーカーをドラッグドロップすると、その位置の緯度経度が表示されます。地図を拡大して、ピンポイント指定もできます。
[ ページ先頭へ ]
参考
公式ドキュメント：スタートガイド
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
公式ドキュメント：イベントリスナ
https://developers.google.com/maps/documentation/javascript/events?hl=ja#EventListeners
最終更新日：2015/07/29
[ ページ先頭へ ]