HTML:Googleマップを携帯サイトで表示する方法

携帯ガラケー)サイトでGoogleマップを表示した時の方法をメモします。

今まで携帯サイトで地図情報を表示する場合は、
地図画像を作成し表示するなどしていました。

Goolge Maps APIを使用すれば緯度・経度を指定し、
その他必要な情報を設定するだけでGoogleマップを出力してくれます。


Googleマップ画像 表示方法

下記のURLにアクセスすると、Googleマップ画像を出力してくれます。

http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false

表示したい情報(パラメーター情報)に書き換え、HTMLのimgタグで表示します。
HTMLに挿入するコードは以下のようになります。


<img src="http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false">

実際に出力したGoogleマップは下記のようになります。


パラメーターの説明

「center」
経度・緯度を指定します。

「zoom」
地図の拡大縮小サイズを指定します。

「markers」
マーカーの経度・緯度を指定します。
カラーやサイズなども指定可能です。

「size」
出力する画像サイズを指定します。

「sensor」
trueかfalseを指定します。
携帯サイトで表示する場合はfalseを指定します。


上記の方法でGoogleマップを携帯サイトで表示することができるので、
地図画像を作る必要がなくとても便利です。

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です