【Google Maps API】

7月 02 2009

Google Maps API for Flash で地図を作る + カスタムマーカー

Google Maps API ,

Google Maps API for Flash で地図を作る + マーカーを付ける、にカスタムマーカーを設置してみました。

イラストレータで作成したパーキングマークをグラフィックシンボルに変換し更にMovieClip, ParkingMCにしました。
リンケージ設定しクラスをParkingMCにしています。

このParkingMCをGoogle Mapのマーカーで使うにはMarkerOptionsのiconプロパティに設定すると実現できました。

Google Map + Custom Marker
この投稿の続きを読む »

Bookmark and Share

Related posts

コメントはまだありません »

1月 26 2009

Google Maps API for Flash でリサイズ可能な地図を作る

Google Maps API ,

Google Maps API for Flash で作る地図は、当たり前だけど Flash(swf) ファイルなのでリサイズ可能な Flash 制作と同じことに気をつければ簡単に作れる。

まずは Flash。
・原点を左上にする。
・拡大しないようにする。

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

・ブラウザウインドウのリサイズにあわせて地図サイズを変更する。

stage.addEventListener(Event.RESIZE,resizeHandler);
 
function resizeHandler (e:Event):void {
	map.setSize(new Point(stage.stageWidth, stage.stageHeight));
}

次に表示させるHTMLのCSS

html{
	width:100%;
	height:100%;
}
body{
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

swf表示タグ

width="100%"
height="100%"

Javascript Google Map より簡単に設置ができた。
サーバー側と連携した動的な地図生成は研究課題にしておく。

Bookmark and Share

Related posts

コメントはまだありません »

1月 22 2009

Google Maps API for Flash で地図を作る + 情報ウインドウを付ける

Google Maps API ,

Google Maps - infoWindow

Google Maps - infoWindow

Google Maps API for Flash で作った地図に情報ウインドウを追加した。
地図をクリックするとその地点に情報ウインドウを出し、タイトルとクリック地点の緯度経度を表示させた。

情報ウインドウは Map インスタンスの openInfoWindow を使う。
この投稿の続きを読む »

Bookmark and Share

Related posts

コメントはまだありません »

1月 15 2009

Google Maps API for Flash で地図を作る + マーカーを付ける

Google Maps API ,

Google Maps API for Flash で作った地図にマーカーを追加した。

移動・拡大縮小ナビゲーションコントロール デザインを Javascript API と同じにした。

// set Navigation - zoom
map.addControl(new ZoomControl());
// set Navigation - position
map.addControl(new PositionControl());

Flash API 専用。

// set Navigation Control -- zoom / move
map.addControl(new NavigationControl());
Google Map with Marker by Flash

Google Map with Marker by Flash

Flash API 専用だと new NavigationControl() だけで「移動・拡大縮小」コントロールを追加できる。

マーカーはシェープで描画されているらしく、頭の大きさ・色・線の太さ・線の色・透明度など Javascript API ではできないことも設定できる。

マーカーのドラッグ設定は MarkerOptions の設定で draggable: true にするだけ、カンタン！
バウンド・アニメーションの設定は gravity プロパティにNumber(0~1)で設定する、これもカンタン！

ドラッグ移動地点の緯度経度はイベントリスナーハンドラのイベント引数に LatLng インスタンスとしてセットされているので toString() して取出す、Javascript API と同じ。

地図のフェードインは HydroTween.go で実装した。
この投稿の続きを読む »

Bookmark and Share

Related posts

4 件のコメント »

1月 03 2009

Google Maps API for Flash で地図を作る

Google Maps API ,

Google Maps API for Flash は現在 Version 1.8c。
コンポーネントが提供され、とっても簡単に Flash / Flex で Google Map が作成できる。

Google Maps API for Flash SDK をダウンロードし Setup Instructions の説明通りコンポーネント(swc)を配置する。
Tutorial に詳しく書かれている。

Flashではコンポーネント・パレットから GoogleMapsLibrary をステージへ適当にドラッグしあとは Actionscript で地図を作成。

Google Map API for Flash

Google Map API for Flash


この投稿の続きを読む »

Bookmark and Share

Related posts

コメントはまだありません »

WP Theme & Icons by N.Design Studio
RSS