google map APIの変更(2018/06/09追記)

2016/06/09追記:
2018/06/11からGoogle Map APIの課金体系が変更になり、再度マップが表示されなくなる可能性があります。

少し古い話ですが、2016年6月22日から、Google Map APIの利用に開発者向けAPIキーが必ず必要になりました。
そのために、APIキーを使わずに新しくGoogle Mapを作成すると、

Google Maps API error: MissingKeyMapError

というエラーが発生し、地図が表示出来ない場合があります。

そんな時のためのAPIキーいらずのGoogle Map埋め込み方法はこちらです。

APIキーの取得・利用方法

Google Map APIを利用する場合には、Webだけでなく、Androidアプリなどでの利用でも同様の制約を受けるものと思います。

http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html?m=1

The new policies will apply immediately to all Maps API implementations created on or after June 22nd, 2016.

とありますので、6/22以前に作成されたグーグルマップについてはそのまま使える様子です。

APIをご利用の場合はAPIキーを以下のURLから取得して、以下の例のYOUR_API_KEYの箇所に追加してください。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
  type="text/javascript"></script>

 

APIキー取得URL:https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true&pli=1
※URLの記載を変更しました(2016/10/27)

また、Google Mapの埋め込み機能を利用する場合はAPIキーは不要です
自社や数店舗のお店の地図を表示するだけなら、埋め込み形式に変更することをお勧めします。

文末に埋め込み形式でGoogle Mapを表示する方法を記載しています。
非常に簡単です。

 

WordPressのプラグイン、Simple MapなどもAPIキーを設定できるようにはなっていないため、これから作るものについては影響を受ける様子です。
試しにこのプラグインで新しくマップを作ってみましたが、
「Google Maps API error: MissingKeyMapError 」
が出てしまいました。
また、「Google Maps API warning: NoApiKeys」というワーニングだけが出て、地図は表示される場合もあります。

 

どの企業サイト、お店、その他もろもろでもはや必須と言っても過言ではないGoogle Map。
無料で提供し続ける限界を超えたのでしょうか。
死ぬほど儲かってるくせに。
Oracleとの訴訟でも勝ちそうなのに。
うそです。
今まで無料で使わせていただいてありがとう。

でも、ほとんどグーグルマップの埋め込み機能を使っているので、これらかも無料で使わせていただくわけですが。

 

Google Maps APIはAPIキーさえ取得すれば、24時間に1,000個以内しか地図を表示しないのであれば無料で使えます。
それ以上、150,000個以下も無料ですが、クレジットカードの登録が必要です。
150,000を超えたら自動的に課金されるのかと思ったら、エラーが出るようになる様子。
そこは優しさなのか、何なのか。

https://developers.google.com/places/android-api/usage


Google Mapを埋め込む方法

非常に簡単な手順で埋め込むことが出来ます。

1.まず、ブラウザでGoogle Mapを使い、目的の場所を検索して表示します

例ではあべのハルカスを表示しています。

embed_map2

2.左上の赤丸で囲っているハンバーガーメニューをクリックすると、左サイドにメニューが表示されます。
そこから、「地図を共有または埋め込む」を選択してください。

embed_map3

3.表示されたダイアログから「地図を埋め込む」を選択し、選択状態になっているHTMLコード(反転表示されている<iframe src=””….の部分)をコピーします。
※利用規約に同意した上で。もちろん。

embed_map5

4.その内容を地図を表示するHTMLにそのままペーストします。
CMSであれば、地図を表示する箇所にペーストします。
ペーストしたのが下の地図です。

※追記
APIキーを追加しても以下のエラーが出る場合、APIキーに紐付けられているリファラーの記述が間違っているかもしれません。

Google Maps API error: RefererNotAllowedMapError 
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: ~

Googleの入力例では

*.example.com/*

となっています。

http://www.example.com/

example.com

といった記述で登録するとAPIを呼び出しているURLとマッチしないので、上記エラーが発生するようです。

Google Map APIの課金体系が変更になります

2018/09/06追記:

基本的には有料になりますが、月額200ドルまでは無料枠として使えます。
Google Map APIを利用しているユーザーには「[Action Required] Changes to your Google Maps APIs account」というタイトルのメールが来ているかと思います。
要点だけ記述すると、

  1. 月額使用料のうち、200ドルを無料枠として提供します。
  2. 請求先アカウントを有効にして、Google Maps Platformプロジェクトに関連付ける必要があります。

2番目がクセモノっぽいですよね。
アカウントで請求を有効にする手続きが必要です。
下記サイトに詳しいですので、参考に作業してみてください。

Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更