モバイル版Googleマップのちょっと進んだ使い方

18,716 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
18,716
On SlideShare
0
From Embeds
0
Number of Embeds
536
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

モバイル版Googleマップのちょっと進んだ使い方

  1. 1. モバイル版GoogleMapの ちょっと進んだ使い方 ke-tai.org 松井 健太郎 Ver 1.01
  2. 2. 自己紹介 名前: 松井健太郎 出身: 北海道北広島市(札幌の隣町) 職業: PHPプログラマ、Linuxサーバ管理者 ケータイ開発者向けの情報サイトを 運営しています。 http://ke-tai.org/ 札幌で小さな会社を営んでいます。 株式会社インフィニットループ http://www.infiniteloop.co.jp/
  3. 3. 本日の内容 • モバイル版のGoogleマップのイロハ   ・ GoogleStaticMapsAPIの概要と基本的な使い方   ・ マーカーの設置、ラインの描画 • もう少し凝った使い方   ・ 複数のマーカーやラインを切り替えてみよう   ・ 様々なラインを引いてみよう   ・ 地図を操作できるようにしてみよう • 質疑応答
  4. 4. モバイル版Googleマップのイロハ(1) 概要 ケータイでGoogleMapを表示するには 「Google Static Maps API」を利用する 出来ることは静止画の表示のみ - ただし次の項目が設定可能 - ・表示する座標と拡大率の指定 ・画像サイズ指定 (例:220ドット×300ドット) ・フォーマットの切替 (JPG, GIF, PNGを選択可能) ・マーカーの指定 (複数のマーカーを設置可能) ・ラインの指定 (色の指定、透明度の指定が可能、ラインは1本のみ)
  5. 5. モバイル版Googleマップのイロハ(2) 基本的な使い方 imgタグのsrcにパラメータを記載する <img src=“[パラメータ]”> http://maps.google.com/staticmap? center=[中心の緯度],[中心の経度] &zoom=[ズームレベル] &size=[画像の横幅]x[画像の高さ] &maptype=mobile &key=[APIキー(GoogleMapと共通)]
  6. 6. モバイル版Googleマップのイロハ(3) マーカーの設置 指定した座標にマーカーを設置する markers=[緯度],[経度],[サイズ][色][文字] 例1: & markers=43.055294,141.375356,smallred パイプ「|」で区切ることで複数マーカーの 設置も可能 例2: &markers=43.055294,141.375356,smallred|| 43.053894,141.376147,bluei 注1:サイズがtiny, smallの場合は文字を指定できない 注2:マーカーが複数の場合はcenterやzoomを省略できる 注3:パイプは必要に応じてURLエンコード(%7C)すること
  7. 7. モバイル版Googleマップのイロハ(4) ラインを引く 複数の座標を結ぶラインを描く path=[色],[線の太さ]|[緯度1],[経度1]|[緯度2],[経度2]・・・ パイプ「|」で区切って座標を指定していく ・透明度指定なしの場合 rgb:0x0000ff,weight:6|43.055294,141.375356 |43.055243,141.37534|43.055135,141.375171 |43.054041,141.376389|43.053959,141.376249 ・透明度指定ありの場合 rgba:0x0000ff66,weight:6|43.055294,141.375356 |43.055243,141.37534|43.055135,141.375171 |43.054041,141.376389|43.053959,141.376249 注:ラインがある場合はcenterやzoomは省略できる
  8. 8. まあ便利なんだけど・・・
  9. 9. まあ便利なんだけど・・・ 地味 (´・ω・`)
  10. 10. ・・・ということで、 もう少しがんばってみた (`・ω・´)
  11. 11. もう少し凝った使い方(1) マーカーやラインの切替 マーカーやラインを切り替えて動きをつける 例.「ご来場ルート」と「お帰りルート」を表示したい リンクを押して 画像を切り替え
  12. 12. もう少し凝った使い方(2) 円の描画 ラインで円を描画する 例.四角いラインではなく円を表示したい 円の方程式を使って、頂点の座標を計算し、 それらをラインで繋ぐ。 頂点の数を多くすることで、一見滑らかな 円に見えるようになる。
  13. 13. もう少し凝った使い方(3) アニメーションGIF化 ImageMagickでアニメーションGIF化する ImageMagickまたはPECL::Imagickを利用 (PHP標準のGDでは作成できないようだ) 複数の画像をGoogle側から取得し、それをGIFアニメ化する。 例1. 道順をアニメーションで表示したい  → ラインを細かく区切り、連続して描画 → ラインを かく区切区切り 連続して して描画 例2. 道順を点滅させたい  → ラインの透明度を変化させる → ラインの透明度を変化させる ただし、こんなデメリットも・・・ ・生成処理に時間がかかる(要キャッシュ処理) ・画像のサイズが大きくなってしまう
  14. 14. もう少し凝った使い方(4) 地図を操作できるようにする PC版のようにぐりぐりと動かしたい 方法1.住所を指定してGoogleに飛ばしてしまう <?php $address = '東京都港区東麻布3-3-1'; $url = 'http://www.google.co.jp/m/lcb'; $query = '?mp=1&source=m&id=%s&ie=Shift_JIS&action=setloc&loc=%s'; $id = md5(time() . microtime()); // IDを生成 $location = $url . sprintf($query, $id, urlencode($address)); header('Location: ' . $location); // ページを移動 ?> ・住所から場所を特定するので多少の誤差が出てくる ・規約に違反していないのか、やや心配
  15. 15. もう少し凝った使い方(5) 地図を操作できるようにする 方法2.ユーザの操作に合わせパラメータを変え、     マップ画像を切り替える ・パラメータを、ユーザの操作に合わせて変更する ・zoomパラメータは「拡大」「縮小」リンクが押されたら  ±1してやればよい。 ・centerパラメータは次の式から計算(横220pxの場合)  移動距離 = 0.0008 * floatval(pow(2, 18 - $zoom)); ※問題点 GoogleStaticMapsAPIは、1日当たり1000ユニーク画像 までしか、画像を生成させて貰えない。  → 移動できる領域を制限してやる必要がある  → 拡大・縮小だけでも十分かもしれない
  16. 16. まとめ • モバイル版Googleマップは、静止画で地図の表 示を行う   ・ PC版のようにぐりぐりと動かしたりはできない   ・ ただしマーカーの設置やラインの表示は行える • 見た目や使い勝手を改善するために、主に次 のような方法が考えられる   ・ 地図画像を複数用意し、それらを切り替えて表示   ・ アニメーションGIF化して表示   ・ パラメータを動的変化させ、操作に合わせて地図を表示    (ただし、1日あたりの枚数制限に注意)
  17. 17. ご清聴ありがとうございました。

×