緯度・経度の取得
グーグルマップのクリックした場所の緯度と経度を取得します。
クリックした場所の緯度・経度を取得、情報ウィンドウをそこに設置しております。
クリックイベントの追加
まずはクリックイベントを追加してみます。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja®ion=JP"></script>
<script type="text/javascript">
<!--
function mapinit(){
var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);
var option = {
zoom: 13,
center: centerposition,
};
var map = new google.maps.Map(document.getElementById("map"),option);
map.addListener('click',function(){
alert("click!");
});
}
//-->
</script>
クリックイベントを追加するには作成したマップオブジェクトに
map.addListener('click',function(){
alert("click!");
});
こちらを加えます。
この「addListener」の２番目の引数
function(){
alert("click!");
}
こちらの中身で指定した関数が実行されます。
緯度・経度の取得
さらにこちらの
map.addListener('click',function(e){
});
引数を利用する事によってクリックした場所のさまざまな情報を得る事できます。
今回はテーマである緯度・経度を取得してみます。
map.addListener('click',function(e){
alert("緯度:" + e.latLng.lat() + "\n経度:" + e.latLng.lng());
});
緯度を取得するには「e.latLng.lat()」、経度を取得するには「e.latLng.lng()」こちらでそれぞれ取得する事ができます。
緯度と経度を取得する事ができました！
簡単にまとめたソースになります！
広告