Googlemapsが表示されない場合の解決方法（APIキーによるグーグルマップの再設定）
グーグルマップが表示されないのはAPIキーが設定されていないからである事が多いです。
Google Cloud PlatformでAPIキーを発行する事ができますが、無料ではなく一定表示数以上は課金されます。
APIキーには利用ウェブサイトやAPIの制限を掛けるべきです。
Googlemapsは表示されていますか？
あなたのWEBサイトのグーグルマップは今きちんと表示されていますか？今一度確認してみましょう。
グーグルマップが映らない状態になっているWEBサイトを今でもよく見かけます。
もし映っていないようだったら、設定を少し変えればすぐに復旧します。
Googlemapsが表示されない理由
グーグルマップが表示されない理由はズバリ、グーグルマップを読み込む「リファラー」部分にAPIキーが設定されていないからです。
リファラーにAPIキーの記述が必要
リファラーとはヘッダーで読み込むjavascriptコードの部分です。
以前までのグーグルマップのリファラー例
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
今後必要になるグーグルマップのリファラー例
<script src="https://maps.googleapis.com/maps/api/js?○○○APIキーがここに入る○○○"></script>
以前までの「sensor=false」のままだと表示がされない訳ですね。
Google Maps APIのアップデート
2016年6月22日に、Google Maps APIsの仕様が変更されるアップデートがありました。
Googleが発行管理するAPIキーを入れていないリファラーはエラーとなり、Googlemapsが表示されなくなるものでした。
ただしこれは、APIキーを入れていない「新規ドメインサイト」に限定されたものでした。
つまりそれ以前からAPIキーなしで運営をしていたWEBサイトには影響はなかったのですね。
さらなるアップデート
2018年6月11日、GoogleのAPIに関するさらなるアップデートが行われます。
まずAPIの管理が「Google Cloud Platform」というサービス内での管理になります。
そしてこれまでAPIキーなしで利用できていたWEBサイトも、APIキーがないとGoogleMapsが表示されなくなったのです。
APIキーについて
APIキーとは
今後GoogleのAPIを利用する際は、ヘッダーのリファラー部分にGoogleから取得した認証コードを追記しなければなりません。
これが「APIキー」と呼ばれるものです。
逆にこのリファラー以外のところ（Googlemapsの位置を指定するコード部分）を変更する必要はありません。
APIキーを付ければきちんと映る様になります。
APIキーはドメイン単位で管理
APIキーはたくさん発行できるので、ドメイン単位で管理しておきましょう（限定の仕方は後述します）。
複数サイトを所有しているのであればそれぞれに発行するのがセオリーです。
それにより管理者自身がそれぞれのサイトのGooglemapsの表示数を確認・管理する事ができるためです。
APIキーが発行された理由は料金体系の変更
Googleはこれまで実質無料で提供していたGooglemapsに対して方向転換をします。
APIキーを設定し、URLごとの地図情報がどれくらい表示されているかを測定できる様にしましたね。
さらにそれが定められた一定数値を超える場合は、有料扱いにした訳です。
※それまではめったに有料になる事はありませんでした（1ヶ月およそ750,000回まで無料）。
無料枠がぐっと小さくなる
新しく設定された定数上限は、月28,500回程度（200ドルの無料クレジット内）です。
しかもこの定数上限は、Google Cloud PlatformでAPIを管理する「Googleアカウント単位」で決定します。
つまり一つのGoogleアカウント内で複数サイトのAPIキーを運営している場合は、複数サイトの合計総表示数が算出対象になります。
PV数の多いWEBサイトは注意
通常のWEBサイト単体であっても、場合によっては月28,500回の許容量を超えてしまう可能性があります。
それを超えると140回程度につき1ドル程度が課金されるようになります。
この辺りはGoogle Cloud Platformで確認ができますので、PV量が多いWEBサイトは注意が必要です。
それでは次項より、APIキーを取得する方法をご紹介していきます。
Google Cloud Platformへのログイン
まずGoogleアカウントでログインした状態で下記サイトへいきます。
Google Cloud PlatformはGoogleが提供する全てのAPIを管理するサイトです。
※Googleアカウントを持っていない場合はアカウントを作成してくださいね。
プロジェクト作成・選択
Googleの各サービスを利用するにあたり、まずはプロジェクト名を決定する必要があります。
名前を決めておけば、各プロジェクトごとにサイトや利用サービスを分ける事で管理ができますよね。
サイトに入ったら、上部の青いバー欄にある「プロジェクトの選択」をクリックします。
プロジェクトの新規作成
表示されたプロジェクトの選択欄の右上にある「プロジェクトの作成」をクリックします。
プロジェクト名と場所（任意）を決定して作成をします。
再度プロジェクトの選択を選び、作成したプロジェクト名を選択して右下の「開く」をクリックします。
APIの有効化
左のハンバーガーメニューから「APIとサービス」を選択します。
APIとサービスのダッシュボードページが表示されます。
ライブラリからMap Javascript APIを探す
まずGooglemapのAPIが使える様にする必要がありますので、メニュー欄から「ライブラリ」を選択します。
ライブラリの中で「Map Javascript API」を探してクリックしましょう。
開いたページにある「有効化にする」をクリックしてMap Javascript APIのAPIを有効化してください。
APIキーの生成
有効化が完了したら、先程と同様に左のハンバーガーメニューから「APIとサービス」を選択します。
APIとサービスのダッシュボードが表示されますので、次は左のメニューから「認証情報」をクリックします。
認証情報ページに来たら、上にある「認証情報の作成」をクリックします。
表示されるプルダウンメニューから「APIキー」をクリックしましょう。
キーを制限する
「APIキーを作成しました」の画面が表示されますので、右下にある「キーを制限」をクリックします。
「キーを制限」を押さずに閉じてしまった場合は、作成したAPIキーの欄右端にある「鉛筆マーク」を押しても進めます。
APIキーの制限
まずAPIキーに名前を付けます。Googlemapsを使うWEBサイト名でよいと思います。
ウェブサイトの制限
次にアプリケーションの制限の欄から「HTTPリファラー（ウェブサイト）」を選択してください。
ウェブサイトの制限の欄が表示されます。
「項目を追加」を押して、このAPIキーを利用するWEBサイトリファラー（URL）を設定します。
新しいアイテムのリファラー欄に入れる正規表現
ここは正規表現を使った設定になります。
*.ドメイン名/*
例：*.lpeg.info/*
この正規表現による設定を使えば、サイト内でも利用先を限定することができます。
※設定中ページ右の欄に正規表現の詳しい書き方が書いてあります。
さらに項目を追加すれば複数のURLを登録できます。1つのAPIキーを複数のURLで利用する事もできる訳です。
ウェブサイトを制限する理由
ウェブサイトを制限する理由は、以下の様な不正を防止するためです。
他人のAPIキーでGooglemapを表示させる不正
通常ページソースでヘッダー部分を見れば、javascriptコードとAPIキーが確認できます。
このAPIキーをコピペされ、第三者が持つ別サイトに張り付けて利用されてしまう可能性がありますよね。
この様に自分のAPIキーを制限しないままだと、ページのソースから勝手に使われてしまうリスクがあるのです。
しかしウェブサイトの制限を掛けていれば、このAPIキーを別WEBサイトに貼られてもドメインが違うので、グーグルマップは映りません。
APIの制限
利用するのはGooglemapsですが、Google Cloud Platformには他にも様々なAPIがあります。
他のAPIを利用する際にもこのAPIキーが認証として使える訳です。
ここではGooglemapsに限定するためにAPIを制限します。
「キーを制限」の方にチェックを付けて、選択項目の中から「Maps JavaScript API」を選択します。
前の手順でAPIを有効化していないと、ここで選択項目に表示がされません。
最後に「保存」を押して終了です。
APIキーをコピーペーストして完了
このAPIキーをコピーしてリファラー（javascriptコード）部分の後ろに貼れば、Googlemapが表示される様になります。
注: Googlemapが表示される様になるまで最大5分程度掛かることがありますので、しばらく待ちましょう。
iframeによる埋め込みは問題なし
APIキーを使わずにGooglemapsのiframe埋め込みコードを使っているのであれば、表示がされなくなる事はありません。
単にGooglemapsの地図情報をiframeで表示しているだけだからです。
その代わりMAP上で自由度はあまりありません。会社所在地の上部にラベルマーカーを付けたりする事もできないのです。
iframeによるGooglemap表示
それでも問題がない（場所が映っていればOK）というのであれば、無理にAPIキーを取得する必要はないでしょう。
そうでなく所在地に会社名等をきちんと明記しておきたいのであれば、APIキーを取得して設定しておくべきです。
