« Google Maps API for Flash 制作メモ     [No.82] Viña Maipo - Cabernet, Merlot »

Google Maps の flash 版と javascript 版

API。左、javascript 版。右、flash 版。いずれもマウスホイールでズーム。

Google Maps API for Flash サンプル
ActionScript と mxml をコンパイルして Adobe FLEX SDK で制作
swfobject.js を使うことで Valid に。
see http://code.google.com/p/swfobject/


比較検討。

  • javascript 版はフキダシを弄りにくい、flash 版は弄りやすい。
  • javascript 版はマーカーの指定が面倒、flash 版は透過度も指定できる。
  • javascript 版は有効にされていないと見られない、flash 版はさらにPlayer を要求する。
  • このケースで javascript ファイルは1.8KB、flash 版 swf ファイルは 36KB の重さ。
  • どちらかといえば flash 版のほうがむずかしい(と思う)。

この程度のマップならば、「javascript でなければならない」理由はない。
この程度のマップならば、「flash でなければならない」理由もない。
Google のデモのような、より高度な地図を用意しクールでお洒落なサイトを目指すならフラッシュ版、質実剛健を志向するなら javascript 版。・・・というところ?

Google は、Yahoo! や Vertical Earth への対抗だけでなく、javascript にない拡張性・発展性を flash に認識していると考えるのが自然だと思う。だから軸足を flash に移し傾斜していくだろうと想像するのも自然だと思う。

他の flash 版基本テストマップ | javascript 版サンプル一覧


コメント

※Sign in または Sign up しなくてもコメントできます

serima :

いつもブログ読ませていただいております!serimaと申します。
非常に参考になる記事ばかりで敬服いたします。

Googlemaps API for FLASHは携帯電話に適用できるのでしょうか?
いろいろと調べているのですが、そういった資料はまだ見つからないので気になっています。。

Seis Pesos :

>> serima さん
モバイルについて私は無知なのですが、文字コードなどの相違からして、(デフォルトではおそらく)無理だと思います。

serima :

>>Seis Pesosさん
コメントありがとうございます。
そうなんですか~・・・、資料を見つけたらぜひ記事で取り上げてください!

Google Maps APIのアンテナは高く張っているので!

Jose Luis :

前回のカスタムマップでは丁寧なチュートリアルをありがとうございました。

6ペソさんの地下鉄路線図を参考にシベリア鉄道の路線図を作成しようと考えております。

PolyLineの引き方ですが、どのくらいの距離で2点をつないでいらっしゃいますでしょうか?
また、PolyLIneを引く際に簡単に座標を取得できるような方法があればご教示いただければと思います。

6 pesos :

>> Jose Luis さん
私の場合、Polyline はズームレベル15程度で「おおよそ」の線を引いています。
中央線の中野~立川のようにほぼ直線なら軽くて済みますが、曲線の多い路線では描画に時間がかかりすぎます。
もちろん精密にトレースするに越したことはないですが、精密に引こうとすればそれだけデータは重厚になり、ひいては閲覧者に優しくない(重すぎる)地図になってしまいます。

Google Maps はそもそも「地図」と「写真」で微妙にズレている地域も多いので、細かすぎても仕方ない部分がありますね。

線のトレースは、自分の作業用として次の地図を使っています。
http://japonyol.net/pathfinder.html

Jose Luis :

6ペソさん

ご指摘のとおり、細かすぎると重くなり、おおざっぱすぎると用をなさないと思いました。
ズームレベル15で作成してみようと思います。

>線のトレースは、自分の作業用として次の地図を使っています。
http://japonyol.net/pathfinder.html

コメントした直後にこのページを見つけました。利用させていただきます。

いろいろありがとうございました!

mitu :

時間がとってFlashAPIやってみよーかなー
Flashだったら10000件同時表示とかパッとできちゃったりしてー?
でもASめんどいしなー
Flexなんて訳分んないものに足突っ込むのもなー
と、ずーっとうじうじうじうじしております。

>>Google は、Yahoo! や Vertical Earth への対抗だけでなく、javascript にない拡張性・発展性を flash に認識していると考えるのが自然だと思う。だから軸足を flash に移し傾斜していくだろうと想像するのも自然だと思う。

上のコメントを読んでちょっと感じたこと。
一般ユーザのマップサービスの知名度から言えばGoogleが1番なわけですが・・・
開発者からの知名度は、GoogleMaps(v2)・Yahoo!地図情報(v2)・VirtualEarth(v5)な感じでしょうか。
全て並行して作った経験上から言えば、JS版で開発する難易度に大差はありません。ただ、GoogleMapsが1番やれることが多かったように思えます。(柔軟度)
VEのWeb上で3D表示とか(個人的にはいらねーよですが)GoogleEarthで対抗できてますし、Yahoo!のFlash版も伸び悩みでしたし。

で、昨年からMSがFlash(Flex)に対抗してSilverLightを出してきたってのが、GoogleがFlash(Flex)に向かった1番の理由じゃないかなーと。

今:Javascriptだけだとクロスブラウザとかめんどいし・・Flexとか・・SilverLightのほうが・・・
昔:Ajaxで作るとスゲー!非同期通信でいろんなことできる!でもIEだと重くない?
もっと昔:Flashってアニメーションもできてスゲー!
もっともっと昔:JavaScriptってすげー(棒読)

ここ5年くらいの時代の変化って・・・MSとAdobeに踊らされてる感が怖いですね。

mitu :

追伸。Flash版を動かしていて気づいた点。

マウススクロールでマップの拡大縮小すると、ページも上下してしまう。(実行環境:Win Vista IE7.0.6)

JS版ではそんなことないんですけどねー
DIVで囲ってマウススクロールの判定をreturn false;するとか・・めんどいなーと思ったり。

6 pesos :

>> mitu さん
詳しいことは分かりませんが、SilverLight ってただの Player だと思ってました、えぇ。
今後 Google や MS の間で差が出るとしたら、技術面より思想面でしょうか?

なんにせよ、敷居が高すぎるのが難ですね API は。
私自身は、正直なところフラッシュが好きではありません。
市場の圧倒的大多数を占める一般文系ユーザのひとりとしては、グーグルやアドビの高邁な技術志向がクヤシイので、反骨心を以ってちょっかいを出している次第です。

マウススクロール、たしかにウザイですよね。ブログのコンテンツには使うべきでないですね、失礼しました。

apple :

はじめまして。「月と六ペソ」さんのサイト非常にわかりやすく参考にさせていただいております。
javascriptではフキダシの枠のデザインは変更することができるのでしょうか?
外側の枠も弄れたらよりかっこよくなるのでは・・と調べているのですがなかなか難しいです。。

Seis Pesos (月と6ペソ) :

>> apple さん

はじめまして。
フキダシの枠を変えるには、外部ライブラリが必須になると思います。
私が使った中では、「infobox.js」がいいかなぁと思いました。以下が使用例です。
http://japonyol.net/editor/blue/rox.html

「pdmarker.js」も古くからあります。
http://japonyol.net/editor/pd_basic4.html

ほかには、Google が提示している次のようなサンプルがあります。
http://gmaps-samples.googlecode.com/svn/trunk/vdaywindow/vdaywindow.html
または
http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/1.0/examples/simpleExample.html

一長一短あるとは思いますが、お好みで選択されてはいかがでしょうか。

apple :

>>Seis Pesosさん
丁寧なコメントをどうもありがとうございます。
いろいろとあるんですね!
早速試してみたいと思います^^

サイトマップ

サイト内 検索

About

written by Seis Pesos

feedburner  はてなブックマークカウンター

E-Mail

Open-ID

Powered by MT 4.23-ja