SYNCERのロゴ
アイキャッチ画像

Google Static Maps API

Google Mapsを画像として表示できるのが、「Google Static Maps API」です。この記事では初心者でも仕組みが分かるよう、使い方をまとめています。

Google Static Maps デベロッパー ガイド
オープングラフ画像
Googleの公式リファレンス。Google Static Maps APIの仕様が日本語で説明されています。

準備 (APIキーの取得)

Google Maps Embed APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。

アカウントの用意

APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。

Googleアカウントの作成
オープングラフ画像
Googleのアカウントを作成するには、このページから操作を行なって下さい。

管理画面

アカウントを取得後、開発者たちの管理画面であるGoogle Developers Consoleにアクセスして下さい。

Google Developers Console
オープングラフ画像
Googleが提供するAPIを活用する開発者たちの拠点となるページ。ブックマークしておくと今後、便利です。

プロジェクトの作成

メニューを開く
メニューを開く

管理画面の右上にあるメニューをクリックして下さい。

プロジェクトの管理画面
プロジェクトの管理画面

プロジェクトの管理画面が出てきます。既に作成している人は、利用するプロジェクトを選択して下さい。まだ作成していない人は、「+」をクリックします。

プロジェクトを作成する
プロジェクトを作成する

作成画面に移動します。好きなプロジェクト名を入力して「作成」をクリックして下さい。「プロジェクトID」も編集可能ですが、特に変更する必要はありません。ボタンをクリックして問題がなければ、プロジェクトが作成されます。

選択状態を確認する
選択状態を確認する

該当部分に、プロジェクト名が表示されていることを確認しましょう。

APIを有効にする

このプロジェクトにおいて「Google Static Maps API」を利用できるように、有効化する作業を行ないます。

「APIを有効にする」をクリックする
「APIを有効にする」をクリックする

管理画面の上部にある、「APIを有効にする」をクリックして下さい。

有効化するAPIを探す
有効化するAPIを探す

Googleが提供するAPIの一覧が表示されます。まずは目的のAPIを探します。左上の検索フォームに「Google Static Maps API」と入力して下さい。

「有効にする」をクリックする
「有効にする」をクリックする

APIが絞り込まれて、いくつか候補が表示されるので、その中から「Google Static Maps API」をクリックして下さい。

「有効にする」をクリックする
「有効にする」をクリックする

設定画面に移動します。ここで「有効にする」をクリックして下さい。これで、このプロジェクトで「Google Static Maps API」を使えるようになります。「認証情報を作成して下さい」という案内が表示されるかもしれません。認証情報とは、この後に作成するAPIキーのことです。

認証情報(APIキー)の作成

「認証情報」をクリックする
「認証情報」をクリックする

仕上げに認証情報(APIキー)を取得しましょう。APIキーは、他のAPI(例えば、Google Maps JavaScript APIなど)と共用することもできます。左メニューにある「認証情報」をクリックして下さい。

「認証情報を作成」をクリックする
「認証情報を作成」をクリックする

「認証情報」の設定画面に移動します。「認証情報を作成」をクリックして下さい。

「APIキー」をクリックする
「APIキー」をクリックする

どの種類の認証情報を作成するか、メニューが表示されます。Google Maps JavaScript APIではAPIキーを利用します。なので「APIキー」をクリックして下さい。

APIキーが作成される
APIキーが作成される

APIキーが作成されます。このキーを利用して、プログラミングしていきます。お疲れ様でした。作成したAPIキーは、認証情報の画面に一覧表示されます。

APIキーの編集

APIキーの名前をクリックする
APIキーの名前をクリックする

認証情報の画面で、目的のAPIキーの名前部分をクリックして下さい。

APIキーの編集画面
APIキーの編集画面

APIキーの編集画面に移動します。編集後は下部にある「保存」をクリックしないと反映されません。

名前の設定

名前の設定
名前の設定

まずは、後々管理しやすいように、APIキーに名前を付けておきましょう。

キーの制限

制限の設定
制限の設定

名前の下には「キーの制限」という項目があります。他サイトがこのAPIキーを勝手に使えないように設定できます。例えば、ウェブサイトで利用する場合は「HTTPリファラー」を選択して下さい。リファラーを*.syncer.jp/*と設定すれば、ドメインがsyncer.jp以外のウェブページで、このAPIキーを利用できなくなります。

ルール

基本的な使い方を覚えておきましょう。

エンドポイント

Google Static Maps APIのエンドポイントです。このエンドポイントに、オプションとなるパラメータを指定していきます。

https://maps.googleapis.com/maps/api/staticmap

パラメータ

名前説明
keyこの記事で説明した、取得したAPIキー。
center地図の中心地。位置座標、またはキーワードで指定する。markers、path、visibleを指定している場合は省略可。値はurlエンコードすること。
size画像のサイズ。{width}x{height}で値を指定する。
zoom地図のズーム値を1〜22の間で指定する。
scale2を指定すると、画像が2倍のサイズになる。iPhoneなどのRetina Displayで、画像がボヤけて表示されないようにするためのもの。
markers地図上にマーカーを設置する。
path地図上にポリラインを設置する。
visible位置を位置座標、またはキーワードで指定すると、その位置を含むズーム値に調整される。値はurlエンコードすること。
maptype地図の種類を指定する。
roadmap
通常(デフォルト)。
satellite
航空写真。
language地図上に表記される言語を、国コードで指定する。
jp
日本語。
en
英語。
format画像の形式。省略時はpng、またはpng8になる。
png
8ビットのPNG。
png32
32ビットのPNG。
gif
GIF。
jpg
JPEG。
jpg-baseline
プログレッシブ圧縮なしのJPEG。
region地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

url文字数の上限

urlの文字数は2,048文字が上限です。それ以上の長さだと、エラーで地図は表示されません。複数のマーカー、複雑なポリラインなど、位置座標をたくさん指定する場合はご注意下さい。後述しますが、ポリラインエンコードという手法で、複数の位置座標の指定を短縮化できます。

レートリミット

2017年7月現在、Google Static Maps APIの、無料で利用する場合の使用制限は下記の通りです。個人のウェブサイトで利用する分には気にするレベルではないでしょう。使用制限を超えて利用するには、料金を支払う必要があります。詳しくは公式サイトでご確認下さい。

  • 呼び出しは25,000回まで。
  • 画像サイズは、640x640まで。
Google Static Maps API の使用制限
オープングラフ画像
公式リファレンスのレートリミットの説明。

地図を表示する

まずは、極めてシンプルな地図画像を表示してみましょう。center、size、keyという必要最小限のパラメータだけ指定します。centerの値は、「東京駅」をurlエンコードしたものです。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E9%A7%85&size=600x450&key={APIキー}">

ありふれたキーワードの場合、意図したのと違った場所が表示されてしまうかもしれません。その場合はキーワードを住所、または位置座標で指定しましょう。下記はcenterに位置座標を指定したものです。位置座標で指定すると、zoom値はデフォルトで0に設定されてしまうので、手動で適当な値を設定してやる必要があります。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=600x450&key={APIキー}">

マーカーを設置する

続いてマーカーを設置してみましょう。markersのパラメータを利用します。

<img src="https://maps.googleapis.com/maps/api/staticmap?markers={マーカーの値}&key={APIキー}">

値の指定方法

{マーカーの値}には、次の情報を指定できます。

名前説明
設置場所マーカーの設置場所。位置座標、またはキーワードで指定する。複数指定する場合はパイプライン(|)で区切る。
サイズ省略可。マーカーのサイズを、size:値で指定する。値は下記から選ぶ。省略時は通常のサイズとなる。
tiny
最小。
small
小。
mid
中。
省略可。マーカーの色を、color:値で指定する。値は24ビットカラーコードで指定する(例: #FFCCCCなら0xFFFFCC)。下記のカラーネームで指定してもいい。
black
黒。
brown
茶。
green
緑。
purple
紫。
yellow
黄。
blue
青。
gray
灰色。
orange
オレンジ。
red
赤。
white
白。
ラベル省略可。マーカーのラベルを、label:値で指定する。デフォルトは「●」。0〜9、A〜Zの1文字で指定する。大文字でなければならない。サイズがsmall、tinyの場合は指定不可。

各パラメータは、パイプライン(|)で区切ります。例えば、下記のパラメータを用意したとしましょう。

35.7926211,139.8065132
size:mid
color:purple
label:A

これらをパイプライン(|)で繋ぎ合わせると、次のようになります。ここで注意しなければいけないのは順番です。設置場所は、最後でなければいけません。

size:mid|color:purple|label:A|35.7926211,139.8065132

用意できたマーカーの値を、区切り文字も含めてまとめてurlエンコードしてから、markersに指定して下さい。次のように表示されれば成功です。

<img src="https://maps.googleapis.com/maps/api/staticmap?markers=size%3Amid%7Ccolor%3Apurple%7Clabel%3AA%7C35.7926211%2C139.8065132&size=600x450&key={APIキー}">

複数のマーカー

複数のマーカーを設置するには、2種類の方法があります。

同一スタイル

他のマーカーと同一のスタイルでいいなら、単純に設置場所を追加しましょう。

size:mid|color:purple|label:A|35.7926211,139.8065132|35.7926111,139.8073132

<img src="https://maps.googleapis.com/maps/api/staticmap?markers=size%3Amid%7Ccolor%3Apurple%7Clabel%3AA%7C35.7926211%2C139.8065132%7C35.7926111%2C139.8073132&size=600x450&key={APIキー}">

別のスタイル

他のマーカーとスタイルを分けたい場合は、markersのパラメータを複数用意しましょう。

<img src="https://maps.googleapis.com/maps/api/staticmap?markers={マーカー1の値}&markers={マーカー2の値}&key={APIキー}">

<img src="https://maps.googleapis.com/maps/api/staticmap?markers=size%3Amid%7Ccolor%3Apurple%7Clabel%3AA%7C35.7926211%2C139.8065132&markers=color%3Agreen%7Clabel%3AB%7C35.7926111%2C139.8073132&size=600x450&key={APIキー}">

ポリラインを設置する

地図に線を引きたい場合、ポリラインを設置しましょう。値の基本的な指定方法はマーカーと同じです。

<img src="https://maps.googleapis.com/maps/api/staticmap?path={ポリラインの値}&key={APIキー}">

値の指定方法

{ポリラインの値}には、次の情報を指定できます。

名前説明
パスポリラインが通る場所。位置座標、またはキーワードで指定する。複数指定する場合はパイプライン(|)で区切る。
省略可。ポリラインの幅をweight:値で指定する。値はピクセル単位の数値。
線の色省略可。ポリラインの色を、color:値で指定する。値は24ビットカラーコードで指定する(例: #FFCCCCなら0xFFFFCC)。下記のカラーネームで指定してもいい。
black
黒。
brown
茶。
green
緑。
purple
紫。
yellow
黄。
blue
青。
gray
灰色。
orange
オレンジ。
red
赤。
white
白。
塗りつぶしの色省略可。パスを3つ以上指定した場合の、塗りつぶしの色をfillcolor:値で指定する。値の指定方法は線の色(color)と同じ。

各パラメータは、パイプライン(|)で区切ります。例えば、下記のパラメータを用意したとしましょう。

35.7926211,139.8065132
35.7946211,139.8085132
weight:24
color:red

これらをパイプライン(|)で繋ぎ合わせると、次のようになります。ここで注意しなければいけないのは順番です。パスは、最後でなければいけません。

weight:24|color:red|35.7926211,139.8065132|35.7946211,139.8085132

用意できたポリラインの値を、区切り文字も含めてまとめてurlエンコードしてから、pathに指定して下さい。次のように表示されれば成功です。

<img src="https://maps.googleapis.com/maps/api/staticmap?path=weight%3A24%7Ccolor%3Ared%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132&size=600x450&key={APIキー}">

複雑なポリライン

通る場所を増やすと、それだけ複雑なポリラインになります。

weight:24|color:red|35.7926211,139.8065132|35.7946211,139.8085132|35.7956211,139.8075132|35.7996211,139.8095132

<img src="https://maps.googleapis.com/maps/api/staticmap?path=weight%3A24%7Ccolor%3Ared%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132%7C35.7956211%2C139.8075132%7C35.7996211%2C139.8095132&size=600x450&key={APIキー}">

複数のポリライン

pathのパラメータを複数指定することで、複数種類のポリラインを設置できます。

<img src="https://maps.googleapis.com/maps/api/staticmap?path={ポリライン1の値}&path={ポリライン2の値}&key={APIキー}">

<img src="https://maps.googleapis.com/maps/api/staticmap?path=weight%3A24%7Ccolor%3Ared%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132&path=weight%3A24%7Ccolor%3Ablue%7C35.7906211%2C139.8085132%7C35.7886211%2C139.8105132&size=600x450&key={APIキー}">

ポリゴンを設置する

前章の内容を理解していることが前提です。ポリラインで3つ以上のパスと塗りつぶしの色を指定すると、ポリゴンを設置できます。例えばポリラインで3つのパスを指定すると次のようになります。

weight:24|color:red|35.7926211,139.8065132|35.7946211,139.8085132|35.7906211,139.8085132

<img src="https://maps.googleapis.com/maps/api/staticmap?path=weight%3A24%7Ccolor%3Ared%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132%7C35.7906211%2C139.8085132&size=600x450&key={APIキー}">

これに塗りつぶしの色(fillcolor)を追加してみましょう。するとポリゴンになりました。線が不自然です。線を完全に結ぶには、最初と最後のパスを同一にしましょう。

<img src="https://maps.googleapis.com/maps/api/staticmap?path=fillcolor%3Apurple%7Cweight%3A24%7Ccolor%3Ared%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132%7C35.7906211%2C139.8085132&size=600x450&key={APIキー}">

または線の幅(weight)を0にして見えなくしてしまえば、より自然なポリゴンになるでしょう。

<img src="https://maps.googleapis.com/maps/api/staticmap?path=fillcolor%3Apurple%7Cweight%3A0%7C35.7926211%2C139.8065132%7C35.7946211%2C139.8085132%7C35.7906211%2C139.8085132&size=600x450&key={APIキー}">

ポリラインエンコード

Google Static Maps APIに指定できるurlは、2,048文字が上限です。複雑なポリゴンやポリラインを設置したい場合、上限をオーバーしてしまうという問題が出てきます。そんな時には、パスのまとまりを圧縮する「ポリラインエンコード」という手法で上限を回避しましょう。

エンコード ポリライン アルゴリズム形式
オープングラフ画像
ポリラインエンコードに関する、Googleの公式ドキュメント。

圧縮とは?

独自のアルゴリズムを適用することにより、長い文字列を短い文字列に変換するということです。例えば、次の、複数のパスの指定を見て下さい。

35.7926211,139.8065132|35.793561,139.807618|35.792978,139.809302|35.79122,139.808712|35.791638,139.806384|35.792595,139.804785|35.7926211,139.8065132

これを圧縮して次のように短縮できます。パスがどれだけ多くなっても、圧縮すれば2,048文字を超す心配はなくなるでしょう。

{vmyEu}htY{D}ErBoI~ItBsApM_E|HCwI

指定方法

通常、パスは次のように指定します。

fillcolor:purple|35.7926211,139.8065132|35.792116,139.81177|35.790091,139.807445|35.791157,139.802875|35.7926211,139.8065132

圧縮したパスを指定するには、値の接頭辞にenc:を付けて下さい。

fillcolor:purple|enc:{vmyEu}htYbB{_@tK~YuEp[cHuU

pathの値をまとめてurlエンコードするのは、これまでのルールと変わりません。圧縮前と圧縮後で、変わらない地図を表示できるはずです。

<img src="https://maps.googleapis.com/maps/api/staticmap?path=fillcolor%3Apurple%7Cweight%3A0%7Cenc%3A%7BvmyEu%7DhtYbB%7B_%40tK~YuEp%5BcHuU&size=600x450&key={APIキー}">

ビューポートを設定する

visibleを利用すれば、「地図にあそこの場所が必ず入るようにしたい」という希望を叶えてくれます。例えば、「竹ノ塚駅」を中心地に指定した地図があります。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.794410594896775%2C139.79077499999994&zoom=16&size=600x450&key={APIキー}">

「隣の西新井駅を含んで表示したい」という場合に、visibleに「西新井駅」の位置座標、またはキーワードを指定してみましょう。zoomは不要なので取り除きます。次のように、「竹ノ塚駅」を中心地にしながら、「西新井駅」を含めたズーム値に自動調整してくれました。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.794410594896775%2C139.79077499999994&visible=35.77717359497799%2C139.79042700000002&size=600x450&key={APIキー}">

visibleには複数の値を指定できます。それぞれの値をパイプライン(|)で区切って下さい。

35.77717359497799, 139.79042700000002|35.749719995107625,139.80470230000014

Retina Displayへの対応

個人的にはこの世からRetina Displayがなくなることを願っていますが…。Google Static Mapsを普通に表示しただけでは、iPhoneなどのRetina Displayでボヤけてしまいます。そんな時には、scaleを指定しましょう。例えば、次の、250x250サイズの地図を見て下さい。Retina Displayの端末で見た場合、ボヤけているはずです。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=250x250&key={APIキー}">

scale=2というパラメータを加えると、同じ内容の地図が2倍のサイズに引き延ばされます。ここでは500x500サイズの地図が返ってきますが、その内容は250x250の地図と同じということです。この地図を250x250で表示することで、Retina Displayの端末でも地図画像がボヤけない、引き締まった地図画像になるということです。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=250x250&scale=2&key={APIキー}">

実機をお持ちでしたら試してみて下さいね。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=250x250&scale=2&key={APIキー}" width="250" height="250">
更新履歴
2017年7月5日 (水)
コンテンツを公開しました。
2015年9月2日 (水)
Google Developers Consoleのデザインが変わっていたため、説明を更新しました。「ポリラインエンコード」に関する説明とサンプルプログラムを追加しました。