タグ: google

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ページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #5 オリジナルのマーカーを追加する(まずは1種類1個だけ)

シリーズ第5弾
第4弾で作ったマップにオリジナルのマーカーを追加してみる。
まずは1種類1個だけ。

参考にしたところ

オリジナルマーカー画像の作成について

アイコンの前面画像とアイコンの影(必要ない場合はなくてもいいんだろうけども)を作成するんだけども、起点は左上なので、影を書き出す時も、そこを気にして書き出せばOK。
Fireworksの場合は、背景透明で作って、PNG32で書き出せばいいみたい。影のアルファ値も保ってくれているようです。

  • 前面画像のようす

スクリプト

右側の男の子の帽子の右上にオリジナルのアイコン置いてます。
マップを拡大縮小してもサイズが変わらないのがオリジナルのアイコンです。
通常、イラストのこの場所にアイコンを置きたい!とか決まっているはずなので、クリックしたらそこの緯度、経度を表示するようにしてます。
HTML側は、下記のようにしてます。

サンプル

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

Google Maps APIメモ(v2) #4 オリジナルの画像をタイルレイヤーで表示

シリーズ第4弾
いつもは、地図とかで使っているGoogle MaGoogle Mps APIだけど、
使い方によっては、色んな事考えられるぞ。という例のメモ

オリジナルの画像や写真とかをGoogle MaGoogle Mps APIを使って表示できるようにする。

参考にしたところ

タイル画像の切り出しについて

タイル1枚は、256*256pxらしい。
FireBugで確認してみた画面↓

  • ズームレベル0でタイル1*1枚
  • ズームレベル1でタイル2*2枚
  • ズームレベル2でタイル4*4枚
  • ズームレベル3でタイル8*8枚

ということらしい。
じゃあ、横長や縦長の画像の場合は、どうなるんだ?とも思って実際に試してもみたが、
ズームレベル0だとやはりタイル1枚のみが表示される状態。
ということは、タイル画像を作成するときに、正方形にちょうど収まるように作ってやればいいみたい。
まずは、Sampleを見てみてください。

Fireworksでの作業手順メモ

  1. タイルの最大サイズを決めて、ファイル作成
    Sampleは、8*8枚、2048*2048pxとした。)
    丁度メモリの容量みたいな数字ですね。
  2. 最大サイズでスライスレイヤー(Webレイヤー)作る
  3. レイヤーフォルダ分けながら、半分のサイズにしながら、そのサイズの中でセンタリングする。
    ※レイヤーの名前は、ズームレベルと合わせとくと、わかりやすいかも。

    • ズームレベル3
    • ズームレベル2
    • ズームレベル1
    • ズームレベル0
  4. スクリプトで、
    "tiles/"+zoom+"/"+x+"_"+y+".png"とかで画像を読み込ますので、それに合わせて、画像を書き出す。
  5. いちいちFireworksのWebレイヤーに名前を付けるのがめんどうな時は、
    • 一度、Webレイヤーに名前を付けたファイルからコピペする
    • もしくはFireworks-ファイル-書き出しのオプションを変更して、Webレイヤーを削除しながら書き出す
      • Fireworks-ファイル-書き出しのオプション
      • 設定例

画像の切り出しをやってくれるツールもあるみたいです。

実際にオリジナルのマップを作成する場合には、文字を入れたりもするでしょうから、縮尺によって文字サイズを変更したい場合も出るはずです。
ちなみに、Sampleもクレジット表記部分は、ズームレベルによって大きさを変えている

スクリプト

サンプル

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

Google Maps APIメモ(v2) #3 マーカーがクリックされたら情報ウインドウを表示する

まだまだ基本的なシリーズ
マーカーがクリックされたら情報ウインドウを表示する

サンプル

関連エントリー

Google Maps APIメモ(v2) #2 簡単コントローラーの追加

シリーズ第2弾

コントローラーの追加

地図へコントローラー追加

  • 地図へ小さいコントローラー追加
  • ダブルクリックでズーム
  • スクロールホイールでもズーム

サンプル

関連エントリー

Google Maps APIメモ(v2) #1 超基本

忘れまくってるのでメモ

超基本

head内にスクリプトを読み込む

map.jsの中身

bodyタグ

HTMLの中身

という空のdivを用意する。幅と高さは指定してやる。
サンプル

関連エントリー

そろそろみんなでGoogle AJAX Libraries API使いませんか?

そろそろみんなでGoogle AJAX Libraries API使いませんか?

AJAX Libraries API – Google Codeの存在は知ってたんだけど、
仕事で使った事は今まではなかったんだけど、そろそろ場面に応じて使ってもいいんじゃないかなって思った。
というのは、やっぱり最近のサイト制作する上でリソースが気になってます。
みんなで、Google AJAX Libraries API使えば、どこかのサイトで読み込んでキャッシュが効いて、リソースうま〜。
とかになるんじゃないかと。それもGoogle AJAX Libraries APIのメリットのひとつですよね。
特にWebサービスとかであれば、サーバーの負荷とかもかなり違ってくるのでは?とかも思いますし。
Ajax Librariesは、今のとこ下記みたいな内容

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

YUIも使えるようになったのがなんか新鮮な感じ。

ダウンロードされるファイルも労せず最小化されたものになるみたいですし

  • Google CDNを活用したファイルの配布
  • 対応していればGzip圧縮転送を有効にする
  • ダウンロードするファイルは可能なかぎり最小化されたものとなる
  • キャッシュが有効になるように工夫されており、一度どこかでダウンロードしてあればキャッシュが使えるため不要なダウンロードしなくなる
  • バージョン番号にワイルドカードが指定できるため自動的にマイナーアップデートを実施できる

Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナルより引用

実際の使い方

  • google.load()で読み込む
  • バージョンは、省略すると最新バージョンが読み込まれる
    1.2→1.2.xの最新バージョン
    1→1.x.xの最新バージョン
  • バージョン指定して直接読み込みも可能

れぶろぐ – [Google] AJAX Libraries API はバージョンをフル指定した方が高速に動作する
という記事もあるし、プラグインとかによっては、バージョンで動かなくなるモノも存在するだろうから、バージョン指定した方が良さそうですね。

Google ChromeとWebKit

Google Chromeと書いとくといいことあるかな?と思いまして。
インストールしてみたけどいいわ。これ。速い。シンプル。
Mac版は今のとこ、ない。
Google Chromeは、エンジンがWebKitらしいが、WebKitにもちゃんとWebインスペクタが存在する。

ナイトリービルドだから、毎日ダウンロードが楽しめるね。
というのを先日、大久保先生に教えてもらったw

サイトマップについてメモ

Googleサイトマップ

Googleサイトマップは、Webの中の人(謎)であれば常識なのかもしれませんが、
簡単に言えば、Googleのロボットにクロールしてください情報ですね。
ウェブマスター向けヘルプ センター
– 自分のサイトを Google 検索結果に含めるにはどうすればよいですか

Google ウェブマスター ツール

あ、このGoogleサービスを利用する場合には、当然アカウントが必要ですよ。

RORサイトマップ

これまたWebの中の人だったら知ってるのかもですが、RORサイトマップというのがあるらしいですよ。
RORでYahoo検索(YST)とLiveSearch(MSN)もカバーする先進サイトマップを作ろう
サイトマップのXMLファイル作ったら(ファイル名がror.xmlの場合)、メインのインデックスに、

と入れちゃえば、主要検索エンジンのロボットがクロールしてくれるそうな。

ありがたいツール XML Sitemaps

GoogleサイトマップもRORサイトマップも作ってくれるのが
Create your Google Sitemap Online – XML Sitemaps
Webの中の人は、これ使っとかなきゃでしょ。

うまいなぁGoogle

Googleのパーソナライズドホームが、iGoogleになった。
『ホームページを選択』で『ビーチ』を選択して気づいた。
現在地の指定できるのだ。「このテーマは現在地の時刻に合わせて、日の出や日没などを見ることができます。 」とある。
ここで当然、『日本』-『福岡』にした訳ですが、「あ、これでオレのアカウントと地域が結びついてるじゃん」ということに気づいたのです。
地域のセグメントができちゃう戦略の中の一環なんですね。
しかし、やり方がスマートでうまいなぁ。