More Related Content
More from Kentaro Matsui (16)
モバイル版Googleマップのちょっと進んだ使い方
- 6. モバイル版Googleマップのイロハ(1)
概要
ケータイでGoogleMapを表示するには
「Google Static Maps API」を利用する
出来ることは静止画の表示のみ
- ただし次の項目が設定可能 -
・表示する座標と拡大率の指定
・画像サイズ指定 (例:220ドット×300ドット)
・フォーマットの切替 (JPG, GIF, PNGを選択可能)
・マーカーの指定 (複数のマーカーを設置可能)
・ラインの指定 (色の指定、透明度の指定が可能、ラインは1本のみ)
- 7. モバイル版Googleマップのイロハ(2)
基本的な使い方
imgタグのsrcにパラメータを記載する
<img src=“[パラメータ]”>
http://maps.google.com/staticmap?
center=[中心の緯度],[中心の経度]
&zoom=[ズームレベル]
&size=[画像の横幅]x[画像の高さ]
&maptype=mobile
&key=[APIキー(GoogleMapと共通)]
- 8. モバイル版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)すること
- 9. モバイル版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は省略できる
- 13. もう少し凝った使い方(1)
マーカーやラインの切替
マーカーやラインを切り替えて動きをつける
例.「ご来場ルート」と「お帰りルート」を表示したい
リンクを押して
画像を切り替え
- 14. もう少し凝った使い方(2)
円の描画
ラインで円を描画する
例.四角いラインではなく円を表示したい
円の方程式を使って、頂点の座標を計算し、
それらをラインで繋ぐ。
頂点の数を多くすることで、一見滑らかな
円に見えるようになる。
- 15. もう少し凝った使い方(3)
アニメーションGIF化
ImageMagickでアニメーションGIF化する
ImageMagickまたはPECL::Imagickを利用
(PHP標準のGDでは作成できないようだ)
複数の画像をGoogle側から取得し、それをGIFアニメ化する。
例1. 道順をアニメーションで表示したい
→ ラインを細かく区切り、連続して描画
→ ラインを かく区切区切り 連続して
して描画
例2. 道順を点滅させたい
→ ラインの透明度を変化させる
→ ラインの透明度を変化させる
ただし、こんなデメリットも・・・
・生成処理に時間がかかる(要キャッシュ処理)
・画像のサイズが大きくなってしまう
- 16. もう少し凝った使い方(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); // ページを移動
?>
・住所から場所を特定するので多少の誤差が出てくる
・規約に違反していないのか、やや心配
- 17. もう少し凝った使い方(5)
地図を操作できるようにする
方法2.ユーザの操作に合わせパラメータを変え、
マップ画像を切り替える
・パラメータを、ユーザの操作に合わせて変更する
・zoomパラメータは「拡大」「縮小」リンクが押されたら
±1してやればよい。
・centerパラメータは次の式から計算(横220pxの場合)
移動距離 = 0.0008 * floatval(pow(2, 18 - $zoom));
※問題点
GoogleStaticMapsAPIは、1日当たり1000ユニーク画像
までしか、画像を生成させて貰えない。
→ 移動できる領域を制限してやる必要がある
→ 拡大・縮小だけでも十分かもしれない
- 18. まとめ
• モバイル版Googleマップは、静止画で地図の表
示を行う
・ PC版のようにぐりぐりと動かしたりはできない
・ ただしマーカーの設置やラインの表示は行える
• 見た目や使い勝手を改善するために、主に次
のような方法が考えられる
・ 地図画像を複数用意し、それらを切り替えて表示
・ アニメーションGIF化して表示
・ パラメータを動的変化させ、操作に合わせて地図を表示
(ただし、1日あたりの枚数制限に注意)