ウェブと食べ物と趣味のこと

読者です 読者をやめる 読者になる 読者になる

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

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

サイト運営

スポンサードリンク

f:id:photoblg:20160311223035j:plain

更新:2016/11/11

追記:10月12日以降、無償で利用できるAPIの1日の上限が1日2万5000回となり超過した場合の料金は、1000リクエストで0.50ドルかかるようになりますのでご注意ください。

Free until exceeding 25,000 map loads per 24 hours

After exceeding the free usage limits, billing at $0.50 USD / 1000 additional requests, up to 100,000 per 24 hours.

引用:JavaScript API Usage Limits  |  Google Maps JavaScript API  |  Google Developers

なお課金はクレジット登録、課金(ENABLE BILLING)を有効にする必要があります。

以下のページが詳しいです。

internet.watch.impress.co.jp



こんにちは。GoogleMap使ってますか?
ウェブサイト上に場所をわかりやすく表示したり、スマホからナビで使ったりとGoogleMapはとても身近なものとなっていますよね。

先日デザイナーが用意したテンプレに、GoogleMapが埋め込まれていたのですが、何やらいつもと様子が異なっていました・・・。

改めてGoogleMapの利用方法

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

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ログには警告が

f:id:photoblg:20160311225538j:plain

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.

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

f:id:photoblg:20160821011344p:plain

エラーが発生しました。このページでは 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」をクリック
f:id:photoblg:20160311230248j:plain

新しいプロジェクトを作成のまま「続行」をクリック
f:id:photoblg:20160311230404p:plain

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

f:id:photoblg:20160311230732p:plain

ドメインを入力後、作成ボタンを押すとAPIキーが生成されます。
f:id:photoblg:20160311231956j:plain

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

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

APIエラー

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


f:id:photoblg:20160311232606j:plain

今度は先ほどの警告(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.

f:id:photoblg:20160311233315j:plain

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

f:id:photoblg:20160311233614j:plain

最後に

頻繁にAPIキーを発行するわけではないので、時間が空くと手順が抜けてしまいますね。。最後のエラーに関しても今まではAPIキー発行後、すぐ反映されていたのでエラーの原因がわからず焦ってしまいました。

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

スポンサードリンク