【Google Maps】マップが表示されない場合の原因と対処方法

ホームページの会社概要などで 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 Console

 

このサイトの右上に次のようなボタンが表示されますので、「キー取得」ボタンをクリックします。

 

 

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 キーを記入することで問題を回避する方法をご紹介しました。

>コアース株式会社

コアース株式会社

業務システム開発一筋32年

コアースは、オーダーメイドでシステム開発を行う大阪の会社です。 特に中小企業様のニーズにぴったりなシステムをご提案いたします。

CTR IMG