Zenn
🤖

Rails アプリにGoogleMap APIを導入する

2022/03/30に公開
Rails
API
Google
tech

はじめに

投稿画面で、ユーザから入力された地名を、GoogleMap上に反映させるための機能実装をまとめます。

実装方法

1.ライブラリをインストール。

以下のライブラリをGemfileに追記します。

Gemfile
gem 'gmaps4rails'
gem 'geocoder'

そして、installします。

terminal
$ bundle install

2.カラムの追加

次に、すでに存在しているpostsテーブルにカラムを追加していきます。

20200223012643_add_address_to_posts.rb
class AddAddressToPosts < ActiveRecord::Migration[5.2]
  def change
    add_column :posts, :address, :string
    add_column :posts, :latitude, :float
    add_column :posts, :longitude, :float
  end
end

address（住所）, latitude（緯度）, longitude(経度)カラムを追加します。
先ほど、インストールしたライブラリが、このaddressに格納された情報から緯度、経度を自動で計算をし、それぞれのカラムに格納してくれます。

マイグレーションファイルをDBに反映させるのを忘れずに

terminal
$ rails db:migrate

3.Mapの表示部分を作る

GoogleMapを表示させたい部分に以下のコードを追加します。

index.html.erb
<h3>釣行場所</h3>
<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: <%= @post.latitude %>, lng: <%= @post.longitude %> },
      zoom: 15
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['API_KEY'] %>&callback=initMap" async defer></script>

このままだと、表示される地図が大きすぎるので、任意のサイズに調整します。

posts.scss
#map {
  height: 300px;
  width: 400px;
}

4.ユーザが地名を入力するフォームを作る

ユーザがpostsを投稿するformに以下のように追加をします。

new.html.erb
<%= form_with(model: @post, local: true) do |f| %>
    ・
    ・
 <div class="form-group">
   <%= f.label :address, '場所' %>
   <%= f.text_field :address, class: 'form-control' %>
 </div>
    ・
    ・
 <%= f.submit '投稿する', class: 'btn btn-primary btn-block' %>

5. 最後に表示を確認

show.png

このように、投稿フォームで入力された場所をマップが表示していれば成功です。

メモ

map.js
function initMap(){
    let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: <%= @post.latitude %>, lng: <%= @post.longitude %> },
    zoom: 15
    });
}

任意のviewファイルに以下のコードを記述します。
私の場合は、釣れた場所をGoogleMapで表示したかったため、<h3>タグに釣行場所が書かれています。

rb:index.html.erb
    <h3>釣行場所</h3>
    <div class="map">
      <div id="map">
      </div>
    </div>
    <%= javascript_include_tag 'map.js' %>
    <script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['API_KEY'] %>&callback=initMap" async defer></script>
    </div>

<div id="map"></div>の部分にGoogleMapが表示されます。

また、<%= ENV['API_KEY'] %>の部分は環境変数を設定して埋め込んでおり、
.envファイルに以下の記述を追加します。

.env
API_KEY='*********************'

RailsでJavaScriptファイルを読み込む方法

任意のviewファイルに以下のコードを追加します。

sample.html.erb
・
・
<%= javascript_include_tag 'sample.js' %>
・
・

次にasseets.rbに以下のコードを記述します。

config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( sample.js )

これで、app/assets/javascripts/に置いてある、任意のjsファイルが読み込まれて、view上でJavaScriptが使えるようになります。

おわりに

自分のアプリケーションにGoogleMapを搭載するのに、色々と試行錯誤しましたが、意外とシンプルなコードで実装することができました。
GoogleMapを使った機能を実装する際には、GoogleのAPIキーを取得する必要があるのですが、その辺りの詳細はまたの機会にまとめます。

Discussion