railsでアプリケーション作成16(googlemap)

gem 'dotenv-rails'

touch .env

GOOGLE_API_KEY = ""

/.env

gem 'jp_prefecture'

jQuery(document).on("turbolinks:load", function() {
    $('#postal_code').jpostal({
      postcode : [
        '#user_postal_code'
      ],
      address: {
        "#user_prefecture"  : "%3",
        "#user_address"   : "%4%5",
        "#user_address2" :"%6",
        "#user_address3" : "%7"
      }
    });
  });

<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

t.integer :postal_code
t.integer :prefecture_code
t.string :address
t.string :address2
t.string :address3
t.float :latitude
t.float :longitude

geocoded_by :join_address
after_validation :geocode

def join_address
 "#{self.prefecture_name}#{self.address}#{self.address2}"
end

include JpPrefecture
jp_prefecture :prefecture_code

def prefecture_name
  JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end

def prefecture_name=(prefecture_name)
 self.prefecture = JpPrefecture::Prefecture.find(name: prefecture_name).code
end

def ○○_params
  params.require(:○○).permit(:○○, ...,:postal_code, :prefecture_code, :address, :address2, :address3)
end

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email,:name,:postal_code,:prefecture_code,:address,:address2,:address3])
end

<div class="field">
  <%= f.label :postal_code, '郵便番号' %>
  <%= f.text_field :postal_code, autocomplete: 'postal_code', id: 'user_postal_code', class: 'form-control' %>
</div>
      
<div class="field">
  <%= f.label :prefecture_name, '都道府県' %>
  <%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: '選択してください' }, id: 'user_prefecture', class: 'form-control' %>
</div>
      
<div class="field">
   <%= f.label :address, '市区町村' %>
   <%= f.text_field :address, autocomplete: 'address',id: 'user_address', class: 'form-control' %>
</div>
      
<div class="field">
   <%= f.label :address2, '番地' %>
   <%= f.text_field :address2, autocomplete: 'address_street',id: 'user_address2', class: 'form-control' %>
</div>

<div class="field">
  <%= f.label :address, '建物' %>
  <%= f.text_field :address3, autocomplete: 'address3',id: 'user_address3', class: 'form-control' %>
</div>

<div id="google_map"></div>
<script type="text/javascript">
  function initMap() {
  var test ={lat: <%= ○○.latitude %>, lng: <%= ○○.longitude %>};
  var map = new google.maps.Map(document.getElementById('google_map'), {
                  zoom: 15,
                  center: test
                  });
          var transitLayer = new google.maps.TransitLayer();
          transitLayer.setMap(map);

          var contentString = '住所：<%= ○○.join_address %>';
          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });
          var marker = new google.maps.Marker({
                        position:test,
                        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_API_KEY'] %>&callback=initMap" async defer></script>
      </script>
      <style type="text/css">
        #google_map {
        height: 200px;
        width: 70%;
        }
      </style>