このエントリーをはてなブックマークに追加

Google Maps Embed API 無料・使用回数制限なしの地図

更新:

私のサイトの Embed を使った一部の地図に「このページでは Google マップが正しく読み込まれませんでした。」とエラーが出て、地図が表示されていないことに気づいた。 今まで Embed API はすべて無料で使えたが、2018年に Maps 関連にいろいろ変更があり、Embed にも制限が付いたようだ。

2018年現在の料金プランは 料金表 | Google マップ プラットフォーム に書かれている。 Embed は、通常の Embed と Embed Advanced に分かれて、Advanced は有料になった。

ただの Embed で使えるのは Place モードと View モードで、使用無制限となっている。 Directions、Search、Street View の各モードは Advanced、つまり有料。 私のサイトでエラーが出た地図は Search モードを使っていた。 それを Place に変更したところエラーが出なくなった。 Place でも場所に関するクエリーを送って地図を表示できるので、とりあえずこれが使えれば今までどおりやっていけそうである。

仕様と使い方

この地図は要するにGoogleマップで[共有]→[サイトに埋め込む]でやってることとほぼ同じだが、埋め込みと違うのはクエリーを自分で指定しやすい点。

Google Maps Embed API のデベロッパーガイドのページ Developer Guide | Maps Embed API に導入方法や仕様、サンプルが書いてあるので、この通りやればできる。

Google Developers Console にログイン後、「Google Maps Embed API」の「割り当て」タブを見るとマップ表示は1日200万回と書かれていて、それ以外は無制限となっている。

Google Maps Embed API の導入手順としては

  1. APIキーを取得する。
  2. iframeでサイトに地図を貼り付ける。

の2ステップだけ。

上述のデベロッパーガイドのページにも書かれているGoogle Developers Consoleのリンクからログインして API キーを作成する。 一応日本語に対応しており、手順通りに進めればAPIキーを作成できる。 この Console では様々な API を管理できるが、Google Maps Embed API の API キーを作り、それを有効にする。

左のメニューの[ダッシュボード]をクリックすると、右のページの下に有効なAPIのリストが表示される。 左のメニューの[認証情報]でAPIキーの作成、編集、削除ができる。 APIキーの設定には、APIキーを使用するサイトのドメインやサーバのIPアドレスなどを指定(制限)できる。

Google Maps Embed API は他の Maps API と比べると機能は少ないが、使い道はあるだろう。 以下のような機能(マップモード)がある。

Basic Map Modes(無料)

  • Place モード
    特定の場所や住所を表示する。
  • View モード
    マーカーやルートが表示されていない地図を表示する。

Advanced Map Modes(有料)

  • Directions モード
    2箇所以上の指定された地点間のルートと、距離や移動時間を表示する。
  • Search モード
    検索した結果を表示する。
  • Street View モード
    ストリートビューを表示する。

そして以下のような HTML をページに貼る。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

これはPlaceモードの例で、Searchモードの場合はURLのplaceの部分をsearchに、Directionsモードの場合はdirectionsに変える。 YOUR_API_KEY は自分のAPIキーを使う。

SearchとPlaceは、Googleの検索結果と同じように必ずしも正確とは言えず、クエリに指定したワードの位置を正しく表示するとは限らない。 ただ、場所を一意に識別するプレイスIDが使用でき、プレイスIDが分かればより正確に位置を表示できる。

また、以下のパラメータを付加でき、省略しても良い。

  • center
    マップの中心をコンマ区切りの緯度と経度の値(35.658611,139.745556 など)で指定。 ちなみに仕様にはないが、通常の地図検索と同様、PlaceまたはSearchモードのクエリ「q」に緯度、経度をカンマで区切った値(35.658611,139.745556 など)を指定することでその場所の地図を表示することができる。
  • zoom
    マップのズームレベルを設定。 指定できる値の範囲は 0(全世界)~21(個々の建物)まで。 上限は、選択した位置で使用できるマップデータによって異なる。
  • maptype
    マップのタイプを指定する。 roadmap(デフォルト、道路地図)またはsatellite(航空写真)がある。
  • language
    言語の設定。 指定しない場合は閲覧者の言語環境で表示。
  • region
    地政学的区別に基づいて、表示する境界やラベルを適切に定義する。 2文字のccTLD値で指定される地域コードを使用する。

このエントリーをはてなブックマークに追加