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

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

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

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

JavaScript

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

解決済

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

hk5232
hk5232

総合スコア22

Ruby on Rails

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

JavaScript

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

1回答

0評価

0クリップ

234閲覧

投稿2022/04/17 08:41

編集2022/04/18 11:38

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

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

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

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

Ruby search.html

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </head> <input id="address" type="textbox" name="location" value="新宿駅"> <input type="button" value="検索" onclick="codeAddress()"> <div id='map'></div> <style> #map { height: 600px; width: 600px; margin-top : 20px; margin-bottom: 20px; } </style> <script> let infoWindow = []; let items = gon.items; var markerData = items.length; let map // 地図初期表示 function initMap() { var target = document.getElementById('map'); // 地図の中心設定 var centerp = {lat: 35.6809591, lng: 139.7673068 }, // Google Mapの表示 map = new google.maps.Map(target, { center: centerp, zoom: 16, }); // 地図が移動された場合、マーカーとリストをセットし直す google.maps.event.addListener(map, 'idle', function(){ setSideList(); }); } // Function:位置とマーカーをセット function setData(markerData){ var marker = []; for (var i = 0; i < markerData.length; i++) { // マーカー位置のセット var markerLatLng = new google.maps.LatLng({ lat: Number(markerData[i]['lat']), lng: Number(markerData[i]['lng']) }); var name = markerData[i]['name']; // マーカーアイコンのセット var tagno = markerData[i]['tag'].charAt(0) iconcolor = './icon_tag/tag' + tagno + '.png' var icon = new google.maps.MarkerImage(iconcolor); // マーカーのセット marker[i] = new google.maps.Marker({ position: markerLatLng, // マーカーを立てる位置を指定 map: map, // マーカーを立てる地図を指定 icon: icon // アイコン指定 }); } } function setSideList(){ var mapMarkerData = []; //地図の範囲内を取得 var bounds = map.getBounds(); mapNE_lat = bounds.getNorthEast().lat(); mapSW_lat = bounds.getSouthWest().lat(); mapNE_lng = bounds.getNorthEast().lng(); mapSW_lng = bounds.getSouthWest().lng(); // console.log(mapNE_lat); // console.log(mapSW_lat); // console.log(mapNE_lng); // console.log(mapSW_lng); // 緯度経度をもってリストを作成 var j = 0; for (var i = 0; i < markerData.length; i++) { if (mapNE_lat >= markerData[i]['lat'] && markerData[i]['lat'] >= mapSW_lat) { if (mapNE_lng >= markerData[i]['lng'] && markerData[i]['lng'] >= mapSW_lng) { mapMarkerData[j] = markerData[i]; j++; } } } // Function:位置とマーカーをセット(緯度経度にて絞り込みしたデータ) setData(mapMarkerData); } </script> <body> <script src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAPS_API_KEY']%>&callback=initMap&libraries=&v=weekly" async ></script>

ちなみに

Ruby

google.maps.event.addListener(map, 'idle', function(){ alert(map.getBounds()); setSideList(); });

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

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

JavaScript

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