GoogleMapAPIで遊ぶ(1) ↑
クリックした位置(緯度経度)の取得 ↑
- マウスで地図をクリックした位置の緯度・経度を取得する。GEvent.addListenerというイベントリスナーを使う。これでマウスのクリックを監視。検出されたらfunction()以下を実行。ここでは簡単にアラート表示。
- なお、pointは配列変数になっている。
GEvent.addListener(map, 'click', function(overlay, point){
alert(point);
});
- これだけでは不便なので、アラートウインドとは別に表示させたい。これには多少javascriptの作法がいる。まず全体を示す。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&
key=*****************************************************************************"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.2**** , 137.0****), 15);
GEvent.addListener(map, 'click', function(overlay, point){
document.getElementById('dataprint').innerHTML=point;
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
<div id="dataprint">---------</div>
</body>
</html>
- 追加したのは、
GEvent.addListener(map, 'click', function(overlay, point){
document.getElementById('dataprint').innerHTML=point;
});
と、
<div id="dataprint">---------</div>
- document.getElementById('dataprint').innerHTML=point;は、HTMLの、ノード"dataprint"divに、innerHTML（HTML文書内に書き込み）しなさい、という意味らしい。ということは、ノードである"dataprint"タグを作っておかなければいけないので、 <div id="dataprint">---------</div>を置いてある。
- これで、マップ外に表示されるので、コピペしていろいろ活用できる。
クリックした位置にマーカーを立てる ↑
- イベントリスナで、クリックを検出したら、そのポイントにマーカーを立てる。
var marker = new GMarker(point); map.addOverlay(marker);
の２行を追加する。
- ちなみに、全体は、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&
key=*****************************************************************************"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.2**** , 137.0****), 15);
GEvent.addListener(map, 'click', function(overlay, point){
var marker = new GMarker(point);
map.addOverlay(marker);
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
