Google Mapsが表示されない時はカードの登録とプロダクトの紐づけが必要

JAVASCRIPT

Google Mapsの仕組みが2018年6月11日から変更になった影響で、APIを使用して読み込んでいる地図はクレジットカードの情報を設定しないと表示され無くなりました。

私の会社はデザイン会社というのもあり、地図の色を変えたりオリジナルのアイコンを立てたりする事が多いので大概の地図がダメになってました(^^;)

元々Google Maps APIは無料分が多くあったので無料で利用できていたのですが、これがかなり減ってしまい、意図しない課金が発生しないようにする為なのか1日のリクエスト上限が1に自動で設定されているのが原因です。

無料分が減ったとは言えプロダクト1つにつき、月に約2万8000回は無料でリクエストできますので、十分無料で利用する事ができます。ただ、割り当てを変更するにはクレジットカードの登録が必要になります。

APIキーの取得やGoogle Maps Platformへの登録は結構前からの話ですので、既に行っている前提で記載していきます。

エラーの種類

1日のリクエスト上限を過ぎた場合、下記のように「このページではGoogleマップが正しく読み込まれませんでした。」という表示が出るようです。

リクエスト回数ではなく、使用しているプロジェクトの課金設定が出来ていない場合、下記のように「エラーが発生しました。」と表示されるようです。

カード情報を登録する

カード情報を登録していない場合は、まずカードの登録を行います。

画面左上のハンバーガーメニューから「お支払い」をクリックします。

 

下の画面のようになると思いますので「請求先アカウントを管理」をクリックします。

 

初めて登録する場合は「請求先アカウントを追加」が表示されていると思いますのでクリックします。

既に存在している場合は下記の画面になると思いますので、左上の方にある「アカウントを作成」をクリックします。

余談ですが私のアカウントは「ステータス」の部分が「廃止」になっている請求先アカウントがありました。いつ作ったか覚えていないのですが、色々試しても廃止を有効に変える方法はわかりませんでした。結局新しいアカウントを追加して、廃止になっているアカウントを消す事で対処しました。

 

好きな請求先アカウント名を入力して「続行」を押します。初めての場合は利用規約の同意画面が間に挟まります。

 

初めから日本になってると思うので「確認」を押します。

必要な情報を入力して「送信して課金を有効にする」を押します。

最初「送信して」を「送金して」と読んでしまい、いきなりお金取られるの?と勘違いしてしまいましたがそんな事はありませんでした。遠慮なく押してください。

アカウントが出来たかと思います。

あとはプロジェクトと、請求先アカウントを関連付けて、割り当てを変更すればGoogle Maps APIが使用できるようになります。

プロジェクトと請求先を関連付ける

プロジェクトを選択した状態にします。画面左上のハンバーガーメニューから「IAMと管理」にマウスを合わせ「割り当て」をクリックします。

 

「Map loads per day」の上限が1になっているかと思いますのでクリックします。

Map loads per day = 1日あたりの上限
Map loads per 100 seconds = 100秒ごとの上限
Map loads per 100 seconds per user = 1ユーザーの100秒ごとの上限

 

割り当ての上限を0~1でしか指定出来ません。1日1回しか地図が表示されないのでは全く意味がありませんね。。

「このプロジェクトの課金を有効」をクリックします。

 

「請求先アカウントをリンク」をクリックします。

 

先ほど作成した「請求先アカウント」が表示されていると思いますので「アカウントを設定」をクリックします。

 

これで紐づけが完了しました。

最初は割り当てを変更しようとすると、1日当たり0~1の数値しか入力出来なかったと思いますが、今は好きな数値で割り当てられるかと思います。

ただ、注意しないといけないのが無料で使用できるのが1月あたり28,000回という事です。

これを31日で割ると1日約900回になります。

二つのサイトで利用する場合はそれぞれ450回ずつとなりますので、しっかり割り当てを行ってください。

また、APIキーはソースを見るとわかってしまいますので、勝手に使用されないように

「ハンバーガーメニュー」→「APIとサービス」→「認証情報」と進み、設定したいAPIキーをクリック、「ウェブサイトの制限」に表示するサイトのURLを記載して下さい。

タイトルとURLをコピーしました