Google Maps APIメモ(v2) #6 オリジナルマーカー情報をjsonデータで読み込み

シリーズ第6弾、シリーズこれで終了
第5弾では、オリジナルマーカーは1種類1個だけだったのですが、今回はオリジナルマーカーを複数種類、複数個読み込んでみようかと。
しかも、それをjsonデータから読み込んで、ズームレベルでの表示/非表示の管理や、情報ウインドウの管理も一度にしちゃおうじゃないか。
というBlogに書くのがめんどくさくなった?反響がないことによる手抜き?みたいな感じです。

やることの整理

  • オリジナルアイコンは、第5弾で作った雪と、星の2種にする。
  • オリジナルアイコンの数は適当に複数個。
  • 任意のレベルでオリジナルアイコン出現
  • オリジナルアイコンをクリックするとそのアイコンの情報ウインドウが表示

参考にしたところ

サンプル

jsonデータ

用意したjsonデータは下記の通り

スクリプト

あんまりイラスト汚すのも忍びないので、数も少なめで雰囲気も似せてますが、オリジナルアイコンには影を付けてるのでよく見るとわかると思います。
minZoomというのは、アイコンが出現するレベルで、maxZoomまでは、アイコン出てます。
それ以上のズームレベルになるとアイコン消えます。
1箇所どうにもできないところがあって、mixZoom(オリジナルアイコンが表示されるズームレベル)が1の場合が、ズームレベル0の時も表示されてしまうようです。
これは、バグなんだろうか?
このネタは、もともと「沢山の情報をうまく整理して、楽しげにイラストに落とし込めないか?」というのを解決するために、Google Maps API使ったらできるかな。ということで作ったのが基になってまして、それをメモしてました。
なんかもやもやして解決したいことあったらお気軽にご相談ください。

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です