GoogleMap API はじめ

2010/03/03

おぉ!GoogleMapAPIのFlex用ライブラリーがswc形式でGoogle本家にあがってます(^_^)/ これで、わざわざFlashとJavaScriptの連携しなくてもよさげ? 3分クッキングで作成してみた。

■google_map.swf htmlTextは機能ダメダメだけど、imgタグでswfを直で読めるんだぁ・・・ (^_^)つ ペタッ まだクラスの中身を詳しく見てないけど、swf間で通信(LocalConnection等)を実装すれば色んなことできそうです。

■Google Maps API for Flash - FlexBuilder ▽チュートリアル http://code.google.com/intl/ja/apis/maps/documentation/flash/tutorial-flexbuilder.html

▽ダウンロード http://maps.googleapis.com/maps/flash/release/sdk.zip

■Maps API キーの取得 ドメイン毎にMapsAPIキーを生成できます。 http://code.google.com/intl/ja/apis/maps/signup.html ドメイン毎に発行なので、開発環境と本番ではキーを別々にしなければいけません。

プログラムは、クラス実装さえわかれば難しいことはなさげです。 「ARK-Web」にわかりやすくまとめられています。 実践編ではFlexとJavaScript連携でやってますが、Flexオンリーでやった方が軽そうだけど、 HTML派に考慮しての事かと思います。

■動作確認サンプル ▽ソース これだけで、あっさり表示されます。 [as3] import com.google.maps.controls.ZoomControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.PositionControl; import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType;

private var map:Map;
private var locateX:Number = 35.728912;
private var locateY:Number = 139.7095082;

private function onInitialize(event:Event):void {
    map = new Map();
    map.key = GoogleMapキー;
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    mapContainer.addChild(map);
}

private function onResize(event:Event):void {
    map.setSize(new Point(mapContainer.width, mapContainer.height));        
}

private function onMapReady(event:Event):void {
    map.setCenter(new LatLng(locateX, locateY), 14, MapType.NORMAL_MAP_TYPE);
    map.addControl(new ZoomControl());
    map.addControl(new PositionControl());
    map.addControl(new MapTypeControl());
}

[/as3] locateX、locateYの位置指定は、GoogleMapのパラメータを直接埋め込んでますが、 各パラメータをGoogleからシームレスにやり取りできるかですね。 只今、このサイトと連動できるよう作成中で、何だか面白くなってきました。