お手軽にGoogle Mapsの地図を張り付ける方法（携帯電話でも表示できる）

今回はWordPressに限った話ではないが、地図をウェブサイト上に表示する一つの方法についてである。企業サイト・商用ホームページを作成していると、会社やお店の位置を表す地図を載せたい場面というのは結構あるはずだ。地図を載せる方法としては、イラストレーターなどで独自に描いた地図、Google Maps APIやYahoo Maps APIなどのAPIを利用した地図が一般的だろう。ここで紹介するのは、Google Mapsの地図を使った方法だが、APIを一切使わずに、<img>タグだけで自由に地図を張り付けることができる方法だ。

まずは次の地図を見てほしい。これは見慣れたGoogle Mapsだが、<img>タグで読み込んでおり、JavaScriptを一切使用していない。そのため、携帯電話でもGoogle Mapsの地図を表示できる。また静的に読み込むため、各種APIを使用してJavaScriptを使うよりも、表示されるまでの時間がかなり短いはずだ。

これは、Google Static Maps APIを使用して実現している。この<img>タグのコードを見てみよう。たった1行のコードでGoogle Mapsをサイト上に表示できてしまうのだ。静的に読み込んでいるので通常のGoogle Mapsのようにぐりぐり動かすことはできないので注意してほしい。

<img src="http://maps.google.com/staticmap?center=35.658517,139.701334&markers=35.658517,139.701334,redc&zoom=16&size=512x300&key=ABQIAAAAT--ITJplvWF-DcJffBzSbRSfMB8pWqvvd1FJvhYen9GdTdnNKxTEhHNPV0XPH4pg0Hidf6yKctNiLA" width="512" height="300" class="imageframe" alt="Google Static Mapsサンプル" />

さて、ここからどのようにしてこのGoogle Static Maps APIを使うか簡単に見てみよう。まずはじめに、Google Static Maps APIを利用するためには、Google Maps API Keyが必要になるので取得してほしい。サイトのURLを入力するだけで無料で取得できる。

パラメータ
http://maps.google.com/staticmap?parameters
parametersの部分に位置情報やサイズ、マーカー情報を指定することになる。パラメータは&でつなぐ。使用できるパラメータは以下のとおり。

center

必須。中央の座標。緯度・経度を指定する。,（カンマ）で区切る。例：center=35.658517,139.701334

zoom

必須。ズームレベルを指定する。値は0～19の間。例：zoom=16

size

必須。地図のサイズを指定する。値はwidthxheightで、指定できる地図の最大の大きさは512×512である。例：size=512×300

maptype

オプション。地図の表示タイプを指定できる。値はroadmapとmobileの2種で、roadmapがデフォルト。roadmapは通常の地図で、mobileは携帯用に見やすくしたもの。例：maptype=roadmap

markers

オプション。マーカーを地図上に配置する。マーカーを指定すると、centerやzoomは指定しなくてもよい。緯度・経度・マーカーの色（red,blue,green）・マーカーの文字（a-z）を指定できる。複数のマーカーを指定するときは、|（パイプ、%7C ）で区切る。例：markers=35.658517,139.701334,redc

key

必須。Google Maps API Keyで取得したキーを指定する。

座標の指定方法
このGoogle Static Maps APIで一番面倒なのが、緯度経度の座標を指定するところだろう。緯度経度の座標はGoogle マップやGeocoding.jpで見つけることができる。

Google マップの場合、Google マップで表示させたい地図の位置に中心座標を動かし、地図の右上にある、「このページのリンク」をクリックするとiframeでの埋め込み用のタグが出てくる。このタグの中に「ll=35.658517,139.701334」と指定してあるところがあるのでこの数字をそのままcenter、もしくはmarkersに張り付ける。Geocoding.jpでは住所を入力して地図を表示し、ポップアップの吹き出しに表示されている座標をコピペするといいだろう。

マーカーを表示する。
マーカーを地図上に表示するにはcenterと同様、緯度、経度を指定する。加えて、マーカーの色や文字を指定できる。下の地図はマーカーをとりあえずいっぱい並べてみたものだ。centerやzoomを指定しなければ、下のように複数マーカーを指定した場合、自動的に各マーカー間の中心座標に合わせて最適なサイズで地図を返してくれる。

制限事項
一日に読み込むことができるのは1000ユニーク画像という制限がある。Geocodingなどを使って動的に地図を読み込んだりすると、場合によってはこの制限に引っ掛かるのかもしれないが、一般的には問題ないと思う。

まとめ
さて、Google Static Maps APIを使用した、お手軽にGoogle Mapsの地図を張り付ける方法（携帯電話でも表示できる）を簡単にご紹介したが、Google Static Maps APIの詳しい説明は、マニュアルであるGoogle Static Maps API – Google Codeを参照してほしい。また、今回の内容は、Official Google Maps API Blogで知ったものだ。地図を作成する方法として、Static Map Wizardというものも紹介されている（IEでは動かないかも）。

静的にGoogle Mapsを使用できる利点は簡単に地図が作成できるということに加えて、JavaScriptが動かない環境、つまりは携帯電話でも表示できる点にあると思う。携帯電話で地図を表示しようと思うと、どうしても地図専用のサイトへのリンクを張るということが多かったと思うが、これで自分のサイト上に地図を載せることができるはずだ。

今回は特にWordPressに関係がない話だったが、WordPressでGoogle Maps APIを使用して地図を表示することができるプラグインもあるようだ。使用したことはないが、Lightweight Google Mapsなどのプラグインを使用すれば、ぐりぐり動かせる地図を簡単に作成することができるのではないだろうか。使用目的に応じて、地図を表示する手段を知っておくという意味で、今回のGoogle Static Maps APIは押さえておきたいところだ。

[追記] Google Static Maps APIの新機能が搭載されたので、Google Static Maps APIの機能が拡張（パスを表示可能に） で、拡張された機能をまとめてみたので参照してほしい。