例－２：クリックされた位置にマーカーを追加する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
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.677335,139.744613), 16);
//地図をクリックしたら、マーカーを追加
GEvent.addListener(map, "click", function(overlay, latlng, overlaylatlng) {
if (overlay) {
//overlay が null でないときは、何かしらのオーバーレイがクリックされた
//マーカーかどうか判定する
//(openInfoWindow を持っていれば、マーカーとみなす)
if ("openInfoWindow" in overlay) {
//マーカーなら削除
map.removeOverlay(overlay);
}
} else {
//overlay が null のときは、マーカを追加する
var m = new GMarker(latlng);
map.addOverlay(m);
//緯度・経度の表示
m.openInfoWindowHtml("lat:" + latlng.lat() + "<br>lng:" + latlng.lng());
}
});
}
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
</script>
</head>
<body >
<div id="map" style="width: 600px; height: 600px"></div>
</body>
</html>
※ HTMLのDocType宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> にしてください。
IE8でクリックした位置がずれる、という現象が解消されます。
