【GCP】GoogleMapAPI取得
いつもご覧いただきありがとうございます。
Ruby,Ruby on Railsで
成果物を作成中なのでそれについて書いていきます。
本日は「GoogleMapAPI取得」についてアウトプットします。
Googleマップを表示させるには「Google Cloud Platform」で APIキー と 請求先アカウントとプロジェクト(APIキー)を紐づける必要があります。
準備
・Googleアカウント
サイト所有者のアカウントが理想的です。
※クレジットカード情報を登録していただきます。
APIキー取得
「Google Maps Platform」にアクセスしてください。
※ログインしていない場合はログインしてください。
右上の「スタートガイド」か左下の「使ってみる」をクリックしてください。
1.Pick a product
どのAPIを有効にするかチェックする所がありますので3つともチェックを入れて「CONTINUE」ボタンを押してください。
2.Select a project
プロジェクト名を設定します。Select or create project で 「+Create a new project」を選択してください。「My Project」と仮のプロジェクト名がつきますので後でわかりやすいように変更しといてください。右下の「NEXT」をクリックします。
3.Set up your billing
請求先情報の登録画面になります。受諾で はい を選択「同意して続行」をクリックしてください。ここでは お客様情報とクレジットカード情報を入力します。お客様情報とクレジットカード情報が登録されると「APIの有効化」に移ります。「次へ」をクリックしてください。APIの有効化が完了したら APIキーが表示されます。
これでAPIキーは取得できました。
APIと認証情報の設定方法
上記で取得したAPIキーは、まだ制限がかかっていません。
この状態では誰でもこのAPIキーを利用する事ができてしまうので以下の方法で制限をかけます。
キーの利用を制限する事で、このキーを使用できるウェブサイトを指定できます。
「Google Cloud Platform」へアクセスします。
違うプロジェクトになっている場合は上の▼をクリックして「My Project」に変更します。
「APIの概算に移動」をクリックします。APIの設定「有効なAPIまたはサービスがありません」と でますので「APIとサービスの有効化」をクリックします。APIライブラリのページで「Maps JavaScript API」をクリックしてください。「有効にする」ボタンを押してください。「Maps JavaScript API」が有効になりました。APIを追加する場合はサイドメニューの「API」をクリックして「未使用の API」から追加してください。
「APIの概算」に移動をクリックします。サイドメニューの「認証情報」をクリックします。「認証情報を作成」ボタンを押して 「ウィザードで選択」エリアをクリックしてください。ウィザードでは「Maps JavaScript API」を選択して「必要な認証情報」ボタンを押してください。
APIキーが新しく作られました。
次にAPIキーのアクセス制限の設定をします。「キーの制限」をクリックしてください。ここでは「APIキーの利用制限」をします。ラジオボタンの「HTTPリファラー(ウェブサイト)」をクリックします。「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。
※ワイルドカード( * )が使えますので * を使ってURLを設定します。
※://*.example.com/*
例 localhost/* ローカルのテスト環境で使う場合。
複数設定できますので、ローカル開発環境用、WEBテスト用、本番用とか設定しておくといいかもしれません。URLを入力したら「保存」ボタンを押してください。
APIの設定画面に戻りました。こちらのAPIキーを使ってください。
以上で認証情報の設定は終了です。
最後までご覧いただきありがとうございました。
9/18(火)の学習内容
・GoogleMap APIを使用した地図表示機能の実装
アプリ制作環境
