Google Static Maps API
Google Mapsはかなり便利ですが、携帯電話向けのWebサイトでGoogle Mapsを使いたくてもJavaScriptが動かない理由から携帯サイトに地図を表示させる事が困難でしたが、新しくGoogle Static Maps APIの登場のおかげで携帯サイトでもGoogle Mapsが使えそうです。
今までのGoogle Maps APIとは何が違うのかと言うと、Google Maps APIはマウスでドラッグして自由に地図を動かせるのに対して、Google Static Maps APIは地図を一枚の画像として提供してくれます。
なので、携帯サイトで地図の画像を表示させると言う使い方などが出来そうです。
まずは使用するに当たりAPI Keyを取得する必要があります。下記のサイトでAPI Keyを取得です。
http://code.google.com/apis/maps/signup.html
API Keyを取得したらあとはGoogle Static Maps APIを使ってみるだけです。
<img src="http://maps.google.com/staticmap?center=35.680899,139.766479&zoom=14&size=240x240&maptype=mobile&markers=35.680899,139.766479,red&key=(API KEY)" />
IMGタグのSRCに[http://maps.google.com/staticmap]を指定して以降は画像のサイズや緯度、経度などのパラメータを渡してあげると出来上がります。
簡単にパラメータの説明です。
- center 画像の中央の緯度と経度をカンマで区切って指定
- zoom 地図のズームレベルを指定
- size 画像のサイズを (width)x(height) の形式で指定
- maptype roadmap もしくは mobileのいずれかを指定
(必須ではない。指定がない場合はroadmapになる) - markers マーカーの緯度と経度、マーカーの色をカンマで区切って指定
(緯度),(経度),red のように指定。
またredaのように指定すると赤いAのマーカーが作成される。
マーカーを複数指定する場合はパイプ( | )で区切って書いていく。 - key Google Maps APIのAPI Keyを指定
以上の内容を踏まえてマーカーを増やしたりしてみたいと思います。
<img src="http://maps.google.com/staticmap?center=35.680899,139.766479&zoom=14&size=400x300&maptype=mobile&markers=35.680899,139.766479,reda|35.67879,139.772551,blueb&key=(API KEY)" />
IMGタグで手軽にGoogle Mapsが扱えるなら携帯サイトなどに地図を載せたりといろいろと使いどころがあるのではないでしょうか。

(1 votes, average: 4.00 out of 5)