0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【2021版】Google Maps APIの取得方法

Posted at

はじめに

Googleマップを実装したい場面は多々ありますよね。
そのためには、まず APIを取得する必要があります。
その手順について見ていきましょう。

Google Maps APIの取得方法

  1. Google Cloud Platformにアクセスします。
  2. ヘッダーの左側にある「プロジェクトを選択」をクリックします(以前作成して選択していたプロジェクト名が表示されている場合もあります)。
  3. ダイアログの右上の「新しいプロジェクト」をクリックします。
  4. プロジェクト名を記入し、「作成」ボタンをクリックします。
  5. 2)でクリックした箇所をクリックし、作成したプロジェクト名をクリックした上で、右下の「開く」をクリックします。
  6. APIとサービスという画面が開かれていると思うので、「+APIとサービスの有効化」をクリックします。
  7. APIライブラリのページに遷移するので、マップという項目の「すべて表示」をクリックします。
  8. 一覧が表示されるので、「Maps JavaScript API」をクリックし、ページ遷移後、「有効にする」ボタンをクリックします。
  9. APIページに戻るので、左側の「認証情報」をクリックし、ページ遷移後、上部の「+認証情報を作成」をクリックします。
  10. ダイアログが表示され、「自分のAPIキー」が表示されるので、それをコピーしてクリップボードなどに貼り付けて保存しておきます。
  11. ダイアログ右下の「キーを制限」をクリックします。
  12. 「API キーの制限と名前変更」というページが開かれるので、「アプリケーションの制限」という項目の「なし」を「HTTPリファラー(ウェブサイト)」に変更します。すると、その下に「ウェブサイトの制限」という項目が出てくるので、「項目を追加」をクリックし、「リファラー」と書いているところをクリックし、マップを利用するサイトのURLを入力します(*を含めたURL(例:http://*.example.com/*))。また、「APIの制限」項目の「キーを制限しない」を「キーを制限」に変更し、「Select API」と書かれているプルダウンをクリックし、表示された一覧の中から「Maps JavaScript API」にチェックを入れて、右下の「OK」をクリックします。以上の入力が終わったら、下部の「保存」ボタンをクリックします。

おわりに

以上で、Google Maps APIを取得することができました。
このほかにも、支払い設定が未了の方はそちらも行う必要があります(毎月200ドル分は無料)し、実際にコーディングを行う必要もありますが、今回はAPIの取得にポイントをしぼって説明しました。
お店のHPなどにはマストな機能だと思うので、参考になれば幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?