つながるnet

スマートフォン・携帯で地図コンテンツ(Google map)を表示(実装編)

Google mapをサイトに掲載したい場合、iframeなどのコードをGoogle mapで取得できる。
しかし、携帯サイトやスマートフォンに掲載すると、これではちょっと重いので、そのような場合はGoogle Staticd Maps APIを使うとよさそう、ということを以前の投稿で述べていました。

最近、実装する機会がありましたので・・・

<img src="http://maps.google.com/maps/api/staticmap?zoom=15&size=500x250&maptype=roadmap\
&markers=size:mid%7Ccolor:red%7C東京都墨田区押上1丁目1-2&sensor=false" width="500" />

クエリを解説すると

  • zoom=15 : 拡大率(?)
  • size=500×250 : 表示サイズ
  • maptype=roadmap\ :地図のタイプ(値は、roadmap、satellite、hybrid、terrain など)
  • markers=size:mid%7Ccolor:red%7C東京都墨田区押上1丁目1-2 : 指定した場所につけるマーカー
    • パイプ(%7C)でパラメータを設定することができます。
    • この例は、マーカーサイズ、マーカーの色、マーカーの位置
    • マーカーの位置は住所(もしくは緯度経度)で指定します。
  • sensor=false : ユーザーの位置情報を取得

これを表示すると

上記のとおり画像として掲載してくれます。簡単ですね。

詳細は本家を参照
https://developers.google.com/maps/documentation/staticmaps/?hl=ja#Mobile

直接メールしてみる

お名前 (必須)
メールアドレス (必須)
件名
ご相談内容
画像文字をご入力ください
captcha

コメントを残す