HOME ≫ 備忘帳 ≫

携帯で地図表示 Google Static Maps API

クライアント用に作っているPC向けサイトの地図表示に、Google Map APIを利用しています。 ページ内に埋め込んで表示でき、登録のみで料金が発生せず、クオリティも良いので重宝しています。
携帯版でも、同様に地図を埋め込み表示するのに、Google Static Maps API を利用しています。
http://code.google.com/intl/ja/more/#products-apis-staticmaps

<img>タグのhref属性に、パラメータつきURLを指定するだけで、Javascriptや動的な読み込みなしに、地図画像を取得できます。

まずは公式ドキュメントにリンク。
http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/

以下は上記ページを見ての個人的な備忘帳です。 間違いがないとも限りませんので、正式な情報は上記ページをご参照ください。

(2008/10/22追記) 気づいた所など、少し手をいれました。 久しぶりに公式ドキュメントを見たら、日本語版ができてましたね。 情報量は少なめですが、古いバージョンのものの和訳なんでしょうか？ このページの掲載内容のうち、公式に無いなと思う部分は、たぶん英語版にしか載ってない部分です。公式の英語版を覗いてみてください。

(2010/05/07追記) 日本語版／英語版のドキュメントを参考に、全体的に手を入れました。

Google Static Maps API の利用について

以下、公式の日本語版より引用

Google Static Maps API の使用でも、ビューアごとに要求できる (異なる) 画像は 1 日あたり 1,000 枚を上限としています。この制限は「キー」ごとではなく、「ビューア」ごとの割り当て数ですので、大半のデベロッパーはそれ ぞれの割り当て数を超える心配はありません。また、同じ画像を要求する場合、通常この制限数にカウントされるのは最初の要求だけです。

概要

パラメータ指定

Static Maps API のURLはこんな風に指定。

http://maps.google.com/staticmap?(パラメータリスト)

パラメータリストは「&」区切り。 （普通のHTTPリクエストどおり）

位置指定パラメータ

center (マーカー指定が無い場合は必須)

地図の中心位置。
カンマ区切りで緯度と経度を指定。たとえばcenter=40.714728,-73.998672とか。精度は小数点6桁まで。
2010/05/07現在、英語だと住所をそのままテキストで指定することもできるようです。日本の地名でも、英語表記で指定すれば大丈夫。ですけど、実用としてはちょっと。

zoom (マーカー指定が無い場合は必須)

地図の縮尺。
0がもっとも広い（縮小した）地図で、数字が大きくなるほど狭い（拡大した）地図に。最大は19まで、ただし地域によってはデータが無いことも。

地図パラメータ

size (必須)

地図画像のサイズ。
幅x高さでピクセル指定。たとえばsize=240x200とか。幅100px以下の画像をリクエストしたときは、Googleロゴは自動的に小さくなる。

(2008/10/22)日本語ドキュメントでは、512x512が最大サイズ、と書かれているのですが、英語ドキュメントでは640x640になっています。

format (オプション)

画像形式。
指定できる値は「gif」「jpg」「png32(＝32ビットPNG)」「jpg-baseline(＝ノンプログレッシブのJPEG)」「png8(＝8ビットPNG)」の5種類。デフォルトはgif。

maptype (オプション)

作成されるマップのタイプ。
指定できる値は以下のの5種類。デフォルトはroadmap。

roadmap 通常の地図
mobile 高解像度で小さい画面に表示するのに適した画像
satellite 衛星写真の画像
terrain 地形と植生が分かる地形図
hiblid 衛星写真＋通常の地図
mobile (オプション)
モバイル機器で表示するかどうか。
trueまたはfalseを指定。モバイル表示に適した画像が使われます。
markers (オプション)

地図にマーカーを表示。
マーカーは複数表示も可(50個まで)。markersを指定するなら、centerとzoomを省略することもできる。指定方法の詳細は後述。

path (オプション)

地図の上にパスを描く。
pathを指定するなら、cetnerとzoomは省略することもできる。指定方法の詳細は...今回は割愛。パスの各点の座標とパスの透明度とかを指定する模様。

span (オプション)

地図に含めたい範囲を、center位置からの緯度経度数で指定。
たとえば、0.01,0.01。縮尺は、指定された範囲がsize内に入るよう、自動調整される。zoomが指定されている場合、spanは無効。

hl (オプション)

地図に表示されるラベル文字の言語。
これは一部の国の地図にしかサポートされていない。

key (必須)

公開するドメインで取得したMaps API Keyを指定。

sensor (必須)

地図表示時にGPSなどによる位置情報を取得しているかどうか。
trueまたはfalseを指定。

マーカーについて

ひとつのマーカーはカンマ区切りの3つの値で指定。

緯度,経度,表示設定(サイズ・色・ラベル）

緯度経度は必須で、精度はそれぞれ小数点6桁まで。マーカーの指定する位置が、地図の表示範囲外だった場合は、そのマーカーは表示されない。

表示設定はオプション。{size}{color}{alphanumeric-character}の順番で、区切り文字を挟まずに続けて指定。

複数のマーカーは「|」（URLエンコードすると「%7C」）で区切る。

マーカーの表示設定（すべてオプション）

{size}

マーカーのサイズ。
指定できる値は、小さい順に「tiny」「small」「mid」のいずれか。size指定が無い場合は、nomalサイズ(midより大きい)。

{color}

マーカーの色。
「black」「brown」「green」「purple」「yellow」「blue」「gray」「orange」「red」「white」のいずれか。

{alphanumeric-character}

マーカーのラベル。
1文字の英数字(小文字)を指定。size指定なしかmidの場合に有効。tinyとsmallの時は表示できない。

実例

表示するタグは以下の通り。 実際は改行なしです。

<img src="http://maps.google.com/staticmap?key=(API KEY)
 　        &center=34.666358,133.918576
          &size=600x300
          &zoom=14
          &markers=34.666587,133.914815,yellowm|34.665158,133.929900,smallred">

example

マーカーを指定していれば、MAPの中心と縮尺は省略可能。

<imc src="http://maps.google.com/staticmap?key=(API KEY)
  　　　　　　　&size=600x300
　　　　　　　  &markers=34.666587,133.914815,yellowm|34.665158,133.929900,smallred">

example

マーカーがちょうど良く見えるよう、中心座標と縮尺が自動設定される。

たとえば、携帯でママカリの案内地図を表示するなら、こんな感じになるんでしょうかね。

<imc src="http://maps.google.com/staticmap?key=(API KEY)
　　　　　　　  &size=240x200
　　　　　　　  &zoom=15
　　　　　　　  &markers=34.666587,133.914815
　　　　　　　  &format=jpg
　　　　　　　  &maptype=mobile">

example

最終更新日：2010/01/28

[ ページ先頭へ ]