Q&A
初めての質問になります。見づらいところや分かりづらいところがあったら申し訳ありません。
現在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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。