« Fireworksで点滅する星を作る | メイン | ココから周辺情報検索ガジェット 機能追加しました! »

Flash と GoogleMaps を連携させるライブラリ このエントリーを含むはてなブックマーク BuzzurlにブックマークBuzzurlにブックマーク

研究員のテライです。

マッシュアップの素材としてもよく使われる Google Maps ですが、JavaScript や PHP をやっているデベロッパーさん達が Google Maps API を楽しそうに使いこなしている一方、Flash メインの僕は悶々といじけておりました。Flash で Google Maps を読み込み&操作する方法がよく分からなかったのです。ひょっとしたら Flash 業界内でも確立してはいないのではないでしょうか?

Google Maps ページ(html)の上に、背景を透明にした全画面 swf レイヤーを重ねる方法はよく見ますが、透明化:wmode=tranceparent すると通常では IE で日本語が入力できなくなるなど、運用には癖があるので面倒といえば面倒。JavaScript との連携も必要なので、バイリンガルでない僕にはハードル高め。

理想は「Flash(SWF)ファイルの中に GoogleMap 画像をロードして、ActionScript の関数で操作」したいのです!僕は。

誰かなんとかしてくれないかなぁ〜と、ラボ研究員にあるまじき「待ちの姿勢」で待っていたら、なんと2つ4つもありました。

下準備:とりあえずは自分用の Google Maps API キーを取得(無料)しておきましょう。話はそれからです。

方法0:2008.5.19追記:Google Maps API for Flash

Flash(ActionScript3) から GoogleMaps API を操作するためのライブラリが、Google から正式に公開されました。今後使用事例が増えていくものと思います。
Official Google Maps API Blog: Introducing the Google Maps API for Flash

2008年11月さらに追記:5月のリリース時点ではswc配布のみのため、特別なことをしない限りはFlexユーザしか使えなかったのですが、最近FlashCS3用のmxpが配布され、これをインストールすればFlashのコンポーネントとして使えるようになりました。つまり Flash CS3 でGoogle Maps API for Flash が使えるということです。

方法1:google-maps-flash-interface

google-maps-flash-interface」というプロジェクトが GoogleCode 上にありまして、今のところ ActionScript 2.0 用のみですが、これを使うと念願の「SWF 内に GoogleMap を展開&操作」が簡単にできます。操作のための関数も既に用意されていて、一例を挙げると:

  • mc.moveNorth(); … いかにも北に移動してくれそうですね!
  • mc.zoom+1; … おお〜。ズームしてくれそうですね。getter/setter として設定されているのでプロパティとして扱えます。
  • mc.setMapSize(620, 380); … 地図を読み込んでいる mc を幅620px 高さ380px に拡大縮小。表示エリアを簡単に操作できるのです。
  • mc.zoomOnPins(ピンの名前); … 指定したピンが中央にくるように(やってみたけどあんまり中央じゃないぞ?要調査)しつつ、地図をズームしてくれます。

等々、分かりやすい指定で簡単に操作できます。ピンの追加/削除用メソッドももちろん用意されています。

開発者でもあり、詳細解説もされている「Experience Matters」さんのブログでは、実際に Rolex のサイトにてこのライブラリを使ったとのことで、ライブラリが実働する様子を確認できます。というか、この案件のためにライブラリを作ったそうです。

なお、ActionScript 3.0 版は2008年登場予定とのこと。個人的に、Wii インターネットチャンネル用に使いたかったので、Flash Player 7 対応しているかと期待したのですが、Flash 8 以降の機能である geom パッケージを多用しているので、そのままでは動かない様子。ライブラリをいじるか、Wii×Opera ブラウザの Flash Player 8 対応を待つか、どっちが早いかな(笑)

方法2:Modest Maps

こちらは「Modest Maps」という別のライブラリ。サイトに掲載されている特徴をリストアップすると:

  • OpenStreetMap, NASA Blue Marble, Google, Yahoo!, Microsoft といった「タイル(敷き)ベース」の地図ならだいたい対応している。
  • タイル画像部分をデベロッパ側で自作することもできる。自作地図ですね。
  • なめらかなパン&ズーム
  • マーカーの追尾(トラッキング)もできます。
  • FlashLite で動くそうです!

だそうで、逆にその下には、Modest Maps でできないことが列挙されていますが、このあたりは実際に使ってからコメントする方が良さそうですね。

Flash Lite 対応ということで Flash Player 7 対応かと期待して、サンプルを試しに 7形式でパブリッシュしてみましたが、こちらもやはり geom パッケージを使いまくっているようで駄目でした。Map 系のコア部分とは別のところで geom 使っているのかな?

以上、とにかく昨日見つけたところなので、調査はこれからなのですが、同じ悲願を達成したかったという Flasher さんは試しに遊んでみてはいかがでしょうか?

注目の追記!!

テライ個人ブログの方でさらに2個のライブラリ(コンポーネント)を教えていただきました。

方法3:SwfGmap

おお〜。日本語サイト!ActionScript 3.0 のみかな?ダウンロードはこちらのページからSVNで。

方法4:Advanced Flash COmponets G Map V. 2.6.1

ドキュメントが充実してますね。API リファレンスチュートリアルが豊富で使いやすいかも。Flash8用コンポーネント形式です。ActionScript 3.0 にも対応しているそうです。これが一番使いやすいかも。でもコンポーネントがV2だろうからFla8以上だろうなぁ。。

トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: Flash と GoogleMaps を連携させるライブラリ:

» Yahoo!地図情報APIがバージョンアップ。ついに世界対応に 送信元 メディアテクノロジーラボ ブログ
フナミタカオです。
3月13日に、Yahoo!地図情報APIのバージョンアップ版が公開されました。
このバージョンアップにより、日... [詳しくはこちら]

コメント (3)

フナミタカオ:

Flash内に用意した、球体に、航空写真を貼ったりできませんかねえ。
Wiiの地球儀が作れたらなあとおもっています。
Virtual Earthでも、いいのですが、Macで動かなかったり、ちょっと、重かったりするので、ライトな地球儀がほしいのですが、そういう、事例あったら教えてくださーい。

テライ:

Flash の displacementMapFilter という機能を使うと、平面画像を湾曲させることができまして:
http://labs.zeh.com.br/blog/?p=128
みたいにできるのですが、実装するには GoogleMaps の画像をFlash上でビットマップとして取り扱えるように変換するのですが、その行為をGoogleがよく思っていないらしく、Google八分される可能性があるそうです。

ずばり
http://psyark.jp/?entry=20050925191451
みたいに作りまして、インタラクションも入れて
http://psyark.jp/?entry=20050929021834
みたいなのが出来ちゃうそうです。AS3だとさらに高速らしいです。

できあいのFlash地球儀ということでしたら、こんなのもあります。(紹介記事へのリンク)
http://www.nitenichiryu.org/archives/2007/05/15/1815.php

フナミタカオ:

どうもありがとうございます。
画像の権利のクリアは必要そうですが、イメージできました。
近いうちに、挑戦してみます

コメントを投稿

※ 必ず利用規約をお読み頂き、同意の上送信して下さい。また、トラックバック元・リンク先の内容には、リクルートは一切責任を負いません。

※ 必ず利用規約をお読み頂き、同意の上送信して下さい。

MA5

最近のコメント

Tag cloud