はじめに
Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回 は「地図上のクリック点の経緯度を表示する方法について」です。スクリプトの変更
前回に作成したコードに変更を加えます。
<!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">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<div id="label_test" style="position: absolute; left: 100px; top: 50px; padding: 3px; text-align: center; background-color: white; border: 1px solid black; z-index: 99;">（地図をクリックしてください）</div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(map, 'click', function(objOverlay, objPoint) { if(objPoint) document.getElementById("label_test").innerHTML = objPoint.x + ',' + objPoint.y; });
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
{
var objPoint = new GPoint(nLatitude,nLongitude);
var objMarker = new GMarker(objPoint);
GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
objMap.addOverlay(objMarker);
}
AddGMarker(map,135.3659722,34.72072222,"<img src=http://www.dinop.com/google/map/use_html_comment_test.gif align=left>甲子園駅<br><br><a href=http://www.hanshintigers.jp/ target=_blank>阪神タイガース</a>の本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。<br clear=left>");
AddGMarker(map,135.3585277,34.70730555,"甲子園浜");
//]]>
</script>
</body>
</html>
赤字が変更する部分です。太字の部分はAPI Keyです（人それぞれ異なる値です）。
実際に動かして地図をクリックするとラベルの中にその座標（経緯度）が表示されました。
ラベルの中に表示される経緯度はマウスを使ってクリップボードにコピーすることができます。そのため 地図上から簡単に経緯度を取得できます。目印や線を引くときには非常に役立ちます。