11/15/2011

Google マップ画像をブログに埋め込む方法

どうやれば Google マップの地図画像をブログに埋め込めるのかな?と思って調べてみたら、結構簡単だった。先走って Maps API キーってのを取得しちゃったんだけど、商用とかじゃなくて、地図画像をブログに貼るだけなら、もはやいらないらしい。
注: Google Static Maps API は、Maps API キーがなくても使用できるようになりました。
画像取得のための API に関するドキュメントはStatic Maps API V2 デベロッパー ガイド。これを読むと、表示したい場所を緯度経度か住所で指定するらしい。日本語で住所を指定しようとするとちょいめんどくさそうな気がしたから、僕は緯度経度で指定することにした。

目的の場所の緯度経度を取得する方法はどうすればいいのかな?いろいろあるかもだけど、僕がやった方法は次の3ステップ。

[1] 目的の場所、ここでは東京タワーを Google マップ で表示。


[2] 目的の場所(東京タワー)を指しているマーカーを右クリックして「この場所について」を選択。このときのポイントは、なるべく地図を拡大してから右クリックすること。そうじゃないと、目的の場所からちょっとずれた緯度経度がとれちゃうかもしれない。



 [3] Google マップの検索窓に緯度経度が表示される。

以上で、東京タワーの緯度経度が取得できた。あとはStatic Maps API V2 デベロッパー ガイドに従ってやりたいことをすればおk!たとえば、上の例で取得した東京タワーの場所に「T」の文字がついたマーカーを置いて、400x400の画像(32ビットPNG)が欲しければ
http://maps.google.com/maps/api/staticmap?markers=color:blue|label:T|35.658565,139.745471&zoom=16&size=400x400&format=png32&maptype=roadmap&sensor=false
というURLを作ればいい。 マーカーは複数置けるし、拡大・縮小は zoom のパラメータで調整。sensor はユーザの位置を GPS とかのセンサーで取得するかどうかを指定する。ブログに何かの地図を貼り付けるだけなら sensor=false でいいと思う。下の画像は maptype を roadmap じゃなくて satellite にしたバージョン。




よし、これで、東京タワーに「T」のマーカーを置いた衛星画像(地図)がゲットできた!

あとはブログの画像埋め込み機能を使って、画像のソースのところにさっき作った URL を貼ってあげれば、ブログに地図を埋め込むことができるぅー。

0 件のコメント:

コメントを投稿