Google Static Maps APIの使い方まとめ!画像地図を作ろう!

Google Static Maps APIの使い方まとめ!画像地図を作ろう!

Google Mapsの地図を、操作可能なJavaScriptじゃなくて画像として使いたい。そんな場合にピッタリなのが、Googleが提供する「Google Static Maps API」です。この記事では初心者でも仕組みが分かるよう、使い方をまとめてみました。

準備(APIキーの取得)

Static Maps APIを利用するには、APIキーが必要です。まずは、面倒ですが、APIキーを取得しましょう。

Googleのアカウントを用意する

APIキーの取得には、Googleのユーザーアカウントが必要です。大多数の人は既に所有していると思いますが、まだの人は、下記ページから作成しておいて下さい。

Google Developers Console

ユーザーアカウントが用意できたら、Google Developers Consoleというページにアクセスして下さい。Googleが提供する様々なAPIを利用するための、ユーザーごとの管理画面です。

Google Developers Console
Google Developers Console

Consoleにアクセス後、まずは左上にある「プロジェクトを作成」というボタンをクリックして下さい。「プロジェクト」については、アプリケーションがまとまったカテゴリのようなものと思って下さい。

プロジェクトを作成する

新しいプロジェクトを作成する
新しいプロジェクトを作成する

フォームが出現するので、好きなプロジェクト名を入力して下さい。私の場合は、このブログ名と同じ「Syncer」というプロジェクト名にしました。プロジェクトIDは、自動的に決まる文字列なので、特別な事情がない限り、指定しなくて大丈夫です。プロジェクト名を入力後、「作成」をクリックすれば完了です。

プロジェクトのページ
プロジェクトのページ

ボタンをクリック後、しばらく待つと、自動的にそのプロジェクトの専用ページに移動します。

プロジェクトを選択する
プロジェクトを選択する

次回以降にまたこのページに来たい場合は、Google Developers Consoleのトップページにアクセス後、一覧の中から、このプロジェクト名をクリックして下さいね。

[Google Static Maps API]を有効にする

続いては、そのプロジェクトで「Google Static Maps API」を扱えるように設定しましょう。

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

左メニューの「APIと認証」→「API」という順にクリックして下さい。

APIの選択画面
APIの選択画面

利用できるAPIの一覧が表示されます。この中から、有効にしたいAPIを選択します。

「Google Static Maps API」を選択する
「Google Static Maps API」を選択する

左上にあるフォームに「Google Static Maps API」と入力して下さい。いくつか候補が表示されるので、その中から「Google Static Maps API」をクリックして下さい。

「Google Static Maps API」を有効にする
「Google Static Maps API」を有効にする

設定画面に移動します。ここで「APIを有効にする」というボタンをクリックして下さい。これで、このプロジェクトで「Google Static Maps API」を使えるようになりました。

APIキーを作成する

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

最後にAPIキーを作成しましょう。左メニューで、「APIと認証」→「認証情報」という順にクリックして下さい。

「新しいキーを作成」をクリックする
「新しいキーを作成」をクリックする

「認証情報」の画面に移動します。「公開APIへのアクセス」という項目内にある、「新しいキーを作成」というボタンをクリックして下さい。このキーが、APIキーのことです。

「ブラウザキーを作成」をクリックする
「ブラウザキーを作成」をクリックする

キーのタイプを選択して下さい。今回はブラウザでアクセスできるウェブページで利用するので「ブラウザキー」を選択して下さい。アプリなどを作成する場合は「Androidキー」「iOSキー」などが必要になってきますねー。

許可するリファラーを設定する
許可するリファラーを設定する

続いて「許可するリファラー」を設定します。ここで設定したホスト以外のページでは、アプリケーションを利用できません。ここで設定を間違えてAPIキーが使えないと、エラーの原因が分からなくなるので、まだ空白(どのページでも使える)にしておきましょう。そのまま「作成」をクリックして下さい。後で再設定することができるので、本稼働時に設定して下さい。

APIキーを確認する
APIキーを確認する

これでAPIキーが発行されました!!このAPIキーを使っていきましょう。

APIキーが有効か確認する

念のため、APIキーが正常に使えるか、確認しておきましょう。次のURLの「取得したAPIキー」の部分だけを変更して、URL欄の貼り付けてアクセスしてみて下さい。

https://maps.googleapis.com/maps/api/staticmap?center=tokyo&size=800x400&sensor=false&key={取得したAPIキー} リンク

Google Static Maps APIで出力された地図
Google Static Maps APIで出力された地図

このように、地図画像が表示されればAPIキーは正常に使えています。地図が表示されない場合は、URLが間違っていないか、設定が間違っていないかなどを見直してみて下さい。

基本的なルール

地図画像を自在に出力できるようになるために、まずは基本的な使い方を覚えておきましょう。

エンドポイント

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

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

パラメータ

オプションとなるパラメータには、地図画像のサイズを設定するためのsize、マーカーを設定するためのmarkerなど、様々あります。例えば、地図画像のサイズを800x600にしたい場合は、size=800x600というようにパラメータを指定して下さい。パラメータが複数ある場合は、&で区切ります。

center
地図の中心位置を位置座標、またはキーワードで指定する。キーワードで指定する場合はURLエンコードする。キーワードで指定した場合は、そのキーワードに最も関連がある場所が自動的に選択される。確実性を望むなら住所や位置座標で指定しましょう。markerspathvisibleで位置指定している場合は省略可。省略した場合は、自動調整されます。
size
地図画像のサイズ。{width}x{height}という形で値を指定する。例えば、横幅800px、縦幅600pxの場合は800x600
sensor
あなたのウェブページが、利用しているユーザーのGPS情報などを取得してサービスを提供しているか、いないかを指定します。GPS情報などを取得している場合はtrue、していない場合はfalseを指定します。
key
取得したAPIキーを指定して下さい。
zoom
地図の縮尺値を122の間で指定します。
scale
2を指定すると、2倍のサイズで地図画像を取得します。これは主に、iPhoneなどのRetina Display上で、画像がボヤけて表示されないようにするためのものです。
markers
地図上にマーカーを設置します。
path
地図上に線を引いたり、線で囲った中に色を付けたりします。
visible
位置を位置座標、またはキーワードで指定すると、その位置を含んだ縮尺値に自動調整される。
maptype
地図タイプを指定します。省略時はroadmapになります。
roadmap … 通常の地図。
satellite … 航空写真地図。
hybrid … 通常地図(roadmap)と航空写真(satellite)の組み合わせ。
terrain … 地形図。
language
言語コードを指定します。例えば、enを指定すると、ラベルが英語になります。
format
画像形式を指定します。省略時はpng、またはpng8になります。
png … 8ビットのPNG。
png32 … 32ビットのPNG。
gif … GIF。
jpg … JPEG。
jpg-baseline … プログレッシブ圧縮なしのJPEG。
language
言語コードを指定します。例えば、enを指定すると、ラベルが英語になります。
region
境界線の表示などをどの地域に合わせるか、ccTLD(トップレベルドメイン)の2文字コードで地域を指定します。

レートリミット

2015年9月現在、Google Static Maps APIは無限に利用できるわけではありません。回数制限があるので、把握しておきましょう。とはいえ、個人のウェブサイトなら気にする数値ではなく、1日に25,000回までリクエストすることができます。下記は英語ドキュメントの引用です。

Most websites and applications may use the Google Static Maps API free of charge. However, if you consistently generate a high amount of traffic, usage limits apply and you will need to pay for extra usage. If your site or application generates 25 000 Static Maps image requests or more each day, for more than 90 consecutive days, we'll attempt to get in touch with you to talk about payment. Don't worry, if you go over the limits, we won't immediately shut off your API access or display error messages on your site.

Usage Limitsより引用

また、仮にオーバーしたとしても、オーバーする日が連続で90日以上続かない限りは停止させられることはないようです。

レートリミットの超過金額について
レートリミットの超過金額について

超過が続く場合、1,000回ごとに0.5USドルが課金されていくようですので、ご注意下さいね。

URL文字数の上限

URLの文字数は2,048文字が上限です。それ以上の長さのURLで呼び出すと、地図は表示されません。複数マーカーの設置、複雑なパス(線)を描画する時はご注意下さい。後述しますが、パラメータが長くなる場合、特殊なエンコードを通して短縮化することが可能です。

地図を出力する

それでは、いくらか試していきましょう。まずは、極シンプルな地図画像を呼び出してみます。それには必要最低限のパラメータだけ指定すればいいですね。下記はcentersizesensorkeyの、必須な4つのプロパティのみを指定したものです。

足立区生物園の地図
足立区生物園の地図

位置を示すcenterプロパティには、キーワードとなる言葉か、または位置座標(緯度、経度)のどちらかの形式を指定することができます。例えば、上記の「足立区生物園」の位置を示す地図の場合、centerプロパティに「足立区生物園」と指定すれば大丈夫です。キーワードはURLエンコードしてあります。

https://maps.googleapis.com/maps/api/staticmap?center=%E8%B6%B3%E7%AB%8B%E5%8C%BA%E7%94%9F%E7%89%A9%E5%9C%92&size=800x400&sensor=false&key={取得したAPIキー}

Googleのアルゴリズムは大変優秀なので、大抵問題ありませんが、例えば、ありふれたキーワードの場合、意図したのと違った場所が表示されてしまうかもしれません。そんな時は、キーワードを住所で指定するか、または位置座標で指定しましょう。下記はcenterプロパティに位置座標を指定したものです。URLエンコードしてあるので、半角カンマ(,)は%2Cとなっていますね。なお、位置座標を指定する場合は、zoom値はデフォルトで0に設定されてしまうようなので、手動で適当な値を設定してやる必要があります。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}

マーカーを設置する

地図の出力方法を理解したら、続いてマーカーを設置してみましょう。基本的にはパラメータを増やすだけです。

マーカー付きの地図
マーカー付きの地図

パラメータ

下記がマーカーで利用できるパラメータの一覧です。

位置座標
マーカーの設置場所を、位置座標、またはキーワードで指定する。キー名はないので、値だけを指定して下さい。複数指定する場合はパイプライン(|)で区切ります。必ず、パラメータの最後に指定すること。
size
マーカーのサイズを3種類から指定する。省略時はnormalとなります。
tiny … 最小。
small … 小。
mid … 中。
color
24ビットカラーコードで色を指定する。例えば、#FFCCCCを指定したい場合は0xFFFFCCとなる。特定キーワードで指定することも可。
black … 黒。
brown … 茶。
green … 緑。
purple … 紫。
yellow … 黄。
blue … 青。
gray … 灰色。
orange … オレンジ。
red … 赤。
white … 白。
label
マーカーのラベルを、09、またはAZの1文字で指定する。大文字でなければならない。マーカーのサイズがsmalltinyの場合は不可。

指定方法

最初はややこしいですが、マーカーのパラメータの指定方法を覚えてしまいましょう。

[markers]で指定する

まず、マーカーのパラメータは、markersプロパティで指定します。

https://maps.googleapis.com/maps/api/staticmap?markers={マーカー用のパラメータ}

[:]でキーと値を繋げる

マーカー用の、各パラメータは{キー}:{値}というペアで指定します。例えば、マーカーの色を黒にしたいなら、次の通りです。

color:black

パラメータを[|]で区切る

複数のパラメータがある場合は、パラメータ同士をパイプライン文字(|)で区切って下さい。

color:black|size:small

位置情報を指定する

マーカーの必須パラメータに「位置情報」があります。この位置情報に、キーは存在しません。なので、次のようにコロン(:)を使わずに指定します。キーワードでも位置座標でも、どちらでも大丈夫です。

color:black|size:small|35.7926211,139.8065132

パラメータの指定順

ここで注意したいのが、パラメータの指定順です。位置情報の指定は、必ず、最後にして下さい。そうしないと、スタイル(それ以外のパラメータ)が正常に作用しません。これはハマりやすいポイントなので覚えておきましょう。下記は色もサイズも適用されない、ダメな指定例です。

35.7926211,139.8065132|color:black|size:small

URLエンコードをする

markersに指定する値は、全体を、まとめてURLエンコードして下さい。区切り文字であるコロン(:)、パイプライン文字(|)を含めて、丸ごとです。次のようになります。

markers=color%3Ablack%7Csize%3Asmall%7C35.7926211%2C139.8065132

サンプルリクエスト

下記が、マーカーを設置するための、サンプルURLです。「取得したAPIキー」は、あなたの環境のものに変更して下さい。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&markers=color%3Ablack%7Csize%3Asmall%7C35.7926211%2C139.8065132 リンク

複数のマーカーを設置する

複数のマーカーを設置する方法は、至極、単純な2つの方法があります。応用して、2つ、3つと設置していって下さい。

[その1] [markers]を増やす

1つ目の方法は、markersプロパティを、1つ増やすことです。2つのマーカーのスタイルを分けたい場合に、この方法をとって下さい。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&markers=color%3Ablack%7Csize%3Asmall%7C35.7926211%2C139.8065132&markers=color%3Ablue%7Csize%3Anormal%7C35.7926111%2C139.8073132 リンク

[その2] 複数の位置情報を指定する

2つ目の方法は、位置情報をパイプラインで区切って複数指定することです。

color:black|size:small|35.7926211,139.8065132|35.7926111,139.8073132

この場合、2つのマーカーは、同じスタイル(色とサイズ)になることを理解しておきましょう。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&markers=color%3Ablack%7Csize%3Asmall%7C35.7926211%2C139.8065132%7C35.7926111%2C139.8073132 リンク

パスラインを設置する

続いて、パスを描画する方法を説明します。パスは、地図に線を引きたい場合、範囲を表現したい場合に利用できます。この章では、線(パスライン)の引き方を取り扱います。

パスラインを引いた地図
パスラインを引いた地図

パラメータ

下記がマーカーで利用できるパラメータの一覧です。

位置座標
パスの位置を、位置座標、またはキーワードで指定する。キー名はないので、値だけを指定して下さい。パイプライン(|)で区切って2つ以上指定する必要があります。また、必ず、パラメータの最後に指定して下さい。
weight
線の幅をピクセル値で指定します。デフォルトは5です。
color
24ビットカラーコードで線の色を指定する。例えば、#FFCCCCを指定したい場合は0xFFFFCCとなる。特定キーワードで指定することも可。
black … 黒。
brown … 茶。
green … 緑。
purple … 紫。
yellow … 黄。
blue … 青。
gray … 灰色。
orange … オレンジ。
red … 赤。
white … 白。
fillcolor
3つ以上の位置を指定した時、そのポリゴン(範囲)内の塗りつぶし色を指定する。指定方法はcolorと同じ。

指定方法

パスのパラメータの指定方法を説明していきます。マーカーの踏襲なので、前章を読んでいる人は理解が速いと思います。

[path]で指定する

パスのパラメータは、pathプロパティで指定して下さい。

https://maps.googleapis.com/maps/api/staticmap?path={パス用のパラメータ}

[:]でキーと値を繋げる

パス専用の各パラメータは{キー}:{値}というペアで指定します。下記はパス同士を繋ぐ線の色を青にする場合です。

color:blue

パラメータを[|]で区切る

複数のパラメータがあれば、パラメータ同士はパイプライン文字(|)で区切ります。

color:blue|weight:12

位置情報を指定する

「位置情報」の指定は必須です。この位置情報には、キーが存在しないので、次のようにコロン(:)を使わずに指定して下さい。キーワードでも位置座標でも、どちらでも大丈夫ですが2つ以上、指定する必要があります。

color:blue|weight:12|35.7926211,139.8065132|35.792116,139.81177

パラメータの指定順

注意点として、位置情報の指定は、必ず最後にして下さい。それ以外のパラメータが正常に作用しなくなってしまいます。例えば、下記のように指定しても、線の色や太さが変わりません。

35.7926211,139.8065132|35.792116,139.81177|color:blue|weight:12

URLエンコードをする

pathに指定する値は、まとめてURLエンコードします。コロン(:)、パイプライン文字(|)を含めて、次のようにエンコードして下さい。

path=color%3Ablue%7Cweight%3A12%7C35.7926211%2C139.8065132%7C35.792116%2C139.81177

サンプルリクエスト

下記が、2点のパスを設置して、それらを線で結んだ地図のサンプルリクエストです。「取得したAPIキー」を自身のものに変更して下さい。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&path=color%3Ablue%7Cweight%3A12%7C35.7926211%2C139.8065132%7C35.792116%2C139.81177 リンク

ポリゴンを設置する

範囲を示す時に使えるポリゴン(多角形)を設置してみましょう。pathのパラメータを利用するので、前章の内容をあらかじめ、理解しておいて下さい。

パスラインを引いた地図
パスラインを引いた地図

指定方法

角となるパスを設置する

ポリゴンは、複数のパスで取り囲んだ範囲を塗りつぶすことで実現します。pathパラメータに3つ以上のパスを指定しましょう。

35.7926211,139.8065132|35.792116,139.81177|35.790091,139.807445|35.791157,139.802875

塗りつぶしの色を指定する

どの色で塗りつぶすのかをfillcolorで指定します。例えば、灰色で塗りつぶしたい場合は次の通りです。

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

URLエンコードをする

お決まりのことですが、pathに指定する値は、丸ごと、URLエンコードして下さい。

path=fillcolor%3Agray%7C35.7926211%2C139.8065132%7C35.792116%2C139.81177%7C35.790091%2C139.807445%7C35.791157%2C139.802875

サンプルリクエスト

それでは、正常に地図の画像が表示されるか、確認してみて下さいね。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&path=fillcolor%3Agray%7C35.7926211%2C139.8065132%7C35.792116%2C139.81177%7C35.790091%2C139.807445%7C35.791157%2C139.802875 リンク

ポリゴンを設置した地図
ポリゴンを設置した地図

このように、ポリゴンが設置されれば成功です。線が最後まで結ばれていません。最後まで結びたい場合は、位置情報をもう1つ追加しましょう。位置情報の最初と最後の値は、同じものになりますね。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=16&size=800x400&sensor=false&key={取得したAPIキー}&path=fillcolor%3Agray%7C35.7926211%2C139.8065132%7C35.792116%2C139.81177%7C35.790091%2C139.807445%7C35.791157%2C139.802875%7C35.7926211%2C139.8065132 リンク

最後まで線が繋がったポリゴン
最後まで線が繋がったポリゴン

最後まで綺麗に線で結ばれましたね!線の色や太さを変えて、あなた好みのポリゴンを作成して下さい。

ポリラインエンコード

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

圧縮とは?

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

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:gray|35.7926211,139.8065132|35.792116,139.81177|35.790091,139.807445|35.791157,139.802875|35.7926211,139.8065132

圧縮したパスを指定する場合は、圧縮した位置情報の先頭にenc:を付けて、差し替えて下さい。

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

サンプルリクエスト

圧縮したパスが正常に機能するのか、実際に、下記のURLアドレスにアクセスして、試してみて下さいね。「取得したAPIキー」は、自身のものに変更して下さい。

https://maps.googleapis.com/maps/api/staticmap?center=35.7926211%2C139.8065132&zoom=7&size=800x400&sensor=false&key={取得したAPIキー}&path=fillcolor%3Agray%7Cenc%3A%7BvmyEu%7DhtYbB%7B_%40tK~YuEp%5BcHuU リンク

圧縮する方法

肝心の「どうやって圧縮するか?」ですが、アルゴリズムを理解するのは非常に大変です。なので、ツールを使ってしまいましょう。

公式のツールを使う

Interactive Polyline Encoder Utility
Interactive Polyline Encoder Utility

Googleが公式に提供しているツールを利用しましょう。下記のリンクより、アクセスして下さい。地図上でクリックしていくだけで、エンコードされたデータがフォームに表示されていきます。

Google Maps JavaScript APIを使う

何らかの事情で動的にエンコードしたい場合は、Googleが提供するGoogle Maps JavaScript APIを利用しましょう。

ポリラインエンコードを作成する場合、Google Mapsのライブラリを読み込む時に、パラメータにlibraries=geometryを追加する必要がある点にご注意下さい。

https://maps.googleapis.com/maps/api/js?libraries=geometry

地図上のクリックした全ての位置座標をまとめて、ポリラインエンコードをするサンプルプログラムです。

JavaScript

// グローバル変数
var poly ;

// 地図の出力
function initialize()
{
	// 地図のオプション
	var mapOptions = {
		zoom: 16 ,
		center: new google.maps.LatLng( 35.794594 , 139.7908041 ) 
	} ;

	// 地図の出力
	var map = new google.maps.Map(document.getElementById( 'map-canvas' ) , mapOptions ) ;

	// ポリラインのオプション
	var polyOptions = {
		strokeColor: '#D36015' ,
		strokeOpacity: 1.0 ,
		strokeWeight: 3 ,
		map: map
	} ;

	// ポリラインの出力
	poly = new google.maps.Polyline( polyOptions ) ;

	// イベントの設定
	google.maps.event.addListener( map , 'click' , addLatLng ) ;
}

// ポリラインエンコード化の実行
function addLatLng( event )
{
	// 新しいパスを取得
	var path = poly.getPath();

	// 既存のリストにパスを追加
	path.push( event.latLng ) ;

	// 全てのパスをまとめてエンコード
	var encodeString = google.maps.geometry.encoding.encodePath( path ) ;

	// フォームに出力
	if( encodeString )
	{
		document.getElementById('result').value = encodeString ;
	}
}

// 地図の出力
google.maps.event.addDomListener( window , 'load' , initialize ) ;

HTML

<h2>ポリラインエンコード</h2>
<p>地図をクリックすると、パスが作成されて、フォームにエンコードしたデータが出力されます。</p>

	<h3>地図</h3>
	<div style="position:relative; top:0; left:0; padding-bottom:56.25%; height:0; width:100%;">
		<div id="map-canvas" style="width:100%; height:100%; position:absolute; top:0; left:0;"></div>
	</div>

	<h3>エンコード</h3>
	<p>下記がエンコードしたポリラインです。</p>
	<p><textarea rows="8" id="result"></textarea></p>

このコードの動作を確認する

PHPライブラリを使う

サーバーサイドのプログラムでポリラインエンコードをしたい場合は、下記の非公式ライブラリを使いましょう。

ダウンロードしたgoogle-map-polyline-encoding-tool-master.zipに含まれるPolyline.phpを利用します。

google-map-polyline-encoding-tool-master.zip

  • google-map-polyline-encoding-tool-master
    • src
      • Polyline.php

次のように、ライブラリを読み込み、複数の位置座標を配列形式で指定することで、圧縮したコードを取得することができます。

PHP

<?php

	// ライブラリを読み込む
	require './Polyline.php' ;

	// 複数の位置座標を指定する
	$points = array(
		array( 35.7926211 , 139.8065132 ) ,
		array( 35.792116 , 139.81177 ) ,
		array( 35.790091 , 139.807445 ) ,
		array( 35.791157 , 139.802875 ) ,
		array( 35.7926211 , 139.8065132 ) ,
	) ;

	// ライブラリを使って、複数の位置座標を圧縮する
	$encoded = Polyline::Encode( $points ) ;

	// 表示用
	$html = '' ;

	// HTMLで出力する
	$html .= '<h2>実行結果</h2>' ;
	$html .= '<p>下記の通り、処理しました。</p>' ;

	$html .= '<dl>' ;
	$html .= 	'<dt>元の位置座標</dt>' ;

	// 指定した位置座標の一覧
	foreach( $points as $val )
	{
		$html .= 		'<dd>' . implode( ',' , $val ) . '</dd>' ;
	}

	// 圧縮後のコード
	$html .= 	'<dt>圧縮した位置座標</dt>' ;
	$html .= 		'<dd><mark>' . $encoded . '</mark></dd>' ;

	$html .= '</dl>' ;

?>

このコードの動作を確認する

ビューポートを設定する

zoomパラメータなどでマニュアル調整するのではなく、visibleプロパティを使えば、「中心はここだけど、あそこの場所が必ず入るようにしたい」を自動で調整してくれます。例えば、「竹ノ塚駅」を中心地に指定した地図があります。

https://maps.googleapis.com/maps/api/staticmap?center=%E7%AB%B9%E3%83%8E%E5%A1%9A%E9%A7%85&size=800x400&sensor=false&key={取得したAPIキー} リンク

この地図を表示すると、次のように、竹ノ塚駅周辺だけが表示されますね。

「竹ノ塚駅」の地図
「竹ノ塚駅」の地図

「隣の西新井駅を含んで表示するようにしたい」という場合に、visibleプロパティの値に、「西新井駅」の位置座標、またはキーワードを指定しましょう。

https://maps.googleapis.com/maps/api/staticmap?center=%E7%AB%B9%E3%83%8E%E5%A1%9A%E9%A7%85&size=800x400&sensor=false&key={取得したAPIキー}&visible=%E8%A5%BF%E6%96%B0%E4%BA%95%E9%A7%85 リンク

次のように、「竹ノ塚駅」を中心地にしながら、「西新井駅」(下の方)を含めた縮尺値に自動で調整してくれました。うーん、便利ですねー。

「西新井駅」が含まれる地図
「西新井駅」が含まれる地図

visibleには、複数の位置情報を指定することが可能です。複数、指定する場合には、パイプライン文字(|)で区切って下さい。

西新井駅|35.794237,139.791919|35.795307,139.791999

値は、パイプライン文字(|)を含めて、丸ごとURLエンコードして、指定する必要があります。

visible=%E8%A5%BF%E6%96%B0%E4%BA%95%E9%A7%85%7C35.794237%2C139.791919%7C35.795307%2C139.791999

Retina Displayへの対応

個人的にはこの世からRetina Displayがなくなることを願ってやまない昨今ですが…、Google Static Mapsを普通に表示しただけでは、iPhoneなどのRetina Displayでボヤけてしまいます。そんな時には、scaleプロパティを使いましょう。例えば、次の、250x250サイズの地図を見て下さい。

[scale=1]の地図画像

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

[scale=2]の地図画像

この、scale=2というパラメータを加えた地図を、img要素のwidthheightの値に250x250を指定して表示することで、Retina Displayの端末でも地図画像がボヤけない、引き締まった地図画像になるということです。

HTML

<img src="{[size=250x250][scale=2]の地図}" width="250" height="250">

いかがでしょう?次の画像は、Retina Displayで見ても、くっきりとしているはずです。

Retina Displayに対応した地図画像

ダウンロード

この記事内で紹介した、ポリラインエンコードをするサンプルプログラムを配布しています。

ファイル一覧

SYNCER00243
polyline-encode.html Download
polyline-encode.js Download
polyline-encode.php Download
Polyline.php

ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。

Polyline.phpはzipファイルの中に含まれていません。

Download Zip