質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1502閲覧

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

hk5232

総合スコア22

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/04/17 08:41

編集2022/04/18 00:57

初めての質問になります。見づらいところや分かりづらいところがあったら申し訳ありません。
現在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で取得することができるでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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 });

これで問題なく動きました

投稿2022/04/18 02:38

hk5232

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問