GoogleEarth API と GoogleMaps API を連動させてみる

こんにちは。松田です。
地図を表示するアプリケーションとしては GoogleMaps や GoogleEarth が有名です。
GoogleMapsはブラウザ上での実行、GoogleEarthはクライアントソフトでの実行となりますが、先日Googleが「GoogleEarth API」という、GoogleEarthをブラウザ上で表示できるAPIを発表しました。
今回は早速それを試してみたいと思います。

■ API Keyの取得
まずはAPI Keyの取得です。
このキーを取得しないとGoogleEarth APIを使用することができません。
API KeyはGoogleMaps APIと共通ということなので、下記リンクから取得します。
GoogleMaps API Keyの取得

■ サンプルスクリプトを取得
GoogleEarth APIのサイトにサンプルスクリプトのまとめページがあるのでこれを使ってみます。
今回は最もシンプルな「Hello, Earth」をコピペして使います。
マップスクリプトの読み込み部分の「key」の値を先ほど取得したAPI Keyに書き換えます。

<script src="http://www.google.com/jsapi?key=(取得したAPI Key)"></script>

■ プラグインのインストール/実行
これで準備完了です。
最初の表示時にはプラグインのインストールを求められますが、これをインストールしないとGoogleEarthが表示できないのでクリックしてインストールしてください。

ソースの表示

うごいた！カッケー！

操作方法もクライアントソフトのGoogleEarthとほぼ同じです。
右クリックしながらマウスドラッグでぐりんぐりん動かせます。
マウススクロールで拡大縮小することも可能です。

■ GoogleMapsと連動させる
そして、なんと、GoogleEarth APIはGoogleMaps APIと連動できるようです。
簡単に言うと、これまでGoogleMaps APIで作られていたシステムが簡単にGoogleEarth化できちゃうよ、ということです。

まずは通常のGoogleMapを作成。

・ソースの表示

サンプルをほぼ丸パクリした、いたって普通のGoogleMapです。

これをGoogleEarth化するためにはGMap2オブジェクト作成後に次の行を加えます。

map.addMapType(G_SATELLITE_3D_MAP); // mapはGmap2のインスタンス

これはmapType切り替え機能を使用していないシステムでは動作させることができません。
その際は下の行も書き加えてマップタイプ切り替え機能自体を追加してください。

map.addControl(new GMapTypeControl()); 

次に、GoogleMapのスクリプト呼び出し部分を変更します。
「v=2」となっている部分を「v=2.x」に変更します。

<script src="http://maps.google.com/maps?file=api &amp;v=2 &amp;key=･･･
↓
<script src="http://maps.google.com/maps?file=api &amp;v=2.x &amp;key=･･･

基本的に、この2箇所の変更だけで完了です。

これでマップタイプの選択肢に「Earth」が加わり、これをクリックするとGoogleEarthとして表示されるようになります。

・ソースの表示

スゲー！！！
（※マップ切り替え時のLoading時間がかなり長いので辛抱強く待ちましょう）

表示してみるとわかりますが、GoogleMaps上に配置されたMarkerが特殊なコードを書く必要も無くそのままGoogleEarth上に表示されています。
これはGoogleMaps上にラインを引けるGPolylineクラスなどでも同様に可能です。

■ オマケ
というわけで、ほぼ放置されていた地図日記２を、早速GoogleEarth化させて見ました。

地図日記では地図を移動させるたびにAjaxでスポット位置を取り出してMarkerを配置するようにしていましたが、さすがにその機能は上記のスクリプト追加だけでは実装できないようです。
GoogleEarthで表示されるのは最初に表示されているMarkerだけのようで、初期表示のMarkerだけが表示されています。
今回は表示の切替部分しか作っていませんが、このへんはまだまだ研究が必要そうですね。

-------------------------------------------------------
5/30 追記
トレイントレインのショップ情報ページにもGoogleEarth機能を付けてみました。
こっちは最初に全てのスポットを読み込んで表示するだけのシンプルな機能なので、おおかたうまくいっているみたいです。
-------------------------------------------------------

・微妙に関連
Google Maps を Google Earth 風にする（てっく煮ブログ）
これはこれでカッコイイ