GoogleMapsAPI

Google Static Maps APIの使い方（１）

今回はGoogleから提供されているGoogle Static Maps APIの使い方をご紹介します。

Google Static Maps APIというのは「JavaScript や動的なページ読み込みを使うことなく、Google マップ画像をウェブページに埋め込むことができる」ものです。

このAPIに関するドキュメントはhttps://developers.google.com/maps/documentation/staticmaps/index?hl=jaにまとめられていますので、このページの内容に沿って使い方を紹介します。

表示サンプル

次の例は、東京の港区の静的な地図画像のURLです。

http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&zoom=14&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:H%7C35.660347,139.729207&markers=color:green%7Clabel:M%7C35.665185,139.730558
&markers=color:red%7Ccolor:red%7Clabel:Z%7C35.657392,139.748207&sensor=false
東京タワー周辺の地図

上の画像を表示するためにjavascriptを使う必要はなく、＜img＞タグ内に配置するだけで、ウェブサイト上のどの位置にでも置くことができます。

注意点

Google Static Maps APIには使用制限があります。
・1日につき、アプリケーションあたり 25,000 回の静的マップリクエスト
上記回数を超えた場合にはエラー画像が表示されるようになっており、追加の場合には料金を支払う必要があります。
（地図読み込み回数を超過した分のオンライン購入価格を教えてください）

概要

Google Static Maps API は、画像（GIF、PNG、または JPEG）を返します。
各リクエストでは、
・地図の場所
・画像サイズ
・ズームレベル
・地図のタイプ
・（オプション）地図上に配置できるマーカー
を指定できます。マーカーには、英数字を使用してラベルを追加できます。

簡単な使い方

リクエストURLは次の形式で指定する必要があります。

http://maps.googleapis.com/maps/api/staticmap?parameters

HTTPSでアクセスする場合は「HTTP→HTTPS」と変えるだけで利用することが可能です。

地図を表示するだけであれば、

http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E3%82%BF%E3%83%AF%E3%83%BC&zoom=14&size=600x300&sensor=false
東京タワー周辺の地図

というように、
・center
・zoom
・size
・sensor
を指定するだけで表示されます。

それぞれについて簡単に説明します。

center

地図の中心を定義します。
緯度経度のペア（例：35.660347,139.729207。「緯度,経度」の順）または文字列による住所や場所（例：東京タワー）で定義できます。
ただし日本語で定義する場合には、エンコードは必須です。

zoom

地図の拡大レベルを定義します。
目的の地域のズームレベルに対応する数値（0〜21）を指定することになります。
※すべての場所を、すべてのズームレベルで表示できるわけではありません。場所によって画像データの粒度が異なるため、使用できるズームレベルも異なります。

size

表示する画像のサイズになります。
「横x縦」というように指定します。
無料版では「640×640」が最大のサイズとなります。

sensor

静的マップをリクエストしているアプリケーションが、センサーを使用してユーザーの位置情報を取得しているかどうかを指定します。
すごく簡単に書くと、スマホなどでGPSを使って位置情報を取得した情報に対して地図の表示などをする場合には「true」に設定しておいて、それ以外は「false」で問題ないでしょう（厳密には違うかもしれませんので気になる方は公式マニュアルを参照して下さい）。

マーカーを表示する

マーカーを表示するためには「markers」というパラメータを使用します。

マーカースタイル（全て省略可）

マーカースタイルの記述は、パイプ文字（|）で区切られます。
（最初に載せたサンプルURLではエンコードされているため「%7C」となってます。）

・size:（省略可能）: マーカーのサイズを {tiny, mid, small} のセットから指定します。size パラメータが設定されていないと、マーカーはデフォルト（normal）サイズで表示されます。
・color:（省略可能）: 24 ビット カラー（例: color=0xFFFFCC）、または {black, brown, green, purple, yellow, blue, gray, orange, red, white} から定義済みの色を指定します。
・label:（省略可能）: {A-Z, 0-9} から大文字の英数字を 1 文字指定します。（大文字の使用は、このバージョンの API で新しく必須要件になりました。）alphanumeric-character パラメータを表示できるのは、デフォルト サイズと mid サイズのマーカーのみです。tiny および small のマーカーでは、英数字を表示することはできません。

※小さいサイズで、赤、Mという文字を指定の場合

&markers=size:tiny%7Ccolor:red%7Clabel:M

となります。（この後ろに後述するマーカーの位置情報をつなげることになります）

これらのマーカーの代わりに、カスタムアイコンを使用することができます。
興味がある方はこちらをご覧ください。

マーカーの場所

マーカーの場所は地図の中心を定義した時と同様に、緯度経度のペアまたは文字列による住所や場所で指定が可能です。
マーカースタイルを指定している場合にはパイプ文字（|）を使用して区切ります。

markersはマーカーごとに指定するため最初のサンプルのように複数のマーカーを表示したい場合は複数個になることがあります。
（マーカー内の文字や色が3つとも異なる場合）

&markers=color:blue%7Clabel:H%7C35.660347,139.729207&markers=color:green%7Clabel:M%7C35.665185,139.730558&markers=color:red%7Ccolor:red%7Clabel:Z%7C35.657392,139.748207
東京タワー周辺の地図

違う種類のマーカーでなければ「markers」パラメータは1つでOKです。
（マーカー内の文字や色が3つとも同じ場合。）

&markers=size:small%7Ccolor:red%7Clabel:M%7C35.660347,139.729207%7C35.665185,139.730558%7C35.657392,139.748207
東京タワー周辺の地図

ほかにもパラメータがあります

これで基本的な使い方の説明は終わりです。
今回紹介したのは基本的なパラメータのみでしたが、他にも設定可能なパラメータがあります。
・地図のタイプを変える（道路地図,衛星画像など）
・画像のフォーマット（jpg,gif,png）の選択
などいろんなことが可能です。
スマホ用に2倍の解像度で表示したい場合のために、きちんとパラメータが用意されてたりします。

次回は他のパラメータについて触れたいと思います。
（おそらく全部ではないですが使うかもしれないところをいくつか紹介予定です。）