「Google Static Maps API」を使って携帯でGoogleマップを表示する(ライン表示編)

2008/5/13 火曜日 Posted in ソフト紹介 | No Comments »

以前ご紹介した、「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がバナー広告に対応 Read more..