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

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

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

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は省略できる

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

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

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

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

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

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

16. もう少し凝った使い方(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); // ページを移動
?>
・住所から場所を特定するので多少の誤差が出てくる
・規約に違反していないのか、やや心配

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

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

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