Google Mapの警告が出ている場合の原因と対応方法 【Google Map API キー発行 方法】

改めてGoogleMapの利用方法

ウェブ上でGoogle Mapを使うにはiframeを埋め込むか、Google MAP APIを利用するかになります。

iframeだと場所ごとにタグを用意する必要になるため、普段はAPIの利用をメインにしています。

前述した、用意してもらったテンプレのタグが以下です。

見た時に思ったのが「おやAPIキーがない？」しかし地図は表示されていたのでAPIキーなしでも使えるようになったのかなぁ。ぐらいにしか思ってませんでした。

<script type="text/javascript" src="//maps.google.com/maps/api/js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var lat = XXXX;
var lng = XXXX;
var latlng = new google.maps.LatLng(lat, lng);
var map = document.getElementById("gmap");
var options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapObj = new google.maps.Map(map, options);
var marker = new google.maps.Marker({
position: latlng,
map: mapObj
});
});
</script> 

地図は表示されいてるがConsoleログには警告が

NoApiKeys Warning You can generate a new API key on the Google Developers Console.
やはり「APIキーが無いから生成しろ」と警告がでていました。警告は出ていますが表示されるのは知りませんでした。

NoApiKeys    Warning
The script element that loads the API has no API key. Please make sure you include a valid API key as a key parameter. You can generate a new API key on the Google Developers Console.
See Obtaining an API key.

画面にこのように表示される場合もあります。

エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。

このエラーが出る理由は、2016年6月22日よりGoogle Map APIを利用したマップをを設置する際、APIキーが必須になったためです。

APIキーの発行

やはりAPIキーは必要なのでAPIキーを発行します。

Get a Key/Authentication  |  Google Maps JavaScript API  |  Google Developers

上記URLの「GET A KEY」をクリック

新しいプロジェクトを作成のまま「続行」をクリック

認証情報の画面が表示されたら、利用するドメインを入力します。ここで指定するのはその他のサイトに埋め込んで使われないようにするためのものです。（指定したHTTPリファラーからのリクエストのみ受け付けるというもの）

ドメインを入力後、作成ボタンを押すとAPIキーが生成されます。

先ほど生成したAPIキーを読み込みスクリプトの引数として設定します。設定は以上です。

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=XXXXXXXXX"></script> 

APIエラー

早速APIキーを設定したところエラーが・・・

今度は先ほどの警告（Warning)とは違って完全にエラーになってしまいました。

しかもドメイン設定したのに、RefererNotAllowedMapErrorと許可していないドメインからアクセスしているかのようなエラーです。

RefererNotAllowedMapError    Error
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.
See API keys in the Google Developers Console. For more information, see Best practices for securely using API keys.

よく見たら、APIキー生成する部分に「設定が有効になるまで、最大で5分かかることがあります」と書いているじゃないですか（苦笑）時間を少し置いたらそのままでエラーはなくなりました。

最後に

頻繁にAPIキーを発行するわけではないので、時間が空くと手順が抜けてしまいますね。。

最後のエラーに関しても今まではAPIキー発行後、すぐ反映されていたのでエラーの原因がわからず焦ってしまいました。

APIキー発行～埋め込み後は一呼吸おいて確認してみましょう（笑）