例−26:Google Maps + Google Earth

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>例−26:Google Maps + Google Earth</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[

    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.6606,139.7455));

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

    
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
  </script>
</head>
<body >
  <h1>例−26:Google Maps + Google Earth</h1>
  <div id="map" style="width:600px;height:600px;">
</body>
</html>





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら