Webサービスを作成するためにGoogle Maps APIを使用したので備忘録を書く。（2023年3月現在）
こちらが公式 https://developers.google.com/maps
1.Googleアカウントの作成
APIキーを取得するためにGoogleアカウントを作る。まあWebサービスを作ろうという人間ならほぼ誰でも持っていると思うので割愛。
2.Google Cloud Platformにアクセスしプロジェクトを作成する
Google Cloud Platform https://cloud.google.com
①画面右上「コンソール」をクリック。
②画面左上「プロジェクトを選択」のタブより「新しいプロジェクト」クリック。
③画面に従って任意のプロジェクト名を入力し作成する。
④再び「プロジェクトを選択」のタブを開き、先ほど作成したプロジェクトを選択。
3.APIの有効化
①画面左上ナビゲーションメニューを開き「APIとサービス」より「ライブラリ」をクリック。
②ライブラリ内の「Maps JavaScript API」を選択し、「有効にする」ボタンをクリック。これでAPIが有効化される。
③「APIとサービス」より「ダッシュボード」をクリック。
④ダッシュボードに表示されたAPI一覧から、「Maps JavaScript API」をクリック。
⑤「認証情報」を選択し、「認証情報を作成」をクリック。さらに「APIキー」をクリックし作成する。
⑥「キーを制限」をクリック。
4.APIキーを制限
他者に悪用されることを防ぐために、APIキーの使用を制限する。
①複数の方法があるがここでは「HTTPリファラー」を選択。
②任意のURLを入力（複数可）。設定を保存する。
ここまでがAPIキー取得の手順。以下コーディングに移る。
5.実装
コード
私は_map.html.erbを作成し、トップ画面にレンダリングした。この辺りは任意の場所に。
_map.html.erb
<h1>Map</h1>
<div id='map'></div>
<style>
#map {
height: 600px;
width: 600px;
}
</style>
<script>
let map
function initMap(){
geocoder = new google.maps.Geocoder()
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.7828, lng:-73.9653},
zoom: 12,
});
marker = new google.maps.Marker({
position: {lat: 40.7828, lng:-73.9653},
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_API_KEY'] %>&callback=initMap" async defer></script>
以下環境変数（”ENV[‘GOOGLE_API_KEY’]” ）の設定。
①gem ‘dotenv-rails’を追加しbundle install。
②ルートディレクトリに’.env’というファイルを作成。
.env
GOOGLE_API_KEY = '作成されたAPIキーを入力'
③.gitignoreに以下を記述。
.gitignore
/.env
④config/environments/development.rbに以下のコードを追加。
config/environments/development.rb
config.before_configuration do
env_file = File.join(Rails.root, '.env')
if File.exist?(env_file)
dotenv = Dotenv::Railtie.load
end
end
サーバを起動し画像のように表示されていたら完成。
環境変数を設定しないままgit等に上げてしまうと悪意のある第三者に利用されてしまう可能性があるので要注意。
結構つまづいたが調べながらやっていけばできるようになった。
ちなみに今春の選抜を見ながらこの記事書いてる。兵庫の社負けてしまった。
気温も上がってきて暑い中での試合になりますが、選手・関係者の皆さん体調にはくれぐれも気をつけて頑張ってください。
コメント