例−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&amp;v=2&amp;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>




サイト内検索
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら
Google Maps APIプログラミング入門
Google Maps APIプログラミング入門
全480ページ。Google Maps API ver.2, ver.3, for Flash, Static Maps API v2, Google Maps API Primery, ライセンス…など、Google Maps APIに関連する幅広い内容の本を書きました。
このサイトで公開しているサンプルはもちろん、本のために作ったサンプルも満載です。
詳しくはこちら