ウェブ学のすすめ

Study of Web Design & Programing

Google Static Maps APIのパラメーターの指定方法

JavaScriptなしで簡単にGoogle マップの画像をウェブページに埋め込むことができる『Google Static Maps API』のパラメーターを色々変えて試してみました

↓公式ドキュメント
Static Maps API V2 デベロッパー ガイド

基本形

&」でパラメータを区切って記述します。

<img src="http://maps.google.com/maps/api/staticmap?(パラメータ)&(パラメータ)・・・&(パラメータ)">

場所を指定するパラメータ

center:地図の中心を指定

※マーカー指定が無い場合は必須

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=16&size=320x320&sensor=false">
zoom:ズーム レベルを指定(0〜21)

※マーカー指定が無い場合は必須

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=20&size=320x320&sensor=false">

地図を指定するパラメータ

size:マップ画像のサイズを指定(幅x高さ)

※必須

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x200&sensor=false">
format:画像形式を指定
  • png8 または png
  • png32
  • gif
  • jpg
  • jpg-baseline

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=16&size=600x200&sensor=false&format=jpg">
maptype:作成する地図のタイプを指定
<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=16&size=600x200&sensor=false&maptype=roadmap">

↓roadmap(デフォルト、標準の道路地図)

↓satellite(航空写真)

↓hybrid(航空写真と道路地図を組み合わせたもの)

↓terrain(物理的な地形図画像)

対象物を指定するパラメータ

markers:マーカーを指定
&markers=size:(サイズ)|color:(色)|label:(ラベル)|緯度/経度1|緯度/経度2|...
  • size:tiny/small/mid
  • color:black/brown/green/purple/yellow/blue/gray/orange/red/white
  • label:A-Zまでのアルファベットと0-9までの数値

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x200&sensor=false&markers=size:mid|color:red|label:A|35.710071,139.810707&markers=size:mid|color:blue|label:B|35.714741,139.796727">
path:地図の上にパスを指定
&path=color:(色)|weight:(パスの太さ)|緯度,経度|緯度,経度|...

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x200&sensor=false&path=color:blue|weight:8|35.710071,139.810707|35.714741,139.796727">
&path=fillcolor:(色)|緯度,経度|緯度,経度||緯度,経度||緯度,経度|

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x400&sensor=false&path=fillcolor:blue|weight:0|35.710071,139.810707|35.714741,139.796727|35.710629,139.792568|35.696828,139.793469">
visible:1つまたは複数の場所を指定

<img src="http://maps.google.com/maps/api/staticmap?&size=600x200&sensor=false&visible=35.710071,139.810707">
style:カスタム スタイルを指定
&style=feature:(all/road/landscape)|element:(all/geometry/labels)|rule1:(ルール)|rule2:(ルール)...

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x200&sensor=false&style=feature:road.local|element:geometry||lightness:-100">

レポートを指定するパラメータ

sensor:位置情報を取得するのにセンサーを用いているかを指定

※必須

<img src="http://maps.google.com/maps/api/staticmap?center=35.710071,139.810707&zoom=14&size=600x200&sensor=false">