マルティスープ
Staff Blog

2017.08.20

Google 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?{パラメータ}

主なパラメータ

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

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

カスタムマーカーを2個描画

size=640x320&&markers=icon:https://maps.multisoup.co.jp/exsample/common/img/pin01.png|35.691742,139.759768|35.691690,139.759135

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

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 以外の地図に関する開発のご相談も承っています。是非、下記の問い合わせフォームよりお送りください。