アトム電器 三軒家店(有限会社 おかもとでんか)のホームページ。大阪市大正区にある町の電気屋さん。家電製品の販売、エアコン、電気工事、パソコンからリフォーム、オール電化など電気のことならなんでもお任せ下さい!アトム電器三軒家店

Google Static Mapsを使ってみた

Web開発

Googleの地図APIは、ホームページで使うGoogle Maps JavaScript API(以下Gogole Mapsと記述)、Android用のGoogle Maps Android APIなど他にも色々ありますが、今回はGoogle Static Mapsを使ってみました。

つまづいたとこはURLに署名を付けるところと、署名をつけないでimgタグのsrcにURLをセットして地図が表示されなかったので、その部分も説明しています。それとURLエンコード。日本語などを使わない限りは区切り文字である|%7cにしておけば問題はなさそうです。

Google Static Mapsを使うにあたって

Google Static Mapsは簡単にいうとGoogle Mapsの静止画像版のことです。Google Mapsを使うにはJavaScriptで実装する必要がありますが、このGoogle Static MapsではJavaScriptは使わずにHTMLのimgタグだけで表示できます。ただ静止画像なのでスクロールや倍率の変更などはできません。

 Google MapsGoogle Static Maps
スクロール可能不可
ズーム可能不可
JavaScript必須不要

Google Static Maps用のURLは、https://maps.googleapis.com/maps/api/staticmapに対して表示した画像の位置などのリクエストを送って、そのリクエストに対応する地図画像がレスポンスとして返ってきます。

ページ上の地図サイズをsizeで指定します。このページのサンプルは横400px、高さ300pxとしています。

倍率(zoom)は、0から21を指定します。数字が大きいほど詳細な表示になります。
ズームについて

Google Static Maps用のURLでは、日本語などは利用できません。利用する場合はURLエンコードを行いエンコードした文字列をURLで使うことになります。なお区切り文字として使う|をURLエンコードすると%7cとなります。

ある地点を示すには、その地点の緯度と経度を指定します。日本であれば緯度は34度らへん、経度は135度らへんになります。なおGoogle Static Mapsでは緯度・経度ともに少数点以下6桁を超える値は無視されるようですが、超えていても地図が表示されなくなるということはないようです。
緯度・経度の算出は参考情報を参考にしてください。

なお無料で使用するにあたっての制限は、Google Mapsの場合25,000回に制限されています。もし同一GoogleアカウントでGoogle Maps JavaScript APIGoogle Static Maps APIを使っている場合は、両方の使用回数を合わせた回数が25,000回以下にする必要があります。

署名について

またGoogle Static Mapsの不正な利用を防ぐためにURLに署名を付けないと使えないようになっています。もし署名がないままのURLを使っても地図は表示されません。
署名付きURLの書式

署名を入れるには、Google Static Maps用のURLをまず作成して、Google Developer ConsoleGoogle Static Maps APIURL署名シークレットを開いて、作成したURLをURLに貼り付けます。すると署名済みの URLに署名されたURLが表示されますので、この署名済みの URLをimgタグのsrcに設定します。
署名付きURLを作成する

なお、Google Static Maps用のURLでは使えない文字を使ったURLに署名をつけようとすると、下記のようにURL入力をエンコードしてくださいと表示されます。この場合URLをURLエンコードすることで使えるようになります。URLエンコードはページ下の参考情報を参照してください。
署名付きURLの作成に失敗する

開発の時限定など危険を承知で署名をいれなくても使えるようにするには、Google Developer ConsoleGoogle Static Maps APIURL署名シークレット開いて、署名なしの使用を許可ボタンをクリックすることで、imgタグのsrcに署名なしのURLを設定しても表示することができるようになります。
署名なしの使用を許可

センターと表示倍率を指定した地図

地図中央の位置を指定するにはcenterを使います。緯度と経度を指定します。

表示倍率の指定はzoomを使います。0から21までの数字を入力します。数字が大きいほど詳しい地図になります。

下記サンプルでは、倍率を16で、JR大正駅(緯度:34.6655720279225, 経度:135.4798247541239)が地図の中央に表示されるようにしています。

Gogole Static Maps用のURL
https://maps.googleapis.com/maps/api/staticmap?size=400x300&center=34.6655720279225,135.4798247541239&zoom=16&key=APIキー
地図

指定地点が入るような地図

指定した地点が入るような地図を自動で作成することもできます。Google Static Mapsが指定した地点が入るように表示倍率やセンターなどを調整するので、表示倍率やセンターを指定する必要がありません。

指定地点が入るような地図を作成するには、visibleを使います。複数の地点を表示したい場合は|で区切って入力しますが、通常|はURLエンコードすると%7cとなります。

下記サンプルでは、京セラドーム大阪(緯度:34.66947325604461, 経度:135.47587752342224)と、大正駅(緯度:34.6655720279225, 経度:135.4798247541239)と当店が入るように地点を指定しています。

Gogole Static Maps用のURL
https://maps.googleapis.com/maps/api/staticmap?size=400x300&visible=34.66947325604461,135.47587752342224%7C34.6655720279225,135.4798247541239%7C34.66614636465307,135.47637503234455&key=APIキー
地図

マーカーを表示した地図

Goole Mapsのマーカーを使って地点を表示します。マーカーはmarkersを使います。マーカーのサイズや色、ラベルなどを指定できます。またマーカーを複数指定して表示することもできます。
マーカーの書式

マーカーの大きさは、markerssize:を使って指定します。このsize:は省略できます。

大きさ
  • tiny
  • small
  • mid

マーカーの色は、markerscolor:を使って指定します。値は色名またはRGBで指定できます。このcolor:は省略できます。

色名
  • black
  • brown
  • green
  • purple
  • yellow
  • blue
  • gray
  • orange
  • red
  • white
RGB0x[16進数RGB値](0xffffffで白色など)

マーカーに表示する文字は、markerslabel:を使って指定します。なお表示できる文字は、1文字のみで、数字または大文字のアルファベットに限定されています。なおマーカーのサイズによっては指定できない場合があります。このlabel:は省略できます。

下記サンプルでは、大正駅(緯度:34.6655720279225, 経度:135.4798247541239)と京セラドーム大阪(緯度:34.66947325604461, 経度:135.47587752342224)を黒色マーカーで、当店所在地にキミドリ色のマーカーで8が表示されるように指定しています。

Gogole Static Maps用のURL
https://maps.googleapis.com/maps/api/staticmap?size=400x300&visible=34.66947325604461,135.47587752342224%7C34.6655720279225,135.4798247541239%7C34.66614636465307,135.47637503234455&markers=color:black%7C34.66947325604461,135.47587752342224%7C34.6655720279225,135.4798247541239&markers=color:0x99fe5d%7Clabel:8%7C34.66614636465307,135.47637503234455&key=APIキー
地図

オリジナル画像をマーカー指定した地図

オリジナルの画像をマーカーとして利用することができます。この場合もmarkersを使います。

オリジナル画像は、markersicon:に画像のURLを設定することになります。なお画像の中央下が指定した地点に表示されます。
オリジナルマーカーは中央下が指定した緯度経度になる

下記サンプルでは、当店所在地に当店が加入しているアトム電器チェーンのロゴ入りマーカーを表示されるように指定しています。

Gogole Static Maps用のURL
https://maps.googleapis.com/maps/api/staticmap?size=400x300&visible=34.66947325604461,135.47587752342224%7C34.6655720279225,135.4798247541239%7C34.66614636465307,135.47637503234455&markers=icon:https://www.okamoto-net.com/wp-content/themes/pizza/resources/map-position-small-icon.png%7C34.66614636465307,135.47637503234455&key=APIキー
地図