「Google Static Maps API」を使って携帯でGoogleマップを表示する(ライン表示編)
    このエントリをはてなブックマークに登録

以前ご紹介した、「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]

 

関連:


 

最近の記事







コメントを書く