例−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>
