例－29：地図上に情報を付け加える

サンプルプログラム
<!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=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    
    //東京タワーの画像
    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);
    
    //グローバル変数
    var map,cx,cy;
    
    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";
    }
    window.onload=load;
    window.onunload=GUnload;
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 500px"></div>
  </body>
</html>
投票数:2 平均点:10.00
この記事の1行目に飛ぶ