ホームページの会社概要などで Google Maps を利用しておられる方は多いのではないでしょうか。非常に便利なもので当社も利用しています。しかし、レンタルサーバを引っ越しするために、お試しでレンタルサーバを借りて、ホームページが正しく表示されるかテストを行なっていたところ、Google Maps が表示されていないことが分かりました。原因と対処方法をまとめておきたいと思います。
Google Maps が表示されない
1ヶ月間のお試しで借りたレンタルサーバに、現行ホームページのhtmlファイルなどをそのままコピーして動作テストをしていました。すると Google Maps が表示されたいたはずの箇所が下図のようになっていました。
Google Maps が表示されない原因
Google Maps API 無償版の仕様変更に伴い、新規サイトやドメインを変更したサイトは、API キーが必須になったようです。当社の今回の事例では、現行レンタルサーバとお試し期間中のレンタルサーバとでは、ドメイン名が異なっていたことが原因だったようです。
現行レンタルサーバ上のドメイン | coeure.co.jp |
お試し期間中のレンタルサーバ上のドメイン | coeure.mixh.jp |
これまでは、下記のような記述で Google Maps を表示することができていました。
<script src="https://maps.googleapis.com/maps/api/js?"></script>
これからは、下記のように API キー を記入する必要があるようです。
<script src="https://maps.googleapis.com/maps/api/js?key=**********"></script>
本来、Google Maps を利用するにはきちんと登録する必要があり、登録時に Google にキーを発行してもらう必要があります。これまでは、キーを発行してもらうことなく使用することができていましたが、今後、新たなサイトを立ち上げたり、サイトのドメインを変更する場合、きちんとキーを発行してもらわないといけない・・・ということのようです。
では、API キー はどのように取得することができるのでしょうか。その点は、次にご説明いたします。
APIキーを取得し、Google Maps が表示されるように設定する
まず、次のGoogle サイトを開きます。
このサイトの右上に次のようなボタンが表示されますので、「キー取得」ボタンをクリックします。
Google のアカウント情報などを入力すると、下図のような画面が表示されます。
赤で囲った箇所で、プロジェクトを作成するか選択するかします。わたしの場合、ドロップダウンリストから「API Project」を選択しました。
そして、「ENABLE API」をクリックすると下図のように API キーが発行されます。
灰色で塗りつぶしたところに API キーが表示されます。これで、API キーの取得は完了です。取得した API キーは、下記の通り、htmlファイル内で Google Maps を読み込んでいる箇所に記入します。
<script src="https://maps.googleapis.com/maps/api/js?key=APIキーをここに記入"></script>
無償版の利用規約では、マップの表示は25,000回/日という制限もありますので、他のサイトからこの API キーを盗用されないようにしっかり保護しておきたいと思います。
API キーの制限を設定する方法
API キーを取得した画面の右下に「API Console.」というリンクがありますので、そこをクリックします。そうすると、下図のような画面になります。
わたしの場合、「キー制限」欄で「HTTP リファラー(ウェブサイト)」を選択しました。ここでウェブサイトを登録しておくと、登録したそのサイトだけで API キーを使用できるように制限することができます。登録するウェブサイトは、「*(アスタリスク)」を使ったワイルドカード指定が可能です。当社の場合、本番サイトとお試しサイトそれぞれのドメイン以下でのみこの API キーが使用できるように指定しました。最後に「保存」ボタンをクリックして完了です。
Google API Consoleで確認すると、制限する前は、下図のように注意マークが表示されています。
制限をかけると、下図のように注意マークが消えて、制限事項が表示されるようになります。
これで、他のサイトで API キーを盗用される心配もありませんね。今回は、Google Maps が表示されない場合、API キーを記入することで問題を回避する方法をご紹介しました。