【Rails7】住所を入力しただけで地図(Googleマップ)が自動表示されるようにする

gem "dotenv-rails"

GOOGLE_MAP_API_KEY = "取得したGoogle Maps APIキー"

・・・

/.env

ENV['GOOGLE_MAP_API_KEY']

$ rails g migration add_address_info_to_posts address:string latitude:float longitude:float

class AddAddressInfoToPosts < ActiveRecord::Migration[7.0]
  def change
    add_column :posts, :address, :string
    add_column :posts, :latitude, :float
    add_column :posts, :longitude, :float
  end
end

$ rails db:migrate

<%= form_with(model: @post, local: true, class: "mt-4 form-column-width") do |f| %>
  ・・・
  <%= f.label :address, class: "form-label fw-bold"%>
  <%= f.text_field :address, autofocus: true,placeholder: "住所を入力してください", class: "form-control" %>
  ・・・
  <%= f.submit (@post.new_record? ? "投稿する" : "更新する"), class: "btn btn-primary mb-4" %>

<% end %>

gem "geocoder"

class Post < ApplicationRecord
  geocoded_by :address
  after_validation :geocode
  ・・・
end

<!-- 住所表示エリア -->
<h5>住所</h5>
<p><%= @post.address %></p>

<!-- Googleマップ表示エリア(地図を表示) -->
<div id="map"></div>

<!-- Googleマップ表示用の Javascript -->
<script>
  function initMap(){
    // 地図の位置情報(緯度・経度)を取得
    let mapPosition = {lat: <%= @post.latitude || 0 %> , lng: <%= @post.longitude || 0 %> };
    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: mapPosition
    });
    let transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);

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

    let marker = new google.maps.Marker({
      position: mapPosition,
      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>

$ rails g geocoder:config

Geocoder.configure(
  # Geocoding options
  # timeout: 3,                 # geocoding service timeout (secs)
  lookup: :google,         # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
  use_https: true,           # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
  api_key: ENV['GOOGLE_MAP_API_KEY'],               # API key for geocoding service
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],

  # Calculation options
  # units: :mi,                 # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear

  # Cache configuration
  # cache_options: {
  #   expiration: 2.days,
  #   prefix: 'geocoder:'
  # }
)

= f.submit, class: "btn btn-primary mb-4", data: { turbo: false }

= button_to "削除", post_path(@post), class: "btn btn-danger", method: :delete, data: { turbo: false }

  def create
　　・・・
    if @post.save
      flash[:notice] = "新規投稿が完了しました"
      redirect_to @post
    else
      #--- redirect_to に修正する ---
      redirect_to new_post_path
      #---------------------------- 
    end
  end

  def update
　　・・・
    if @post.update(post_params)
      flash[:notice] = "投稿を更新しました"
      redirect_to @post
    else
      #--- redirect_to に修正する ---
      redirect_to edit_post_path(@post)
      #---------------------------- 
    end
  end