Close

Web技術Tips

Homepage Tips Homepage Tips

ホームWeb技術Tips【2018年8月版】Google Mapがエラーで表示されなくなった場合の直し方

SHARE

SHARE

API 2018.08.31(公開)

【2018年8月版】Google Mapがエラーで表示されなくなった場合の直し方

Google Map のエラーに新しいバリエーションが増えたようです。

以前からマップがシャットアウトされるエラーはありましたが、今回の新しいエラーはマップが薄暗くなり、アラートが表示されるというものです。

エラーの対処方法

以前は見れたのに、いきなり見れなくなったという場合は、次の方法でだいたい解決します。

API キーをまだ発行していない場合

以下の記事を参考に、GCP のアカウントを作成して API キーを発行してください。

認証情報を登録し、有効な API キーを手に入れたら、これまで使用していた Google Maps JavaScript API の呼び出しを更新します。

<script src="//maps.googleapis.com/maps/api/js?key={ここにAPIキーを入れます}"></script>

API キーを発行し、呼び出しを更新したのにまだエラーになっている

その場合、確認するべきなのは以下の 3 点です。

  1. JavaScript の読み込みや記述に誤りはないか?
  2. API の認証情報に誤りはないか?
  3. Google Maps Platform のプロジェクトに有効な請求先アカウントが紐付いているか?

JavaScript の読み込みや記述に誤りはないか?

HTML に記述した API キーが間違っていたり、マップ生成のための js が間違っていないかを確認します。

API の認証情報に誤りはないか?

認証情報の登録で、アプリケーションの制限や API の制限を指定している場合は、登録情報が間違えていないかを確認します。

特に、HTTP リファラーで制限している場合はアスタリスク(*)の指定が抜けているかもしれません。

Google Maps Platform のプロジェクトに有効な請求先アカウントが紐付いているか?

使用するプロジェクトと請求先アカウントが紐付いてない場合にもエラーが表示されます。

紐付いているかの確認はメニューの [お支払い] から [請求先アカウント] > [請求先アカウントの管理] から請求先アカウントの管理画面へ行きます。

[マイプロジェクト] のタブを選択し、プロジェクトに請求先アカウントが登録されているかを確認してください。

なにがアップデートされたのか

2018 年 6 月 11 日 に Google の API に関するアップデートがあり、API の管理が『Google Map Platform』という新設されたサービスでの管理になりました。

Google Map の API に関するアップデートは数年前にも行われていて、そのときは API キーなしでマップを表示させようとした新規ドメインサイトにエラーが出るようになる更新でした。

しかし今回のアップデートで、これまで API キーなしで利用できていた Google Map にさらに別のエラーが出てしまうようになりました。

アップデートの詳細

詳しくは Google のユーザーガイド に書いてあります。

乱暴に要約すると、「Google Map を管理する新しいサービスを作ったよ。それで管理方法とか料金体系が変わったから各自対応してね。従わないユーザーはアラートとか出して使いづらくしてやるぜ。」ということです。

管理方法の変更

Google Map の管理は、Google Cloud Platform(GCP)という Google のクラウド系サービスを管理をしているプラットフォームに統合されるので、ヘッダー部分が Google APIs から Google Maps Platform に変わります。

画像の通り、管理する場所が変わったと言っても管理画面そのものは以前のままです。

料金体系の変更

いままでは Google Map の無料表示回数は1日 25,000 回まで、つまり1ヶ月だいたい 750,000 回だったのですが、新しい料金体系では、まず $200 の無料クレジットがあり、マップを表示すればするだけ無料クレジットが減っていきます。

そして無料クレジットを使い切ると課金されるという仕組みです。

つまり知らないうちに課金されていた、という事態になり得ます。

無料クレジットはいちアカウントにつき $200

$200 ドルでマップを表示できる回数は、通常の Google Maps JaveScript API ならば月間 28,500 回ほどです。

ここで気をつけないといけないのが、この $200 という無料クレジットがアカウント単位だということです。

クライアントを多数抱えていて、認証情報の発行も代行している場合は、使用量は認証情報全体での合算となるので、ウッカリ無料クレジットを使い切らないように注意します。

通常の Google Maps JavaScript API なら $200 で 28,500 回なので、計算上は 142.5 回で $1、約 1,000 回で $7 課金されます。普通に高いですね。

課金を回避する方法

突然、高額なサービスに変貌した Google Map ですが、課金だけは防ぎたいものです。

いくつか対処法を考えました。

Web サイトごとに GCP に登録し、請求先アカウントを作成する

DOE ではこの方法をとっているのですが、クライアントが存在する Web サイトはそれぞれ API 発行の手続きをしてもらい、ウッカリ課金されてしまうことを防いでいます。

GCP の請求先アカウントを量産する

ひとつのクレジットカードから請求先アカウントを複数生成すれば、その分だけ無料クレジットもらえるんじゃない?という仮説に基づいた作戦ですが、どちらかというとセーフに近いグレーゾーンなようです。

この件について Google に問い合わせた方がいました。(下記参照)

Google の回答としては複数の請求先アカウントの作成は許可しているけど、厳密には規約違反に該当する気もする、という感じです。

とにかく複数の請求先アカウントの作成は自己責任でお願いします。

参考サイト

【2018年7月16日発効】GoogleMapAPI(有料)が表示されない場合の原因と対策

iframe での埋め込みを行う

Google Map の共有機能を使って iframe で直接埋め込む方法です。

Google Map の代替サービスを利用する

有名所では Mapbox がありますが、Google Map を捨てて別のサービスを検討するのも手です。

参考サイト

Googleマップが値上げされても「避難先候補」となる代替オンラインマップは豊富に存在している - GIGAZINE

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Xでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。