メニュー

E-Mail
xml


ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
クリックされた地点の緯度経度の取得

クリックされた地点の緯度経度を取得します。

要点だけ説明すると、、

○ 地図にクリックイベントを追加

maps.event.addListenerで地図にクリックイベントを追加します。
イベントが発生した位置情報を取得して表示します。


//地図をクリックされた時のイベント
google.maps.event.addListener(map, 'click', function(event) {
    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("lng").value = event.latLng.lng();
});


○ 作ったサンプルサイトは、こちらです。

○ コードは、下記。


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Map API V3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function initialize() {

    //東京駅を中心に地図を表示。
    var myLatlng = new google.maps.LatLng(35.681382, 139.766084);
    var options = {
        //地図のズームサイズ
        zoom: 15,
        //地図の中心地
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), options);

    //地図をクリックされた時のイベント
    google.maps.event.addListener(map, 'click', function(event) {
        document.getElementById("lat").value = event.latLng.lat();
        document.getElementById("lng").value = event.latLng.lng();
    });

}

</script>
</head>
<body onload="initialize()">
クリックされた
緯度：<input id="lat" type="textbox" style="width:120px">
経度：<input id="lng" type="textbox" style="width:120px">
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.