HTML・CSSテックラボ

『Google Static Maps API』

モバイル用の地図が欲しいと思い、『Google Static Maps API』を利用しました。
『Google Static Maps API』は、Google Maps APIの静止画像版のようなもので、JavaScriptを使わずに指定された地点の静止画像を表示します。そのため、通常のGoogle Mapsのようにダイナミックに移動したりズームしたりはできませんが、普通の画像として出力されるため携帯電話でも使うことができます。もちろん、添付ファイルとして送付することもできるので、いろいろ利用できそうですね。

利用方法はすごく簡単で、下記のようにIMG要素のSRC属性にhttp://maps.google.com/staticmapを指定し、そのURLにパラメータを追加するだけです。

<img src="http://maps.google.com/staticmap?center=35.645875,139.694416&markers=35.645875,139.694416,red&zoom=16&size=220x200&key=ABQIAAAANWHyAeNi2NcPYEcnv-ElSxQA_I0BqD9IUoV8i73yjf1GEj4aHxSBXtjd7Da6ExpT5zPy__2Cdl3rTQ">

  • center(必須):マップ中央の座標を緯度と経度で指定します(例:center=35.645875,139.694416)。
  • zoom(必須):ズームレベルを0~19の間で指定します(例:zoom=16)。
  • size(必須):表示するマップのサイズを幅×高さで指定します。指定可能な最大のサイズは512x512です。
  • maptype:マップの表示タイプを指定します。値はroadmapとmobileの2種類で、roadmapは標準のマップ表示、mobileは携帯用に見やすくした表示です。roadmapがデフォルトです。
  • markers:マーカーをマップ上に配置します。マーカーを指定した場合、centerやzoomは省略可能です。指定できる内容は、マーカーの緯度・経度、マーカーの色(red,blue,green)、マーカーの文字(a-z)を指定できます。値を|(パイプ、%7C )で区切ることで、複数のマーカーを指定できます。
  • key(必須):Google Maps API キーを指定します。
参考

http://code.google.com/apis/maps/documentation/staticmaps/

関連記事