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

モバイル版GoogleMapのちょっと進んだ使い方 ke-tai.org 松井健太郎 Ver 1.01

自己紹介名前：　松井健太郎出身：　北海道北広島市（札幌の隣町）職業：　PHPプログラマ、Linuxサーバ管理者ケータイ開発者向けの情報サイトを運営しています。 http://ke-tai.org/ 札幌で小さな会社を営んでいます。株式会社インフィニットループ http://www.infiniteloop.co.jp/

本日の内容 • モバイル版のGoogleマップのイロハ　　・ GoogleStaticMapsAPIの概要と基本的な使い方　　・マーカーの設置、ラインの描画 • もう少し凝った使い方　　・複数のマーカーやラインを切り替えてみよう　　・様々なラインを引いてみよう　　・地図を操作できるようにしてみよう • 質疑応答

モバイル版Googleマップのイロハ(1) 概要ケータイでGoogleMapを表示するには「Google Static Maps API」を利用する出来ることは静止画の表示のみ - ただし次の項目が設定可能 - ・表示する座標と拡大率の指定・画像サイズ指定 (例：220ドット×300ドット) ・フォーマットの切替 (JPG, GIF, PNGを選択可能) ・マーカーの指定 (複数のマーカーを設置可能) ・ラインの指定 (色の指定、透明度の指定が可能、ラインは1本のみ)

モバイル版Googleマップのイロハ(2) 基本的な使い方 imgタグのsrcにパラメータを記載する <img src=“[パラメータ]”> http://maps.google.com/staticmap? center=[中心の緯度],[中心の経度] &zoom=[ズームレベル] &size=[画像の横幅]x[画像の高さ] &maptype=mobile &key=[APIキー(GoogleMapと共通)]

モバイル版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)すること

モバイル版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は省略できる

まあ便利なんだけど・・・

まあ便利なんだけど・・・地味 (´･ω･｀)

・・・ということで、もう少しがんばってみた (｀・ω・´)

もう少し凝った使い方(1) マーカーやラインの切替マーカーやラインを切り替えて動きをつける例．「ご来場ルート」と「お帰りルート」を表示したいリンクを押して画像を切り替え

もう少し凝った使い方(2) 円の描画ラインで円を描画する例．四角いラインではなく円を表示したい円の方程式を使って、頂点の座標を計算し、それらをラインで繋ぐ。頂点の数を多くすることで、一見滑らかな円に見えるようになる。

もう少し凝った使い方(3) アニメーションGIF化 ImageMagickでアニメーションGIF化する ImageMagickまたはPECL::Imagickを利用 (PHP標準のGDでは作成できないようだ) 複数の画像をGoogle側から取得し、それをGIFアニメ化する。例1. 道順をアニメーションで表示したい　→　ラインを細かく区切り、連続して描画 → ラインをかく区切区切り連続してして描画例2. 道順を点滅させたい　→　ラインの透明度を変化させる → ラインの透明度を変化させるただし、こんなデメリットも・・・・生成処理に時間がかかる（要キャッシュ処理）・画像のサイズが大きくなってしまう

もう少し凝った使い方(4) 地図を操作できるようにする PC版のようにぐりぐりと動かしたい方法１．住所を指定して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); // ページを移動 ?> ・住所から場所を特定するので多少の誤差が出てくる・規約に違反していないのか、やや心配

もう少し凝った使い方(5) 地図を操作できるようにする方法２．ユーザの操作に合わせパラメータを変え、　　　　マップ画像を切り替える・パラメータを、ユーザの操作に合わせて変更する・zoomパラメータは「拡大」「縮小」リンクが押されたら　±1してやればよい。・centerパラメータは次の式から計算(横220pxの場合) 　移動距離 = 0.0008 * floatval(pow(2, 18 - $zoom)); ※問題点 GoogleStaticMapsAPIは、1日当たり1000ユニーク画像までしか、画像を生成させて貰えない。　→　移動できる領域を制限してやる必要がある　→　拡大・縮小だけでも十分かもしれない

まとめ • モバイル版Googleマップは、静止画で地図の表示を行う　　・ PC版のようにぐりぐりと動かしたりはできない　　・ただしマーカーの設置やラインの表示は行える • 見た目や使い勝手を改善するために、主に次のような方法が考えられる　　・地図画像を複数用意し、それらを切り替えて表示　　・アニメーションGIF化して表示　　・パラメータを動的変化させ、操作に合わせて地図を表示　　　（ただし、1日あたりの枚数制限に注意）

ご清聴ありがとうございました。

http://ke-tai.org	1124
http://www.slideshare.net	71
http://okyuu.com	11
http://209.85.171.104	2
http://jp.hanrss.com	1
http://drupal.kichiweb.net	1
http://webcache.googleusercontent.com	1

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

by Kentaro Matsui on May 26, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 1,211

Statistics

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