ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

以前ご紹介した、「Google Static Maps APIを使って携帯でGoogleマップを表示する」という記事の続編です。

今回は地図をただ表示するだけではなく、もう少し実践的な内容をお伝えしようと思います。

「Google Static Maps API」をご存じない方のために簡単に説明すると、PC向けのJavaScriptで表示するタイプのGoogleMapとは違い、画像で表示するタイプの地図になります。
静止画なので、グリグリ動かせたりはしませんが、ケータイからも利用することができます。

今回は地図の上に、順路を示すラインを引いてみることにします。

ラインは「path」パラメータを指定することで表示できます。

path=[色],[線の太さ]|[緯度1],[経度1]|[緯度2],[経度2]・・・

[色]の部分は「rgb:#ff0000」のように、よくあるRGB形式での色指定を書きます。
それに加え、「rgba:#ff000066」のように、「rgba:（aを追加）」と書くことで、透明度を指定することもできます。
上記の例だと色が「#ff0000（赤）」、透明度が「66」ということになります。

[線の太さ]は、「weight:5」のように引きたい線の幅をピクセルで指定すればOKです。

[緯度]・[経度]を「|（パイプ）」で続けて指定していくことで、それぞれがラインで繋がれていき、線を引いていくことができます。

具体例としては次のようになります。

<img src="http://maps.google.com/staticmap?
center=43.054794,141.375856
&zoom=17
&size=220x300
&maptype=mobile
&markers=43.055294,141.375356,reds%7C43.053894,141.376147,bluei
&path=rgba:0x0000ff66,weight:6|43.055294,141.375356|43.055243,141.37534|
43.055135,141.375171|43.054041,141.376389|43.053959,141.376249
&key=[APIキー(GoogleMapと共通)]"
 />

表示例：
 

ケータイ用のGoogleMapでは、拡大縮小が自由に行えないため、ズームレベルの違う2種類の画像を用意しておくと親切かもしれません。

なお、詳しいAPI仕様はこちらの公式リファレンス（英語）を参照してください。

→　Google Code　Google Static Maps API [google.com]

関連：

• 「Google Static Maps API」を使って携帯でGoogleマップを表示する
• Google、モバイル向けクローラーの情報公開へ
• 携帯向けGoogle AdSenseがバナー広告に対応