スタートページJavascript Google Map

Google Static Maps API V2の実例

Static Mapsは、自分のWebページにGoogleの地図上に独自のマーカーを表示するツールです。Javascriptなどは不要で、HTMLだけで作成できます。


地図の表示

地図表示の例を示します。Static Mapsは、静的な地図を表示するだけで、拡大・縮小や移動などの操作はできません。

HTMLでの記述

上図は、次のHTMLだけで作成しました。以下の各行(パラメタ)はすべて「必須」です。

<img src="http://maps.googleapis.com/maps/api/staticmap?  <!-- A --> 
&size=400x300                                       <!-- B-->
&markers=color:red|label:A|35.95154,139.71167       <!-- C -->
&markers=color:yellow|label:B|35.94417,139.72384
&markers=color:blue|label:C|35.949492,139.69305
&sensor=false                                       <!-- D -->
">

記述上の注意

各行の説明

上のコードを一般形式で記述します。

A:src="http://maps.googleapis.com/~"
一般に画像を指定するには、<img src="img/image.jpeg"のように記述しますが、それに相当するものです。GoogleのStatic Maps API V2のサイトに以下のパラメタを渡し、そこで画像になったもを送り返しています。
B:size=横幅x高さ
px単位で与えます。*ではなくxであることに注意。
APIキーを取得していない場合は、最大600x600までです。
C:markers=マーカー色|ラベル|座標
原則として、マーカーの個数だけ記述します。
  マーカー色 color:yellow (通常の色名は使える)
  ラベル   label:a (半角英数字1文字)
  座標    緯度,経度
座標は必須。マーカー色とラベルは省略可能です。省略したときは「arkers=35.95154,139.71167」のように記述します。省略したとき、マーカーは赤色、ラベルは●になります。
(座標ではなく「岩槻城址公園」のように地名や住所で与えることもできますが、Google Mapsがもっている地名と一致させる必要があり、座標のほうが確実です。)
D:sensor=false
GPSセンサーを用いて現在位置を取得している場合はtrue、そうでない場合はfalse。ここでは現在位置に無関係なのでfalseにしています。

主要なオプションパラメタ

Static Mapsは、多様なオプション機能をもっています。詳細は 「Static Maps API V2 デベロッパー ガイド」を参照してください。ここでは、いくつかの主要なオプションパラメタを掲げます。
それらのパラメタを追加するには、「&M/span>center=~」のように&でパラメタをつなぎ、適当な位置に挿入します。

  
center=地図中心位置の緯度,地図中心位置の経度
例:center=35.947855,139.71775
地図の中心位置を設定します。省略したときは、全マーカー座標の平均値がとられます(マーカーがないとき、1つのときはは必須です)。
zoom=地図のズーム
例:zoom=14
省略時は、全マーカーが表示される適当な値になります(マーカーがないとき、1つのときはは必須です)。
上図では14程度、画面サイズにもよりますが、日本全体なら、府県程度9、個別建物を識別するなら21程度が適しています。
maptype=マップタイプ
例:maptype=roadmap
省略時はroadmap(通常地図)になります。その他satellite(航空写真)、terrain(地形図)、hybrid(航空写真と道路地図)が指定できるはずなのですが、なぜかどれもroadmapになってしまいます。
format=画像形式
例:format=png
地図画像の画像形式を与えます。省略時はpngですが、jpgやgifなどを指定できます。
style=パラメタ
選択物」と、それらの選択物に適用される「ルール」のセットからなり、かなり凝った地図を作成できますが、かなり複雑(私の手におえない)なので省略します。