pickup
Google MAPのAPIキーの取得方法【2019年の方法】

Google Mapをブログ記事に挿入すると、
記事が読みやすくなって分かりやすいですよね~

 

地図が入ると、ユーザーさんも見やすいし、
目的地に辿り着きやすい!

 

地図を載せる方法は、前回も説明したんですが、
2018年以降、プラグインの『simple-map』を使用する際は、
APIキーを取得するように変更になりました。

 

以前のまま使用できている方も、中にはいるそうですが、
新規のサイトには適用されません。

 

私が実際にAPIキーを取得する際、少し手間取ったので、
分かりやすく残しておこうと思います。

 

まだ取得されていない方がいらしたら、ご参考になれば幸いです。

Google MAPのAPIキーの取得方法

調べたら、方法は何通りもあるみたいですね。

試してみて、一番簡単だなという方法を説明しておきます。

Google Map Platformでプロジェクトを作成する

まず、Google Maps Platform にアクセスします。

Maps Static APIをクリックします。

 

 

画面の表示通り、始めましょう をクリックします。

 

上部にある『プロジェクトの選択』をクリックします。

Googleアカウントにログインするよう画面に出ますので、従ってください。

マップ、ルート、プレイスを選択し、続行をクリックします。

Select or created projectの右の矢印を押すと、メニューが出てくるので、
+Create a new priject を選び、NEXTをクリック。

Projects名に、自分の分かりやすい名前をつけて、NEXTをクリックします。

請求先アカウントを作成し、手続きする

 

請求先アカウントの作成 をクリックします。

無料トライアルの設定に入ります。

利用規約を読み、内容に同意したらチェックを入れ、続行をクリックします。
無料トライアル期間が過ぎても、自動的に請求される事はないので
クレジット登録をします。

次に出てきた画面で、あなたのクレジットを登録します。

登録出来たら、下記が表示されます。

OK をクリックします。

APIキーの有効化をする

引き続き、画面に沿ってやっていきますよ~

APIの有効化をしていくので、次へ をクリックします。

はい、これでGoogle Maps Platformの有効化ができました。

あなたのAPI KEYも表示されているので、保存しておきましょう。

APIキーの作成と設定をしよう

APIキーは有効化されたものの、実際にAPIキーを作成します。

今のままでは、誰かがアクセスして使用されてしまう事も可能です。

キーの制限をかける設定も、この勢いでやってしまいましょう。

Google Cloud Platformにアクセスします。

① のプロジェクト名を確認

自分が作成したものでなければ、右の▼を押して変更してください。

APIの概要に移動 をクリックします。

その後の画面で、APIとサービスを有効化をクリックします。
一番最初にアクセスする人は、画面が違っている場合がありますが、
操作は同じです。

 

APIライブラリの画面になるので『Maps JavaScript API』をクリックします。

 

 

Maps JavaScript APIを、有効にするをクリックします。

 

 

有効化されました!

 

APIを追加する場合はサイドメニューの「API」をクリックして「未使用の API」から追加してください。

 

認証確認を設定していきます

一度Google Platformのトップ画面に戻り、メニューのAPIの認証情報をクリックすると、
『認証情報を作成』が出てくるので、クリックします。

認証情報を作成の▼を押すと、候補が出てくるので、
APIキーをクリックしてください。

APIキーが作成されました。

この自分のAPIキーは、メモしておきましょう♪

 

続いて、キーを制限をクリックします。

 

チェックする所
アプリケーションの制限:最初は「なし」にチェックが入っていますが、HTTPリファラー(ウェブサイト)にチェックを入れます。ここで指定したウェブサイトからのリクエストを受け入れるという設定なので、指定しておかないと他のサイトから使用されてしまうんですね(要注意)
実際に制限するウェブサイトのhttp(https)を入力します。
例 → https://*.example.com/* ←赤いテキスト部分が実際に自分のサイトの部分!
補足

①ドメインの配下階層全てにおいてAPI使用を許可する場合

https://.指定のドメイン/*

②サブドメインの配下階層全てにおいてAPI使用を許可する場合

https://*.指定のドメイン/*

次は、下にスクロールしてAPIの制限をします。

キーを制限にチェックを入れる。

▼をクリックすると、APIをどのサービスで使用するかを選択できます。

今回は『Maps JavaScrip API』を選択します。
すると選択中のAPIの所に表示されるので、確認してください。

よろしければ、保存をクリックします。

これで、完了です。

プラグインで使用する際には、ご自分のAPIキーを使用できるようになりました。

まとめ

いかがでしたでしょうか。

せっかくのプラグインを入れたのに、APIキーの設定って難しそうと感じ、
使っていない方もいらっしゃるかも知れません。

実は、私がそうでした。

ちょっと面倒くさいのですが、やってみれば意外と大丈夫。

とはいえ最初は理解し辛い部分もあるかも知れませんが、
ゆっくりやってみてください。

最後まで読んで頂き、ありがとうございました。

今なら無料で使える素材集はこちら

ブログに使う素材に困ったら、チェックしてみてくださいね(☆)

 

 

Twitterでフォローしよう