Google マップが携帯でも表示できるようになりました
次の図は、皆さんもよくご存知のマーカー付の Google マップですが、少し雰囲気が違うと思いませんか。このマップ、実は Google Static Maps API を使って作成したものです。
Google マップをウェブページに埋め込む方法として、Google マップ API がありますが、Google Static Maps API が、この Google マップ API と大きく異なる点は、JavaScript を使用せずに、Google マップをカスタマイズすることができるという点です。
JavaScript のコーディングが不要なので、その分、マップの表示スピードの向上を図ることができます。
また、マップそのものは、イメージとして生成されるので、携帯電話でも表示できますし、そのまま添付ファイルとして電子メールで送信することも可能です。
先 のマップの場合、次に示すようにたった一行の <img> タグで定義できるのです(注意: [Your API key] パラメータには、Google マップ のAPI キーが必要となります。詳しくはこちら をご覧ください)
<img src="http://maps.google.com/staticmap
?center=35.65641,139.699477
&markers=35.65660,139.699477,red
&zoom=16
&size=500x300
&key=[ここに Key を記述]">
こ の <img> タグで定義された URL がStatic Maps サービスに送信されると、 URL で与えられたパラメータにしたがって動的にイメージが生成されます。たとえば、上の定義ですと、グーグルのオフィスがある渋谷にマーカーを表示した、 500×300 ピクセルのマップが生成されます。
もう少し詳しく定義内容を見てみましょう。 基本構文は、
http: //maps.google.com/staticmap?parameters
です。この parameters の部分に位置情報やマップのサイズ、マーカー情報などを指定します。使用できるパラメータには次のものがあります。
・center(必須):マップの中央の座標を緯度と経度で指定します(例:center=35.65641,139.699477)
・zoom(必須):ズームレベルを0~19の間で指定します(例:zoom=13)
・size(必須):表示するマップのサイズを幅×高さで指定します。なお、指定できる地図の最大の大きさは512x512です
・maptype(オプション):マップの表示タイプを指定します。値はroadmapとmobileの2種類で、roadmapは標準のマップ表示、mobileは携帯用に見やすくした表示となります。roadmapがデフォルトとなります。
・markers(オプション):マーカーをマップ上に配置します。マーカーを指定した場合、centerやzoomは指定しなくても構いません。指定で きる内容は、マーカーの緯度・経度、マーカーの色(red,blue,green)、マーカーの文字(a-z)を指定できます。また、複数のマーカーを指 定するときは、|(パイプ、%7C )で区切ります。
・key(必須):Google Maps API キーを指定します。
すぐに試してみたい方は、Static Maps Wizard という簡易ツールが提供されています。API キーのない方でも、表示したい住所を入力して、出来上がりイメージの大きさを指定すれば、上記のような URL を作成してくれます。あとは、<img> タグを使って、URL をウェブページに埋め込むだけです。
従来の Google Maps API と違い、Javascript を必要としませんので、携帯電話向けの Web ページなどに貼り付けることが可能になっていることも大きな特長です。
Google Static Maps API のさらに詳しい情報は以下をご覧ください。
・Google Static Maps API
・Google Maps Without the Scripting