Google Static Maps

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

参照：「Maps Static API - Developer Guide」（https://developers.google.com/maps/documentation/maps-static/dev-guide?hl=ja）

地図の表示

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

ＨＴＭＬでの記述

上図は、次のＨＴＭＬだけで作成しました。以下の各行（パラメタ）はすべて「必須」です。

<img src="https://maps.googleapis.com/maps/api/staticmap?key=xxxxx　Ａ
　　&size=400x300　　　　　　　　　　　　　　　　　　　　Ｂ
　　＆center=35.95055,139.7109 　　　　　　　　　　　　　Ｃ
　　&zoom=12 　　　　　　　　　　　　　　　　　　　　　　Ｄ
　　&markers=color:red|label:A|35.95055,139.7109 　　　　Ｅ
　　&markers=color:yellow|label:B|35.944516,139.722584
　　&markers=color:blue|label:C|35.949492,139.69305
">

記述上の注意

一般形式：<img src="https://maps.googleapis.com/maps/api/staticmap?｢名前付パラメタ]">
ＨＴＭＬでの「名前付パラメタ」によるリンクの文法に従います。「?」はパラメタの開始、「&」はパラメタ間の区切記号です。
「|」（パイプ文字）は、区切記号です。このままでもよい場合がありますが、ＵＲＬエンコード（ＵＲＬで使用できない文字を置き換える）である「%7C」に置換するほうが確実です。しかし、ここでは読みやすくするために「|」を用います。
各行は半角空白をおかずに詰めること。

各行の説明

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

Ａ：https://maps.googleapis.com/maps/api/staticmap?key=xxxxx
: 一般に画像を指定するには、<img src="img/image.jpeg"のように記述しますが、それに相当するものです。
Googleのhttps://maps.googleapis.com/maps/api/staticmapに、以下のパラメタを渡し、そこで画像になったもを送り返しています。
key=xxxxxのxxxxxは、事前に取得したGoogle APIキーです。これがアクセス認証になります。
Ｂ：size=横幅x高さ: 表示画像のサイズ。px単位で与えます。*ではなくxであることに注意。最大600x600までです。
Ｃ：center=緯度,経度: 地図の中心位置。省略したときは、全マーカー座標の平均値がとられます
Ｄ：size=整数: 地図の精度：１０＝市や県、１５＝町のレベル
Ｅ：markers=マーカー色|ラベル|座標: 原則として、マーカーの個数だけ記述します。
　　マーカー色　color:yellow （通常の色名は使える）
　　ラベル　　　label:a　（半角英数字１文字）
　　座標　　　　緯度,経度
座標は必須。マーカー色とラベルは省略可能です。省略したときは「arkers=35.95154,139.71167」のように記述します。省略したとき、マーカーは赤色、ラベルは●になります。

centerやmarkersでの座標は、「center=岩槻城址公園」のように地名や住所で与えることもできますが、Google Mapsがもっている地名と一致させる必要があり、座標のほうが確実です。