MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.08.20

Google Static Maps API の使い方

Static Maps API

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

Google Static Maps API は、地図を画像として取得するためのAPIで、HTMLの <img> タグに設定して使うことができます。

 

以下は、Google の 解説ページです。

https://developers.google.com/maps/documentation/static-maps/?hl=ja

 

以前、フィーチャーフォンが全盛のときは、Google Maps JavaScript API が使えないため、代わりに Static Maps API を使うことが多かったですね。今でも、時おり使用しています。

 

URL

https://maps.googleapis.com/maps/api/staticmap?{パラメータ}

 

主なパラメータ

パラメータ説明
keyGoogle Developer Console で取得したAPIキー 
center地図の中心座標。「緯度,経度」または「住所」「建物名」なども指定可能です。35.5000,136.5000、六本木ヒルズ
zoomマップのズームレベルを決定します。1~22を指定できます。20
size

地図画像のサイズ(幅×高さ)を決定します。

※実際に出力されるサイズは、size × scale になります。

※スタンダードプランは、最大 640×640 です。

※プレミアムプランを契約頂くと、2048×2048まで設定できます。

640×480
scale指定した数値に拡大され、文字やシンボルが大きく表示されます。2
format画像の形式を決定します。gif、jpg、png を指定できます。png
maptype地図のタイプを決定します。roadmap, satellite, hybrid, terrain を指定できます。roadmap
markersマーカーを定義します。size:mid|color:blue|label:A|
35.692134,139.759854
pathラインを定義します。設定の方法によっては、ポリゴンも描画できます。weight:10|color:red|
35.692134,139.759854|
35.7946211,139.8085132
style地図のスタイルを定義します。 feature:road|color:0xffffff

 

では、サンプルを見てみましょ。

 

scale=1 を指定

center=35.692134,139.759854&size=640x320&scale=1&zoom=18

 

scale=2 を指定

center=35.692134,139.759854&size=320x160&scale=2&zoom=18

同じサイズで出力されていますが、下の画像は「scale=2」のため、地図全体が拡大されて表示されます。

 

地形図にマーカを2個描画

size=640x320&maptype=terrain&markers=size:mid|color:red|label:A|35.692134,139.759854|35.692213,139.759221

 

航空写真に赤いラインを描画

size=640x320&maptype=satellite&markers=weight:5|color:red|35.692134,139.759854|35.691742,139.759768|35.691690,139.759135

 

Hybridにポリゴンを描画

「fillcolor」を指定するとラインではなく、ポリゴンになります。以下の例では、「weight:0」を指定し、境界線を非表示にしています。

size=640x320&maptype=hybrid&path=fillcolor:green|weight:0|color:red|35.692134,139.759854|35.691742,139.759768|35.692666,139.758674

 

スタイルを適用

道路の色を全て赤にしました。

size=640x320&style=feature:road|color:0xff0000

 

 

いかがでしたか?

今回は一部の設定しか紹介しませんが、パラメータを駆使することで、もっと色々な地図画像を表示することができます!  みなさんも是非お試しください。

 

マルティスープでは、Google Maps API に関する質問、あるいは Google Map 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。

【関連記事】こんな記事も読まれています

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2017.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画する・・・

続きを読む

 - Google Maps APIs, Google StaticMaps API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)