はじめに
本連載では、FlashやDHTMLによるリッチクライアントアプリケーションを作成できるOpenLaszloについて説明していきます。前回は、OpenLaszloとサーバーサイド連携について説明しました。今回は、OpenLaszloからGoogleマップを使用する方法を、簡単なサンプルプログラムを通して説明していきます。
これまでの記事
対象読者
- HTML、JavaScriptを使用した開発を行ったことがある方
- Flashを使用した開発を行ったことがある方
- OpenLaszloについて興味がある方
Googleマップの準備
Googleマップを使用すると、 OpenLaszloで作成するアプレットに地図を埋め込んで表示することができます。マーカーの表示、吹き出しの表示といったカスタマイズが、 OpenLaszloからGoogle Maps APIを呼び出すことで、簡単に実現できます。
Google Maps API キーの取得
Googleマップを使用するには、Google Maps API キーが必要になります。APIキーは、Google Maps APIのページから取得できます。利用方法の「1. 登録して Google Maps API キーを取得します」のリンクをクリックすると登録画面が表示されます。今回のサンプルプログラムは、ローカルホスト上で動かすので、申請するURLは、 http://localhost:8080/ で申請します。
Google Maps API for Flash SDKのダウンロード
SDKは、Google MAPS APIのページから取得できます。利用方法の「2. Google Maps API for Flash SDK をダウンロードします」のリンクをクリックするとSDKのダウンロードが始まります。ダウンロードしたsdk.zipを解凍して、libフォルダにある map_1_9a.swcを、「OpenLaszloのインストール先¥Server¥lps-4.3.0（※インストールしたバージョンで異なります）¥WEB-INF」に、flexlibフォルダを作成してこの中に入れておきます。
Google Mapsの使い方
OpenLaszloで com.google.mapsパッケージのMapクラスを生成して、OpenLaszloのviewクラスの子として追加すると、Googleマップが画面に表示されます。コンパイルするときのランタイムはswf9、またはswf10を選択してください。その他では動作しません。
<?xml version="1.0" encoding="UTF-8"?>
<canvas width ="468"
height="530"
debug ="false">
<!-- gmap.lzxのインクルード -->
<include href="./gmap.lzx"/>
<!-- Googleマップを表示するビュー -->
<view id="GMapView" x ="10" y ="30" options="ignorelayout">
<attribute name="_gmap" type="expression" value="null"/>
<handler name="oninit">
<![CDATA[
this._gmap = new GMap();
//viewにMapsを子として追加する
this.sprite.addChildAt(this._gmap.map, this.sprite.numChildren);
]]>
</handler>
</view>
</canvas>
<?xml version="1.0" encoding="UTF-8"?>
<library>
<script when="immediate"><![CDATA[
public final class GMap {
#passthrough (toplevel: true) {
//Google Maps APIライブラリをインポートする
import com.google.maps.*;
import com.google.maps.controls.*;
import com.google.maps.overlays.*;
import com.google.maps.styles.*;
import flash.geom.*;
}#
//Google Maps APIキー
private const KEY = '発行されたAPIキーをここに記入してください。';
private var _map:Map;
public function GMap() {
super();
this._map = new Map();
this._map.key = KEY; //Google Maps APIキーをセットする
this._map.setSize(new Point(450, 340)); //Google Mapsのサイズを設定
}
#passthrough {
//Mapオブジェクトのゲッター
public function get map() {
return this._map;
}
}#
}
]]></script>
</library>
