Help us understand the problem. What is going on with this article?

Google Maps API について(2018年6月11日→7月16日までに対応が必要!)

More than 1 year has passed since last update.

「Google Maps Platform」というサービスに刷新

まもなく、6月11日より「Google Maps API」は「Google Maps Platform」というサービスに刷新されるため、既存の Google Maps API を使用している場合、設定変更が必要です。

[参照] これまで/変更後の図がわかりやすい。
→ 6月11日以降、Google Maps APIによる地図表示が薄暗くなる/エラーになるケースも――「Google Maps Platform」移行でいったい何が変わる? 利用者は、APIキーと課金設定の確認を - INTERNET Watch
https://internet.watch.impress.co.jp/docs/special/1124760.html

現状(地図が表示されない!)

「APIキーを使用せずにAPIを利用している」 Google Maps を設定しているページでは、一瞬だけ地図が表示された後、以下のようなエラー文言に書き換わりました。(6月5日現在)

エラーが発生しました。
このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。

スクリーンショット 2018-06-05 18.31.45.png

※この例は、随分以前に作成したサイトの久々のデザインリニューアルのため、2016年6月22日から必須になった「APIキー」対応をしていなかったようです。(最近までは動作していた。)

どうすりゃいいんだ

このページを JavaScript コンソールで確認したところ、「DeletedApiProjectMapError」というエラーが出ています。

エラー文言でググると、以下のような解説ページにたどり着きました。

API プロジェクトが Google API Console から削除された可能性があります。JavaScript API ローダに含まれる API キーを作成したプロジェクトを確認してください。Google API Console では、新しい API プロジェクトの作成や新しいキーの取得ができます。詳細については、API キーの取得をご覧ください。

[参照] 「API キーの取得」詳細ページ
→キーの取得、認証 | Google Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
→Google Maps APIを使って、サイト上に地図を表示するまでの流れ | Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/javascript/post12851.html

ざっくり手順

公式サイトを見てもよくわからなかったのであちこちググってみたところ、以下の参照サイトがとてもわかりやすかった!
ざっくりした手順としては以下のようになります。

  • Google Maps Platform」ページ内にある「使ってみる」をクリック
  • 手順に従い、プロジェクトを作成 ※英語
  • APIキーの取得
  • 支払い情報(クレジットカード)の登録
  • 取得したAPIキーを地図表示部分に適用

 
[参照] キャプチャ入りでとても詳しく紹介されています。
→ Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更 | mariweb(まりうぇぶ)
https://www.marie-web.design/blog/google-maps-platform/

課金こわい

一定数までは今まで通り無料で使えますが、それを超えると課金されるようになったため、無償版(Standard Plan)でも、クレジットカードの登録が必須になりました。
※超過した場合は、課金 or 当日中のサービス利用中止のどちらかを選択できます。

「Maps JavaScript API」の例では、
これまでは「25,000リクエスト/日」まで無料だったのですが、
これからは「28,000リクエスト/月」と、大幅に縮小されます。(1日当たりではなく 1ヶ月!)
(しかも、他のAPIを使うと合算されてしまうそう。こんなんすぐ超えてしまいそう!)

※ざっくり計算してみたら、『一般的な企業サイトに地図を載せてる』ぐらいの使い方なら、なんとか無料枠内に収まりそう?(言い切れませんが...)

 
料金設定や使用量についての設定は、上記に挙げた『mariweb(まりうぇぶ)』さんのサイト内の「利用量などの確認方法」「無料枠を超えないように制限をかける方法」という項目でまとめられていましたので、ぜひご参照ください。

 
※大慌てで調べてまとめたので、もし間違ってたらごめんなさいー!

(追記:2018年6月15日)

社内でこの件を発表したところ、
「準備期間を設けるため、7月16日までに対応すればよい」
という続報があることを教えていただきました。
(あざますーー!!!)

[参照]
→Google Maps Platformの適用開始が7月16日に延期 @dream+PLUS
https://ring-and-link.co.jp/dream2000/user/notice/web/2479

(あとで調べる)

Q. Maps「Embed」は、実質無料??

月の利用量 月額無料枠(200ドル分)
0−100,000
1,000コールあたりの料金
100,000以上
無制限 $0.00 $0.00

 

A. 無料でした!! (2018年6月20日追記)

なお、高さや幅が 200 ピクセルのサイズより小さい埋め込みマップはサポートされていません。

Google Maps Embed API の URL を iframe の src 属性として設定することにより、ウェブページやブログに簡単に埋め込むことができます。 (中略) Google Maps Embed API に使用制限はありません。 使用制限や 1 秒あたりのクエリのスロットリングを気にせずに、マップやストリートビューのパノラマ画像を高トラフィックのウェブサイトに埋め込むことができます。

 
[参照] 設定手順、カスタマイズ方法なども。
→ Google Maps Embed API | Google Maps Embed API | Google Developers <公式>
https://developers.google.com/maps/documentation/embed/guide?hl=ja
→ Google Maps Embed APIで手早くGoogle Mapをサイト内に埋め込む!カスタマイズもかんたん! | イリテク
https://iritec.jp/web_service/9050/

 

変更なし(iframeの地図)

→ サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに | 編集長ブログ―安田英久 | Web担当者Forum
https://webtan.impress.co.jp/e/2018/06/26/29696
Googleマップのサイトから埋め込んでいるiframeの地図は変更なし。
ただし、一般向けの無料公開ページで、モバイルアプリではないという条件あり。
(利用の条件や制限が変わる可能性があることに注意!)

umeume66
マークアップやってます。 最近はフォント周りを主にチェック中。
https://twitter.com/umeume66
tam-tam
TAM はパートナー型デジタルプロダクションです。
http://www.tam-tam.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした