なんかへんてこなタイトルだけど、要するに「住所投げて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マップやっぱり便利ですわ。
[tmkm-amazon]4048684183[/tmkm-amazon]
