Google Static Maps APIで地図を表示

Google Mapsは日頃から重宝しています。
お出かけの前にストリートビューと併せて使用すれば、道に迷うこともなし。
(それでも道に迷うのはきっと・・・私が方向音痴だからか!!)

さて、Google MapsといえばJavascriptでゴリゴリ動いてくれます。
しかし、JSを使用するが為、携帯電話では使えません。ん?先日発表されたDoCoMoの最新機種ならいけるのかも。

そこで、Google static maps APIの登場です。

APIの詳細については、すべてリンク先に書いてあるので割愛して、早速試してみます。

今回は、吉祥寺駅を中心にして作業を行います。
吉祥寺駅の緯度、経度は「35.702811, 139.579804」になります。

それでは1つずつ確認しながら作ります。
基本のURLは以下の通り。

http://maps.google.com/staticmap?

1.中央(center)の設定
centerに、地図の中央となる緯度経度を記述します。
前述の通り吉祥寺駅の緯度経度は「35.702811, 139.579804」なので、カンマ区切りでそのまま記述。

http://maps.google.com/staticmap?center=35.702811,139.579804

2.ズームレベル(zoom)の設定
zoomを使って、地図の拡大率を設定します。zoom=0の場合には地球全体が表示されます。
まずは適当に15で設定chrome://scribefire/content/scribefire.xul

http://maps.google.com/staticmap?center=35.702811,139.579804
&zoom=15

3.地図寸法(size)の設定
地図の大きさを設定します。
大きさは「横幅×縦」の順で記述。今回は適当に400×400で。

http://maps.google.com/staticmap?center=35.702811,139.579804
&zoom=15
&size=400x400

4.画像のフォーマット(format)[省略可]
出力する画像ファイルの種類を選択します。
デフォルトではgifが選択されます。gifで問題ないので省略します。

5.マップタイプの設定(maptype)

  • roadmap(通常出力)
  • mobile(携帯電話向け出力)
  • satellite(航空写真)
  • terrain (地図や植生)
  • hybrid(航空写真と通常出力)

今回は、roadmapを選択。

http://maps.google.com/staticmap?center=35.702811, 139.579804
&zoom=15&size=400x400
&maptype=roadmap

6.マーカー(markers)の定義
目印の設定です。まずは中心となる吉祥寺駅(「35.702811, 139.579804」)。

http://maps.google.com/staticmap?center=35.702811, 139.579804
&zoom=15
&size=400x400
&maptype=roadmap
&markers=35.702811,139.579804

7.API key
Google MapsのAPI KEYを記述。

http://maps.google.com/staticmap?center=35.702811, 139.579804
&zoom=15
&size=400x400
&maptype=roadmap
&markers=35.702811,139.579804
&key=API_KEY

8.位置情報取得の有無(sensor)
地図を表示するだけならfalseを設定。

http://maps.google.com/staticmap?center=35.702811,139.579804
&zoom=15
&size=400x400
&maptype=roadmap
&markers=35.702811,139.579804
&key=API_KEY
&sensor=false

他にも省略可能なパラメーターがありますが、割愛。
実際に貼りつけるURLは以下の内容になります。

<img src="http://maps.google.com/staticmap?center=35.702811,139.579804&zoom=15&size=400x400&maptype=roadmap&markers=35.702811,139.579804&key=API_KEY&sensor=false" />

google static maps,吉祥寺

無事表示。
続いて、実際に使いそうなパターンを想定してイジッてみます。

  1. 地図をもう少し拡大
  2. 吉祥寺駅以外にもマーカー
    →ヨドバシ吉祥寺(「35.704704,139.581618」)

<img src="http://maps.google.com/staticmap?center=35.702811,139.579804&zoom=16&size=400x400&maptype=roadmap&markers=35.702811,139.579804|35.704704,139.581618&key=API_KEY&sensor=false" />

無事に目的は達成。

尚、マーカーについては、複数指定する場合、「|」で区切ります。またオプションとして「緯度,経度,色」とすることで、マーカーの色を設定できます。2つ目の地図では、吉祥寺駅を赤、ヨドバシを青としています。

とりあえず、現状ではこんなところです。
これでMobile対応のmapもAPI対応できますね。

P.S.決して!決して!!複数のエントリに分けて書けばよかったなんて思ってないよ!!思ってないよ!!!!

コメントを残す

メールアドレスが公開されることはありません。