Rails6 JavaScript が表示されない

Question

Rails6にて開発中です

##本題

住所を投稿するページにてGoogleのmapの表示を erbファイルにscriptで記述しおりました
new.html.erb

        <script>
        /*
        mapを関数の外で定義(codeAddressでも使うため)
        geocoderを用意
        */

        let map
        let geocoder

        function initMap(){
          // geocoderを初期化
          geocoder = new google.maps.Geocoder()

          map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.710063, lng: 139.810700},
          zoom: 8
          });
        }

        function codeAddress(){
          // 入力を取得
          let inputAddress = document.getElementById('address').value;

          // geocodingしたあとmapを移動
          geocoder.geocode( { 'address': inputAddress}, function(results, status) {
            if (status == 'OK') {
        // map.setCenterで地図が移動
              map.setCenter(results[0].geometry.location);

        // google.maps.MarkerでGoogleMap上の指定位置にマーカが立つ
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
              });
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
          });
        }
        </script>

この記述をJavaScriptファイルに分けようと考えました（可読性のため)

new.html.erbに記述してあった

<script>から</script>までを消し

<%= javascript_pack_tag 'photo/map' %>

これを記述

そしてJavaScriptファイルに

<script>から</script>以外を記述

javascript > packs > photo > map.js

/*
mapを関数の外で定義(codeAddressでも使うため)
geocoderを用意
*/

let map
let geocoder

function initMap(){
  // geocoderを初期化
  geocoder = new google.maps.Geocoder()

  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 35.710063, lng: 139.810700},
  zoom: 8
  });
}

function codeAddress(){
  // 入力を取得
  let inputAddress = document.getElementById('address').value;

  // geocodingしたあとmapを移動
  geocoder.geocode( { 'address': inputAddress}, function(results, status) {
    if (status == 'OK') {
// map.setCenterで地図が移動
      map.setCenter(results[0].geometry.location);

// google.maps.MarkerでGoogleMap上の指定位置にマーカが立つ
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

読み込むように
javascript > packs > applocation.js

require("./photo/map")

を記述しました
しかし、地図が表示されないため
違う記述があるのか…
皆様のお力を貸しください
他のJavaScriptは動いているのでerbに<script>で記述したものをjavascriptに移動させて、表示させる記述が違うのかな…と感じていますが
わからずです…

##追加
検証ツールでconsoleを見たら

このようになっておりました
initMapがないと言われているので調査中です

Comments

[papinianus]

Google Apps Script はどう関係しますか?