ウェブのあれこれ
ウェブを活用したいひとのためのブログ
GoogleMapで指定箇所の緯度、経度を取得する方法【GoogleMapsAPI v3】
2016/04/16 Google

GoogleMapで指定箇所の緯度、経度を取得する方法【GoogleMapsAPI v3】

GoogleMapsAPI v3を利用して、入力画面などでGoogleMapの地図の位置などを指定して経度・緯度を取得する方法を紹介します。

まずは位置指定を入力するGoogleマップを用意

こちらでも紹介したとおり、GoogleMapsAPIを利用して、位置していをするためのマップ表示を準備します。
<div id="map" style="height:300px;width:600px;"></div>
<script>
var map = new google.maps.Map($('#map').get(0), {
zoom : 15
,center: new google.maps.LatLng('35', '135')
});
</script>
コンストラクタのオプションで、ズームレベルと表示位置(緯度、経度)を指定することで初期表示を制御できます。(その他のオプションはこちらを参照)

イベントリスナーを設定してクリックした位置の緯度、経度を取得する

マップの初期化が完了したら、インスタンス化されたマップにイベントリスナーを設定します。
<script>
// ~ 前略 ~
map.addListener('click', function(e){
var selectedLat = e.latLng.lat();
var tselectedLng = e.latLng.lng();
});
</script>
「addListener」でマップのイベントリスナーを設定します。

第一引数がイベントを設定するマップインスタンス、第二引数がリスニングするイベント、第三引数にイベント発生時に起動する関数を設定します。
関数の引数にはイベントオブジェクトが渡されます。イベントオブジェクトは「latLng」という緯度、経度を示すオブジェクトを持っているので、そこから緯度と経度を取り出します。

取り出した緯度と経度は例えば隠し項目の<input type="hidden">などの値に設定することで、経度緯度を取得してデータをPOSTすることができるのです。

まとめ

上記の方法を簡単にまとめると以下の様なコードになります。
<div id="map" style="height:300px;width:600px;"></div>
<input type="hidden" name="lat" id="inputLat" value="">
<input type="hidden" name="lng" id="inputLng" value="">

<script>
var map = new google.maps.Map($('#map').get(0), {
zoom : 15
,center: new google.maps.LatLng('35', '135')
});

map.addListener('click', function(e){
$('#inputLat').val(e.latLng.lat());
$('#inputLng').val(e.latLng.lng());
});
</script>
これでクリックした位置の緯度、経度を取得することができますね。
しかし、デフォルトの表示ではランドマークの名称やアイコンにの箇所をクリックするとそちらにイベントが奪われてしまうので、こちらで紹介したような方法でアイコンやラベルを出さないような工夫が必要な場合もあるかもしれません。




Provided by Revolme inc.
revolme.co.jp