例－26：Google Maps + Google Earth

サンプルプログラム
<!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>

    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load(){
        if (GBrowserIsCompatible()) {
            // 地図を作成

            var point = new GLatLng(35.658587, 139.745425);
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(point, 17, G_SATELLITE_3D_MAP );
            
            var marker = new GMarker(new GLatLng(35.660587,139.745425));

            //マーカーをクリックしたら、吹き出しの中に写真を表示する
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml("<h3>Googleマップ + Google Earth</h3>");
            });
            
            map.addOverlay(marker);

        }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 500px"></div>
    <button onclick="javascript:draw(35.676148, 139.74479, 35.678494,139.744205 );">ライン1の描画</button>
    <button onclick="javascript:draw(35.684,139.750, 35.694,139.740);">ライン2の描画</button>
    <button onclick="javascript:erase();">描いた順に消す</button>
  </body>
</html>
投票数:59 平均点:4.75
この記事の1行目に飛ぶ