【Rails】 googlemapAPIでのgetBoundsがうまく動かない

初めての質問になります。見づらいところや分かりづらいところがあったら申し訳ありません。
現在Ruby on RailsでgooglemapAPIを利用した表示機能を実装しています。
その際にDBに登録されている複数のデータを取り出して、マップの表示内にのみピンを刺すといった実装をしたいと考えています。
そのためにマップ表示内の緯度経度を取得するコードを書いているのですが

Uncaught TypeError: Cannot read properties of undefined (reading 'getBounds')

とエラーが出てしまいます。
map.getBoundsが動いた時にmapのデータがないといったニュアンスはわかったのですが、どう解決すれば良いのかわからないので質問させていただきました。

様々なサイトを参考に記述しており、まだ実装を見越した記述もあるため、ボロボロのコードかと思いますが、申し訳ありません。

Ruby　search.html
1<head>
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
3</head>
4<input id="address" type="textbox" name="location" value="新宿駅">
5<input type="button" value="検索" onclick="codeAddress()">
6
7<div id='map'></div>
8
9<style>
10#map {
11  height: 600px;
12  width: 600px;
13  margin-top : 20px;
14  margin-bottom: 20px;
15}
16</style>
17
18
19<script>
20 let infoWindow = [];
21 let items = gon.items; 
22 var markerData = items.length;
23 let map
24
25
26      // 地図初期表示
27      function initMap() {
28
29        var target = document.getElementById('map');
30
31        // 地図の中心設定
32        var centerp = {lat: 35.6809591, lng: 139.7673068 },
33
34        // Google Mapの表示
35        map = new google.maps.Map(target, {
36          center: centerp,
37          zoom: 16,
38        });
39        
40        // 地図が移動された場合、マーカーとリストをセットし直す
41        google.maps.event.addListener(map, 'idle', function(){
42          
43          setSideList();
44        });
45
46      }
47
48 // Function:位置とマーカーをセット
49      function setData(markerData){
50        var marker = [];
51
52        for (var i = 0; i < markerData.length; i++) {
53
54          // マーカー位置のセット
55          var markerLatLng = new google.maps.LatLng({
56            lat: Number(markerData[i]['lat']),
57            lng: Number(markerData[i]['lng'])
58          });
59
60          var name = markerData[i]['name'];
61
62          // マーカーアイコンのセット
63          var tagno = markerData[i]['tag'].charAt(0)
64          iconcolor = './icon_tag/tag' + tagno + '.png'
65          var icon = new google.maps.MarkerImage(iconcolor);
66
67          // マーカーのセット
68          marker[i] = new google.maps.Marker({
69            position: markerLatLng,          // マーカーを立てる位置を指定
70            map: map,                        // マーカーを立てる地図を指定
71            icon: icon                       // アイコン指定
72          });
73          
74        }
75
76      }
77
78      function setSideList(){
79        var mapMarkerData = [];
80
81        //地図の範囲内を取得
82        var bounds = map.getBounds();
83        mapNE_lat = bounds.getNorthEast().lat();
84        mapSW_lat = bounds.getSouthWest().lat();
85        mapNE_lng = bounds.getNorthEast().lng();
86        mapSW_lng = bounds.getSouthWest().lng();
87
88        // console.log(mapNE_lat);
89        // console.log(mapSW_lat);
90        // console.log(mapNE_lng);
91        // console.log(mapSW_lng);
92
93        // 緯度経度をもってリストを作成
94        var j = 0;
95        for (var i = 0; i < markerData.length; i++) {
96          if (mapNE_lat >= markerData[i]['lat'] && markerData[i]['lat'] >= mapSW_lat) {
97            if (mapNE_lng >= markerData[i]['lng'] && markerData[i]['lng'] >= mapSW_lng) {
98              mapMarkerData[j] = markerData[i];
99              j++;
100            }
101          }
102        }
103
104        // Function:位置とマーカーをセット（緯度経度にて絞り込みしたデータ）
105        setData(mapMarkerData);
106
107      }
108 
109
110
111
112    </script>
113
114  <body>
115    <script
116      src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAPS_API_KEY']%>&callback=initMap&libraries=&v=weekly"
117      async
118    ></script>

ちなみに

Ruby
1google.maps.event.addListener(map, 'idle', function(){
2alert(map.getBounds());
3          setSideList();
4        });

と入力すると、しっかりとmapの緯度経度情報は確認できます。
なので変数の引き渡しの問題かと思うのですが、関数外にmapをセットしてもうまくいきません。
どうすれば無事にmap表示内の緯度経度をmap.getBoundsで取得することができるでしょうか。

行動規範の内容に同意します

回答1件

自己解決

Ruby
1        // 地図が移動された場合、マーカーとリストをセットし直す
2        google.maps.event.addListener(map, 'idle', function(){
3           var bounds = map.getBounds();
4           mapNE_lat = bounds.getNorthEast().lat();
5           mapSW_lat = bounds.getSouthWest().lat();
6           mapNE_lng = bounds.getNorthEast().lng();
7           mapSW_lng = bounds.getSouthWest().lng();
8           setSideList();
9        });