例−29：地図上に情報を付け加える
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>例−29：地図上に情報を付け加える</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var cx,cy;
//東京タワーの画像
var tokyoTowerImg = new Image();
tokyoTowerImg.src="http://googlemaps.googlermania.com/uploads/tokyo_tower.gif";
tokyoTowerImg.style.position="absolute";
//東京タワーの経度緯度
var tokyoTowerLatLng=new GLatLng(35.658534, 139.74569);
//グローバル変数：map
var map;
function load() {
if (GBrowserIsCompatible()) {
//地図の作成
map = new GMap2(document.getElementById("map"));
map.setCenter(tokyoTowerLatLng, 15);
//マップコントローラを付ける
map.addControl(new GLargeMapControl())
//レイヤーに追加する
var layer = map.getPane(G_MAP_MAP_PANE);
layer.appendChild(tokyoTowerImg);
//画像のサイズを取得
cx = tokyoTowerImg.offsetWidth;
cy = tokyoTowerImg.offsetHeight;
//ズームレベルが変化したら、ピクセル座標に変換の再計算を行う
GEvent.addListener(map,"zoomend", calcurateTowerPosition);
//初期位置を変更
calcurateTowerPosition();
}
}
function calcurateTowerPosition(){
var pixel = map.fromLatLngToDivPixel(tokyoTowerLatLng);
//画像の配置位置を計算する
tokyoTowerImg.style.top=(pixel.y-cy)+"px";
tokyoTowerImg.style.left=(pixel.x)+"px";
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>例−29：地図上に情報を付け加える</h1>
<div id="map" style="width:600px;height:600px;">
</body>
</html>
