HOME備忘帳

Google Map マーカーのドラッグドロップで緯度・経度を取得(v3版)

Google Mapで、特定の場所の緯度・経度を取得したいことが多々あります。
ピンポイントに位置指定するために、地図上のマーカーをドラッグ&ドロップして、その位置の緯度・経度を表示するスクリプトの、ver.3対応版です。

JavaScript Maps API V3 は、誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスです。

とのことなので、自由に使わせていただきます。ありがとう、Google。

以下のサンプルも自己責任でご自由にお使いください。

ソース

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

[ ページ先頭へ ]