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.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

2017.07.19

「関東一の祇園・熊谷うちわ祭り」の山車・屋台位置情報サイト公開!

みんさん、こんにちは!

暑い夏をいかがお過ごしですか?今回は、前回記事の山笠に引き続き、夏祭りネタにです^^

 ・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

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

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

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

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

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