🐎

Google Map APIを実装する_2

2023/10/15に公開

Rails

Goal

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

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

Step 2

特定の場所にGoogleマップを表示させる
経度・緯度でマップを表示させる

段階１：gemの追加

Gemfile

gem 'gmaps4rails'
gem 'geocoder'

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

bundle install

段階２：カラムの追加

既に存在しているfacilitiesテーブル(自身が表示させようと思っているテーブル)にカラムを追加
※最初から地図を実装しようと考えてる方はカラムを作る時点で下記のカラムを入れとくと楽っす。

カラム追加コマンド（ターミナル上で実施）

rails generate migration AddAddressToFacilities address:string latitude:float longitude:float

上記コマンドを行うと下記のファイルが出来上がる。
【マイグレートファイル】

20231014132300_add_address_to_facilities.rb

class AddAddressToFacilities < ActiveRecord::Migration[6.1]
  def change
    add_column :facilities, :address, :string
    add_column :facilities, :latitude, :float
    add_column :facilities, :longitude, :float
  end
end

マイグレートファイルが出来たら、スペルミス等がないかを確認し、続けて次のコマンドをターミナル上で実施

rails db:migrate

段階３：マップを表示させる

.envファイルを作成する

.env

API_KEY='*********************'

'*********************'の部分は自身のGCPのAPIキーを記載しておく

Mapを表示する記述をする

<!-- Google Mapの記述 -->

<div class="map">
  <div id="map">
  </div>
</div>

<div type="text/javascript">
  <script>
    function initMap(){
      let map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: <%= @facility.latitude %>, lng: <%= @facility.longitude %> },
      zoom: 15
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['API_KEY'] %>&callback=initMap" async defer></script>
</div>

＜表示の際の突っ掛かりポイント＞
ポイント１
おそらく、上記では lat: <%= @facility.latitude %>とlng: <%= @facility.longitude %>の部分は「インスタンス変数の緯度、経度」という記述をしているので、単に確認のためにテスト的に特定のページ（最終的にはfacilityのshowに記述したいけど、動くかどうかだけをhomesのtopページでみてみたい場合）、インスタンス変数(@facility)にしていると表示できないので、Google Mapで検索した値をそのまま「：」のあとに入れる。

【東京競馬場の緯度、経度】
35.6652316
139.4822519
(…どうでもいいことっすけど、競争馬ってほんとに綺麗っす。あーまた、行きたいなぁー…)

そうすることで、マップ自体の挙動は見ることができる。

ポイント２
環境変数を使っているが、環境変数がうまく反映されない場合がある。そのような場合は、一旦、.envファイルの「*********************」を直接入れてみる。

ポイントを２つ記載したが、これはあくまで、自分が動かなかった部分を記載しただけなので、ご参考までに…