携帯サイトにGoogleマップ画像を住所で表示させる方法

なんかへんてこなタイトルだけど、要するに「住所投げてGoogleマップ画像を入手して携帯サイトで使おう」というお話。

携帯サイトにGoogleマップを埋め込みたいケースが結構頻繁にある。
その都度調べてなかなか身にならないので、自分への備忘録を込めてメモ。

通常のWEBサイトならGoogleマップから、埋め込みタグをコピーしてきて簡単に埋め込むことが出来るが、この地図はiframeを使ってたりJavaScriptを使ってたりして、携帯サイトでは表示出来ない。
携帯サイトでは、静的な画像ファイル(jpgとか)でGoogleマップを表示しないといけない。

ということで、こういう場合は「Google Static Maps API」を使用し、静的なGoogleマップ画像を入手する。
使い方は、後でちょこっと説明するが、今回はちょっとしたツールを作ってみた。

住所入力でGoogleマップ画像を表示するツール

下記テキストボックスに正確な住所を入力して、ボタンをクリックするとGoogleマップ画像とその画像のURLが表示されます。
※JavaScriptが動作する環境のみ使用可

{{insert_meta googleMap}}


上のURLをimgタグで出力すれば画像が表示されます。

「Google Static Maps API」を使ってGoogleマップの画像を住所から表示させる方法

「Google Static Maps API」は、上で実際に出力されたURLを見てもらえばわかるが、クエリー文字列を投げるだけで、画像が返ってくる非常に便利なAPI。
ちょっと前までは「Maps API キー」というキーをわざわざ取得しないといけなかったけど、Version2になってキーがなくても使用できるようになった。
今回使ったURLを見てみる。

http://maps.google.com/maps/api/staticmap?
center=%E9%B9%BF%E5%85%90%E5%B3%B6%E5%B8%82%E4%B8%AD%E5%A4%AE%E7%94%BA1%E7%95%AA1%E5%8F%B7
&zoom=16
&size=400×300
&mobile=true
&markers=%E9%B9%BF%E5%85%90%E5%B3%B6%E5%B8%82%E4%B8%AD%E5%A4%AE%E7%94%BA1%E7%95%AA1%E5%8F%B7
&sensor=false

パラメータはcenter、zoom、size、mobile、markers、sensorの6種類。

center
(必須)中心の位置情報。本来は経度、緯度。URLエンコードした正確な住所でOK。
zoom
(必須)0~21で地図のズーム レベルが変えられる。
size
(必須)地図画像のサイズ。400×300の形で
mobile
携帯端末で表示するかどうか。true、false
markers
マーカーを定義。位置情報を渡す。色や個数も指定できる。デフォルトは赤。
sensor
(必須)位置情報を取得するのにセンサーを用いているかどうか

結構頻繁に使うので、そろそろ覚えないと。
まぁでもちょっとした対応だったら、上のツールですぐに出来るからね。

Googleマップやっぱり便利ですわ。

Google Maps APIプログラミング入門

著者/訳者:勝又 雅史

出版社:アスキー・メディアワークス( 2010-03-30 )

定価:

ペーパーバック ( 480 ページ )

ISBN-10 : 4048684183

ISBN-13 : 9784048684187


お宮参り着物の渡久

コメントを残す

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

ten + eight =