Google Maps APIで高度や月面や火星表面が扱えるようになってた

   このエントリをはてなブックマークに登録    2008/2/2

久しぶりにGoogle Maps APIで遊ぼうと思っていじっていたら、GMap2.setMapTypeで設定できる値がやたらと増えていてびっくりしました。 高度付き地図が増えていたり、月面が増えていたり、火星が増えていたりしていました。 月と火星は、それぞれ高度/写真/赤外線画像を選べるようになっていました。

すげー。 でも、いつからできるようになったんですかね。。。 もしかして、情報遅すぎます? 最近、全然いじっていなかったので、びっくりしてしまいました。

とりあえず、selectで切り替えてみるサンプルを作ってみました。 お楽しみ下さい。

コード



<!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>
    <script src="http://maps.google.com/maps?file=api&v=2&key=SETYOURKEY"
        type="text/javascript" charset="UTF-8"></script>
  </head>
  <body>
    <div id="map" style="width:450px; height:400px"></div>
    <script type="text/javascript">
    //<![CDATA[

    var maptype = new Array(10);

    maptype[0] = G_NORMAL_MAP;
    maptype[1] = G_SATELLITE_MAP;
    maptype[2] = G_HYBRID_MAP;
    maptype[3] = G_PHYSICAL_MAP;
    maptype[4] = G_MOON_ELEVATION_MAP;
    maptype[5] = G_MOON_VISIBLE_MAP;
    maptype[6] = G_MARS_ELEVATION_MAP;
    maptype[7] = G_MARS_VISIBLE_MAP;
    maptype[8] = G_MARS_INFRARED_MAP;
    maptype[9] = G_SKY_VISIBLE_MAP;

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(36.033, 139.15), 11);
    map.setMapType(G_NORMAL_MAP);

    function selectchanged() {
        var point;

        var sel = document.getElementById("sel");
        var n = sel.selectedIndex;

        map.setMapType(maptype[n]);
    }

    //]]>
    </script>

    <P>
    <select id="sel" onChange="selectchanged()">
      <option>G_NORMAL_MAP</option>
      <option>G_SATELLITE_MAP</option>
      <option>G_HYBRID_MAP</option>
      <option>G_PHYSICAL_MAP</option>
      <option>G_MOON_ELEVATION_MAP</option>
      <option>G_MOON_VISIBLE_MAP</option>
      <option>G_MARS_ELEVATION_MAP</option>
      <option>G_MARS_VISIBLE_MAP</option>
      <option>G_MARS_INFRARED_MAP</option>
      <option>G_SKY_VISIBLE_MAP</option>
    </select>
    </P>
  </body>
</html>


   このエントリをはてなブックマークに登録   

プロフェッショナルIPv6解説動画シリーズ再生リスト

動画で学ぶ「プロフェッショナルIPv6」を作っています。 もしよろしければご覧ください。お楽しみいただければ幸いです!

   このエントリをはてなブックマークに登録