はじめに
Google Mashup Editor（GME）は、マッシュアップ デベロッパー向けに待望されている便利なツールです。GME は、デベロッパーが外部データとの接続に基づいてウェブページ内の動的コンポーネント（地図、テーブル、リスト、その他の要素）を作成および編集するのに役立ちます。これらの要素は、iframe を使用してウェブページやブログに含めることができます。このチュートリアルでは、GME で作成した地図に KML ファイルを組み込む方法について説明します。
Google Mashup Editor の最初のインプレッション
- ほとんどの Google サービスと同様に、インターフェースはシンプルでわかりやすく、明確で明確なインターフェースを備えています。
- これには便利なプロジェクト インデックスがあり、コードのサンプルや作成者のコードのコレクションは増え続けています。
- プロジェクトへの追加リソース（画像ファイルなど）を簡単に保存できます。
- 使いやすい XML デバッガが用意されています。
- 使いやすいサンプル アプリケーションが多数用意されています。
KML デベロッパー向け GME
インターネットが登場する前は、従来は空間データの共有は困難でした。しかし、インターネットの発展に伴い、地図アプリケーションによって、地理情報システム（GIS）データを世界中で簡単に共有できるようになりました。KML は、コンパクトで開発が容易で、Google Earth や Google マップなどの一般的なアプリケーションでサポートされており、GIS データの表現と交換の標準となっています。
最近まで、JavaScript に基づいてページを作成および編集するプロセスは、KML デベロッパーにとって大きな問題でした。マッシュアップを作成してデバッグするには、追加の手順を多数行う必要があります。GME では、いくつかの基本的なコンポーネントから KML ベースのマッシュアップを迅速に作成できます。作成のプロセスで、HTML や JavaScript に関する特別な知識は必要ありません。GME のサンプル プロジェクトには、すぐに開始できるものが用意されています。
以下の例では、Pict EarthUSA のフライト中に撮影された写真のコレクションを指す KML ファイルを使用します。
Pict Earth のマップ マッシュアップのスナップショットは次のとおりです。
Google Maps API を使用して、KML ファイルを GME プロジェクトに統合する手順は次のとおりです。
ステップ 1: KML ファイルを選択する
ステップ 2: 新しい GME プロジェクトを作成する
ステップ 3: KML を追加する関数を作成する
ステップ 4: 地図を追加する
ステップ 5: マッシュアップをテストする
ステップ 6: マッシュアップを公開する
マッシュアップを公開する
手順 1: KML ファイルを選択する
地図に追加する KML ファイルを選択します。Google マップでサポートされている機能を使用できます。一般公開されているサーバーでホストされている必要があります。
ステップ 2: 新しい GME プロジェクトを作成する
新しい空の GME プロジェクトを作成します。
空の GME プロジェクトは次のようになります。
関数のタイトルと名前を追加します。
<gm:page title="Pict Earth ミッション" Authentication="false" onload="kmlPE()"></gm:page>
ステップ 3: KML を追加する関数を作成する
マップに追加する KML ファイルのパスを使用して JavaScript 関数を作成します。
<script>
function kmlPE()
{
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!--Place KML on Map -->
myMap.addOverlay(geoXml);
<!--Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
ステップ 4: 地図を追加する
地図とパラメータを追加します。
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
ステップ 5: マッシュアップをテストする。
テストボタン（F4）を押します。
これは、サンドボックスでテストされた Pict Earth のマッシュアップの画像です。
これで、アプリケーションのテキストを検証して最初の結果を確認できるようになりました。タイトルとリンクを追加して、もう一度テストできます。
ステップ 6: マッシュアップを公開する
プロジェクト名を設定して公開します。これにより、マッシュアップに恒久的なリンクが渡され、ウェブページに組み込むことができます。この例の GME プロジェクト ホームページへのリンクです。プロジェクトのソースコードもご覧ください。
ステップ 7: ウェブページにマッシュアップを追加する
iframe を使用してウェブページにマッシュアップを追加する。たとえば、サンプル プロジェクトを挿入するには、次のコードを追加します。
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
プロジェクトに Google アナリティクス コードを追加して、ページを表示している人に関する統計情報を追跡することもできます。簡単なスクリプトは次のとおりです。
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
ステップ 8: GME ギャラリーに配置する
GME Mashup Gallery にマッシュアップを公開します。他のユーザーはマッシュアップを表示できます。
より詳しく:
Google Mashup Editor スタートガイドをご覧ください。マッシュアップの作成プロセスについて詳しく説明しています。また、タグのリストで、すべての gm タグの簡単な例と例をご確認ください。
コード:
GME で Pict Earth KML を使用するためのコード全体を次に示します。
<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>
<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
<script>
function kmlPE(){
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!-- Place KML on Map -->
myMap.addOverlay(geoXml);
<!-- Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
</gm:page>
次のステップ
マッシュアップを公開すると、その KML ファイルをパラメータとして使用して別のアプリケーションに組み込むか、地図として直接読み込むことができます。たとえば、次のようなページです。
http://param.googlemashups.com GME マッシュアップです。以下のように KML を URL にパラメータとして追加すると、KML ファイルをマッシュアップに直接参照できます。 http://param.googlemashups.com/?kml=http://mapGadgets.googlepages.com/cta.kmlプロジェクトからガジェットを作成することもできます。送信したら、[ファイル] メニューに移動して [ガジェットを送信] をクリックし、手順に沿って操作します。これにより、アプリケーションを Google のカスタマイズしたホームページや他のウェブページに簡単に追加したり、他のユーザーと共有したりできるようになります。