お手軽に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サンプル

これは、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を指定しなければ、下のように複数マーカーを指定した場合、自動的に各マーカー間の中心座標に合わせて最適なサイズで地図を返してくれる。

Google Static Mapsサンプル

制限事項
一日に読み込むことができるのは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の機能が拡張(パスを表示可能に) で、拡張された機能をまとめてみたので参照してほしい。

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

«
»

関連する投稿

Comments and Trackback are closed.

Trackbacks (12)

[Ruby][マッシュアップ][Rails]10秒で携帯地図 Google static mapsに対応…

mm@cyslabの携帯用地図をGoogle static maps APIに対応させました。 内容は以前の説明(↓)と同様。 GoogleMapsで指定した場所を携帯用の地図に変換+携帯用に短めのURLを生成します。 使っている…

googlemap を使った携帯地図サイトができました。…

しばらく書き込みをしませんでしたが、Google staticmap を使った携帯地図サイトができました。
主な機能は
 ・数字キーを利用した地図の移動と拡大、縮小
 ・携帯から位置情報を取…

[…] 企業サイトや商用ホームページの製作で、会社やお店の位置を表す地図を載せたいという要望が少なからずある。 地図を表示させる方法としては、Illstratorなどで描く場合が多いが、最近は、Google Maps APIやYahoo Maps APIなどのAPIを利用した地図が増えてきている。 ここで紹介するのは、Google マップを使った方法だが、APIを一切使わずに<img>タグだけで自由に地図を張り付けることができる。 とりあえず、地図を見てほしい。 たった1行足らずで、地図の表示ができてしまう。 携帯サイトだと、javascriptが使えず、また、PHPを使った表示も携帯の機種によってはうまく表示されないことがあった。 ▼参考サイト お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) […]

無料携帯地図の簡単作成ツール「モバ地図エム」の基本機能…

こんばんは! 中の人です。

今日は改めて「モバ地図エム」とは何か?
どんなことができるのか?特徴は?といったことを書いてみます。

本当は最初にこれを書くべきでしたね^^;。

[…] お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) […]

[…] http://wordpressgogo.com/customize/static_maps_api.html Author: admin Filed Under Category: Googlemap設置 Article Comments: « Seis Pesos: Google Maps API 2 作り方・サンプル一覧 […]

[…] to subscribe to the RSS feed for updates on this topic.Powered by WP Greet Box WordPress Plugin お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) | Wo… モバゲーのような携帯サイトを作るための12のTips […]

[…] いろいろ探していたら他にも、 カスタムフィールドに座標数字を入力して、Googleマップを画像として表示する方法もありました。 WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) | Wo…より […]

[…] いろいろ探していたら他にも、 カスタムフィールドに座標数字を入力して、Googleマップを画像として表示する方法もありました。 WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go様の お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) | Wo…より […]

gregory グレゴリー アールピーエ

陸上 トラック競技

お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go