ワードプレスでGoogleMapsを表示するプラグインを使っている場合はGoogleのAPIkeyが必要になった

この記事は約3分で読めます。

googleapikey.jpgワードプレスで地図表示をするさいに便利なのがグーグルマップを表示するプラグイン。遠田は「Mappress」というプラグインを使っている。住所を書くだけでグーグルマップを表示してくれる便利さが気に入っている。このプラグインから警告がでるようになった。
「Please update your MapPress Settings.」というメッセージである。調べてみると、2016年6月からGoogle Maps API Keyが必須になったようだ。この対応をしないといずれグーグルマップが非表示になってしまうかもしれない。ということで、重い腰を上げて対応することとした。
まず、プラグインの作者らしきページ「http://wphostreviews.com/mappress-faq」をみたが英語のページなので自動翻訳して概要を把握。GoogleにログインしてAPIのキーを取得し、そのキーをプラグイン内に貼り付ければよさそうなことがわかった。

▼無事に作業完了、これでグーグルマップ表示は大丈夫
mappressgoogleapikey.jpg

GoogleのAPIkeyの取得と設置までの手順紹介

まず、Google Developers Consoleにアクセスする。
https://console.developers.google.com/
Googleにログインしていないと使えないの注意)

Google Developers Consoleにログインできたら、新しいプロジェクトを作成する。

googlecloudplatformpj.jpg

プロジェクト名はなんでもよい。今回はドメイン名のドットを外した「sobasindanorg」とした。

次に利用したいAPIを選択する。今回はグーグルマップなのだが、グーグルマップだけでも多数の選択肢があるのがややこしい。上から3番めの「Google Maps JavaScript API」を選択する。

googleapimanager.jpg

次に認証を進める。

googlejavaapiyuko.jpg

認証情報に進むと、途中でIPアドレスを尋ねられる。グーグルマップを表示するWEBサイトのIPアドレスが必須のようだ。
IP広場「http://www.iphiroba.jp/」などで、表示したいWEBサイトのIPアドレスを調べておくといい。また、「Google Maps Geocoding API」と「Google Places API Web Service」も有効にしておく。

途中で設定を間違えた。

上記の取り消し線の設定にするとグーグルマップのところが「Oops something went wrong.」とエラーになってしまった。

正しくは「ブラウザAPIキー」を選択しなければならなかった。設定のしなおし。

brwzkey.jpg

これでOK。

googleapikeyget.jpg

認証情報の追加という画面が最終画面である。
ここで「認証情報を取得する」という欄のところにAPIキーが表示されている。
このAPIキーをコピーして、ワードプレスのMAPPressのBrowserAPIKeyのところに貼り付ける。
あとは保存するだけ。

mappressgoogleapikey.jpgこれでエラー表示はなくなった。