JavaScriptでGoogleMapsAPIを操作したい

前提・実現したいこと

Railsでアプリを作っています。
jsで作成したリスト(結果)をクリックすると対応した店の場所にマーカーを落とす。というのが実現したいことになります。
現状は結果表示のjsまでは動いているのですが、結果をクリックしてもMap上にマーカーが落ちないという状況です。

発生している問題・エラーメッセージ

コンソールに以下のエラーメッセージが出ています。

(index):1 Uncaught ReferenceError: createMarker is not defined
    at HTMLAnchorElement.onclick ((index):1)
onclick @ (index):1

自作したcreateMarkerが見つけられていない。というエラーだと思っています。

該当のソースコード

js
1window.addEventListener('load', function () {
2  const pushButton = document.getElementById("getPlace");
3
4  pushButton.addEventListener('click', function () {
5    /*
6     お店情報取得
7    */
8    let placesList;
9    //結果表示クリア
10    document.getElementById("results").innerHTML = "";
11    //placesList配列を初期化
12    placesList = new Array();
13
14    //入力した検索場所を取得
15    var addressInput = document.getElementById("addressInput").value;
16    if (addressInput == "") {
17      return;
18    }
19
20    //検索場所の位置情報を取得
21    var geocoder = new google.maps.Geocoder();
22    geocoder.geocode(
23      {
24        address: addressInput
25      },
26      function (results, status) {
27        if (status == google.maps.GeocoderStatus.OK) {
28          //取得した緯度・経度を使って周辺検索
29          startNearbySearch(results[0].geometry.location);
30        }
31        else {
32          alert(addressInput + "：位置情報が取得できませんでした。");
33        }
34      });
35
36    /*
37     位置情報を使って周辺検索
38      latLng : 位置座標インスタンス（google.maps.LatLng）
39    */
40    function startNearbySearch(latLng) {
41
42      //読み込み中表示
43      document.getElementById("results").innerHTML = "Now Loading...";
44
45      //Mapインスタンス生成
46      var map = new google.maps.Map(
47        document.getElementById("mapArea"),
48        {
49          zoom: 15,
50          center: latLng,
51          mapTypeId: google.maps.MapTypeId.ROADMAP
52        }
53      );
54
55      //PlacesServiceインスタンス生成
56      var service = new google.maps.places.PlacesService(map);
57
58      //入力したKeywordを取得
59      var keywordInput = document.getElementById("keywordInput").value;
60      //入力した検索範囲を取得
61      var obj = document.getElementById("radiusInput");
62      var radiusInput = Number(obj.options[obj.selectedIndex].value);
63
64      //周辺検索
65      service.nearbySearch(
66        {
67          location: latLng,
68          radius: radiusInput,
69          type: ['restaurant'],
70          keyword: keywordInput,
71          language: 'ja'
72        },
73        displayResults
74      );
75    }
76
77    /*
78     周辺検索の結果表示
79     ※nearbySearchのコールバック関数
80      results : 検索結果
81      status ： 実行結果ステータス
82      pagination : ページネーション
83    */
84    function displayResults(results, status, pagination) {
85
86      if (status == google.maps.places.PlacesServiceStatus.OK) {
87
88        //検索結果をplacesList配列に連結
89        placesList = placesList.concat(results);
90
91        //pagination.hasNextPage==trueの場合、
92        //続きの検索結果あり
93        if (pagination.hasNextPage) {
94
95          //pagination.nextPageで次の検索結果を表示する
96          //※連続実行すると取得に失敗するので、
97          //  1秒くらい間隔をおく
98          setTimeout(pagination.nextPage(), 1000);
99
100          //pagination.hasNextPage==falseになったら
101          //全ての情報が取得できているので、
102          //結果を表示する
103        } else {
104
105          //ソートを正しく行うため、
106          //ratingが設定されていないものを
107          //一旦「-1」に変更する。
108          for (var i = 0; i < placesList.length; i++) {
109            if (placesList[i].rating == undefined) {
110              placesList[i].rating = -1;
111            }
112          }
113
114          //ratingの降順でソート（連想配列ソート）
115          placesList.sort(function (a, b) {
116            if (a.rating > b.rating) return -1;
117            if (a.rating < b.rating) return 1;
118            return 0;
119          });
120
121          //placesList配列をループして、
122          //結果表示のHTMLタグを組み立てる
123          var resultHTML = "<ol>";
124
125          for (var i = 0; i < placesList.length; i++) {
126            place = placesList[i];
127
128            //ratingが-1のものは「---」に表示変更
129            var rating = place.rating;
130            if (rating == -1) rating = "---";
131
132            //表示内容（評価＋名称）
133            var content = "【" + rating.toFixed(1) + "】 " + place.name;
134
135            //クリック時にMapにマーカー表示するようにAタグを作成
136            resultHTML += "<li>";
137            resultHTML += "<a href=\"javascript: void(0);\"";
138
139            resultHTML += " onclick=\"createMarker(";
140            resultHTML += "'" + place.name + "',";
141            resultHTML += "'" + place.vicinity + "',";
142            resultHTML += place.geometry.location.lat() + ",";
143            resultHTML += place.geometry.location.lng() + ")\">";
144            resultHTML += content;
145            resultHTML += "</a>";
146            resultHTML += "</li>";
147          }
148
149          resultHTML += "</ol>";
150
151          //結果表示
152          document.getElementById("results").innerHTML = resultHTML;
153        }
154
155      } else {
156        //エラー表示
157        var results = document.getElementById("results");
158        if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
159          results.innerHTML = "検索結果が0件です。";
160        } else if (status == google.maps.places.PlacesServiceStatus.ERROR) {
161          results.innerHTML = "サーバ接続に失敗しました。";
162        } else if (status == google.maps.places.PlacesServiceStatus.INVALID_REQUEST) {
163          results.innerHTML = "リクエストが無効でした。";
164        } else if (status == google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
165          results.innerHTML = "リクエストの利用制限回数を超えました。";
166        } else if (status == google.maps.places.PlacesServiceStatus.REQUEST_DENIED) {
167          results.innerHTML = "サービスが使えない状態でした。";
168        } else if (status == google.maps.places.PlacesServiceStatus.UNKNOWN_ERROR) {
169          results.innerHTML = "原因不明のエラーが発生しました。";
170        }
171      }
172    }
173  })
174  
175  /*
176  マーカー表示
177  name : 名称
178  vicinity : 近辺住所
179  lat : 緯度
180  lng : 経度
181  */
182  function createMarker(name, vicinity, lat, lng) {
183
184    //マーカー表示する位置のMap表示
185    var map = new google.maps.Map(document.getElementById("mapArea"), {
186      zoom: 15,
187      center: new google.maps.LatLng(lat, lng),
188      mapTypeId: google.maps.MapTypeId.ROADMAP
189    });
190
191    //マーカー表示
192    var marker = new google.maps.Marker({
193      map: map,
194      position: new google.maps.LatLng(lat, lng)
195    });
196
197    //情報窓の設定
198    var info = "<div style=\"min-width: 100px\">";
199    info += name + "<br />";
200    info += vicinity + "<br />";
201    info += "<a href=\"https://maps.google.co.jp/maps?q=" + encodeURIComponent(name + " " + vicinity) + "&z=15&iwloc=A\"";
202    info += " target=\"_blank\">⇒詳細表示</a><br />";
203    info += "<a href=\"https://www.google.com/maps/dir/?api=1&destination=" + lat + "," + lng + "\"";
204    info += " target=\"_blank\">⇒ここへ行く</a>";
205    info += "</div>";
206
207    //情報窓の表示
208    var infoWindow = new google.maps.InfoWindow({
209      content: info
210    });
211    infoWindow.open(map, marker);
212
213    //マーカーのクリック時にも情報窓を表示する
214    marker.addListener("click", function () {
215      infoWindow.open(map, marker);
216    });
217  }
218})

erb
1<div class="wrapper">
2  <div class="header">
3    <%= render "header" %>
4  </div>
5
6  <div class="main">
7    <div class="main-left">
8      <%# 検索入力フォーム %>
9      <div class="input-form">
10        <div>
11          検索場所  ：
12          <input type="text" id="addressInput" placeholder="例：東京駅" value="東京駅" style="width: 200px">
13        </div>
14        <div>
15          キーワード：
16          <input type="text" id="keywordInput" placeholder="例：寿司" value="寿司" style="width: 200px">
17        </div>
18        <div>
19          距離      ：
20          <select id="radiusInput">
21            <option value="200" selected>200 m</option>
22            <option value="500">500 m</option>
23            <option value="800">800 m</option>
24            <option value="1000">1 km</option>
25            <option value="1500">1.5 km</option>
26            <option value="2000">2 km</option>
27          <select>
28        </div>
29        <div>
30          <input type="button" value="お店情報取得" id="getPlace">
31        </div>
32      </div>
33      <%# 結果部分 %>
34      <div class="result">
35        <div>・検索結果</div>
36        <div class="results" id="results">
37          <%# 結果表示部分 %>
38        </div>
39      </div>
40    </div>
41    <%# 地図表示 %>
42    <div class="main-right" id="mapArea">
43      <script src="https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places&callback=initMap" async defer></script>
44    </div>
45  </div>
46</div>

試したこと

createMakerの配置場所が悪いのかと思い、pushButton内などに移動させて検証しました。
createMakerのスペルの確認も行いました。

補足情報（FW/ツールのバージョンなど）

フレームワーク:Ruby on Rails(後々DBを使っていきたいため)
開発環境：VScode

Lhankor_Mhy

2021/06/19 00:34

Rails は全然わからないのですが、webpack でビルドしてる感じですか？ function createMarker(name, vicinity, lat, lng) { ↓ globalThis.createMarker = function (name, vicinity, lat, lng) { とするとどうなりますか？