Zenn
🗺️

Google Map APIを実装する_3

2023/10/19に公開
Rails
Ruby
Google Cloud
tech

Goal

Google Map APIを導入しページに地図を表示させる

【詳細】 住所にピンを立て、そこの緯度経度を表示させる

Step 3

  • 住所から緯度、経度を取得する
  • マップ上にピンどめができるようにする

段階１：モデルファイルに内容追加

models/facility.rb
  #GoogleMapに関する記述
  geocoded_by :address
  after_validation :geocode, if: :address_changed?

上記の記述でモデル登録時と住所(address)変更時にgeocoderが動いて緯度、経度のデータが登録と更新される。

段階２：gemの追加

Gemfile
gem 'dotenv-rails'

gemの追加後、下記コマンドをターミナルで実施。

bundle install

「bundle i」や「bundle」でも実行できるらしい…
ちなみに、最近、自分は「bundle i」で実行することが多いっす。

段階３：ビューファイルの内容と環境変数名を更新

<h5 class="card-title">場所</h5>
<!--以下はGoogle MAPが正常に表示されるかのもの-->
<div class="map">
　　<div id="map">
　　</div>
</div>
<script>
function initMap(){
  let pos ={lat: <%= @facility.latitude %>, lng: <%= @facility.longitude %>};

  let map = new google.maps.Map(document.getElementById('map'), {
  center: pos,
  zoom: 15
  });

  let transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);

  let contentString = '住所：<%= @facility.address %>';
  let infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  let marker = new google.maps.Marker({
      position:pos,
      map: map,
      title: contentString
  });

  marker.addListener('click', function() {
      infowindow.open(map, marker);
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap" async defer></script>

【変更後】

.env
GOOGLE_MAP_API_KEY=取得したAPIキー

段階４：git pushをする前に....

自分は下記の手順でミスってしまい、めっちゃめんどくさい手順を経てしまったので、みなさんは間違わないことを祈りやす。また、ミスって.envをあげてしまった場合は焦らないで、一つずつ対処しやしょう！
（今回は個人開発でPFだったため、若干は焦ったけど、そこまで被害はでないぽかったので、ギリセーフ💦）

.gitignore
.
.
.
/.env

⚠️他の記事では「/.env」の後に「#追記」とか書いてあるものもあるが、「#追記」を書いてしまうとgit add .でやった際にgit statusで確認するとenvファイルがアップされるように出てしまうので注意

参照記事

https://qiita.com/ryo_1241/items/bdb4babc3fc81eae3b50

番外編

もしも、pushをして、GitHub上に.envファイルをあげてしまったら...

ひとまず、一旦深呼吸。
深呼吸が済んだら、一つずつ対処。

1.APIの再発行

Google Cloud > Cloudの概要 > ダッシュボード　> APIの概要に移動

APIの概要に移動を選択すると、認証情報の項目があるので、それを選択。
作成した「APIキー~~~」をクリック。

「キーを再生成」の項目を選択し、新しいキーを発行する。
因みに、以前のキーはある程度の期間使えることになるが、その期間を経過すると使えなくなる。

2.Gitのコマンド履歴を消す

以下のコマンドをターミナル上で実行すると、gitの全ての履歴から.envについての記録を抹消することができるっぽい。

git filter-branch --force --index-filter \
  "git rm --cached --ignore-unmatch ./.env" \
  --prune-empty --tag-name-filter cat -- --all

これで、履歴を消すことができた。あとは、状況に応じて異なるが、上がってることを気づいてから段階４をやって、APIを更新した人は、追加で下記のコマンドを行ってから、通常通りgit add . > git commit -m "~~~~" > git push origin ~~~を実行すればなんとかなる。

# 抹消した履歴で強制上書きを決行します。
git push origin --force --all

気づいた後に、段階４をやってない場合は、それをやって、上記コマンドで実施。

参照記事

https://zenn.dev/rabbit/articles/64957d0412ee2e

Discussion