APIの登録をしてGoogle Mapsを表示させる

前回、画像が突然表示されなくなり、ようやく直したと思ったら…

今度は地図が表示されなくなりました。

トホホです。

 

Wordpressの画像が突然表示されなくなった

 

調べてみたら「Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります」とのことで、突然Google Mapsが表示されなくなるケースがあるようです。

 

私はAPIを登録したはずなのですが、このAPIが古いバージョンの場合もエラーとなり地図が表示されなくなるそうです。

Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります

 

APIを取得する

 

Google Maps APIs for Web

 

右上にある「キーの取得」をクリック。

 

 

ポップアップが出てきたら yes にチェック。

 

 

 

表示されたAPIキーをコピーしてメモ帳などに貼り付け保存。

 

 

→ FINISHをクリック。

 

APIを有効に設定

 

API Manager

 

リソースの選択をクリック。

 

 

  • 「すべて」をクリック
  • 「My Project」を選択して、右下の「開く」をクリック

(もしくは新しいprojectを作成します。project名は自分が分かりやすい名称でOK)

 

 

ライブラリに移動してGoogle Maps API全てを有効に設定します。

 

 

  • Google Maps Android API
  • Google Maps SDK for iOS
  • Google Maps JavaScript API
  • Google Places API for Android
  • Google Places API for iOS
  • Google Maps Roads API
  • Google Static Maps API
  • Google Street View Image API
  • Google Maps Embed API
  • Google Places API Web Service
  • Google Maps Geocoding API
  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Geolocation API
  • Google Maps Elevation API
  • Google Maps Time Zone API

 

使用するwebサイトを設定

 

API MANAGER google

 

  1. 認証情報
  2. ドメインの確認
  3. ドメインを追加

 

 

ドメインを入力して「ドメインを追加」をクリック。

 

 

認証情報の「API Key」をクリック。

 

 

 

キーの制限「HTTPリファラー(ウェブサイト)」にチェックを入れる。

 

 

四角の部分にドメインを入力して「保存」をクリック。

 

*.example.com/*(サブドメインありの場合)

example.com/*(サブドメインなしの場合)

 

当ブログの場合は次のようになります。

 

*.zbnr-hp.com/*

zbnr-hp.com/*

 

APIキーの使い方

 

ページのヘッダー(又はフッター又はbody内)に Google Maps用のScriptを読み込むコードを追加します

key=XXXXXXXXXXXX の箇所にAPIキーを入れます。

 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXX&callback=initMap"
  type="text/javascript"></script>

 

WordPressの場合は親テーマの「header.php」に追加します。

手順はアドセンスの二次審査でコードを貼りつけた時とほぼ同様です。

 

Google AdSense 38時間で一発合格。エックスサーバー&WordPress【2017年2月】
グーグルアドセンスの審査を、一発で合格することができました。申請から「おめでとう」メールが届くまで、僅か1日半(38時間)。記念に、合格までの流れとコツのようなものを記しておきたいと思います。まずは独自ドメイン。必須です無料ブログの場合でも

 

  • 外観
  • テーマの編集
  • header.php。 <head>~ </head>タグの中にコードを挿入
  • 貼りつけたら、下の方にある「ファイルを更新」をクリック

 

APIキーが反映されるまで10分程かかります。

 

認証情報の確認をしたい場合

 

時間が経ってもエラーが出る場合は、こちらから再度APIキーをご確認ください。

 

Google Cloud Platform
Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

 

もしくはダッシュボードの下部を見て、設定が有効になっているか確認します。

有効の場合は「無効にする」と表示されています。