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

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

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

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

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

700閲覧

Googlemapの非同期通信において、Ajaxの記述とコントローラーの記述

hk5232

総合スコア22

Ruby on Rails

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

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2022/04/20 04:02

編集2022/04/20 16:47

現在、railsでGooglemapの実装をおこなっています。
その際に、DBに登録されているデータからその緯度経度にピンを刺すという処理はできたのですが、
そのマップの範囲内の一覧を作りたいと思っています。
調べたところ範囲内の緯度経度を取得し、それをコントローラーで処理すれば良いのかなと考えたのですが、
javascriptからコントローラーへの非同期処理の記述とコントローラー側での処理がうまく分かりません。

javascript

1google.maps.event.addListener(map, 'idle',function() { 2 var mapMarkerData = []; 3 4 //地図の範囲内を取得 5 var bounds = map.getBounds(); 6 mapNE_lat = bounds.getNorthEast().lat(); 7 mapSW_lat = bounds.getSouthWest().lat(); 8 mapNE_lng = bounds.getNorthEast().lng(); 9 mapSW_lng = bounds.getSouthWest().lng(); 10 11 console.log(mapNE_lat); 12 console.log(mapSW_lat); 13 console.log(mapNE_lng); 14 console.log(mapSW_lng); 15 16$.ajax({ 17 url: '/items/search?mapNE_lat=${mapNE_lat}&mapNE_lng=${mapNE_lng}&mapSW_lat=${mapSW_lat}&mapSW_lng=${mapSW_lng}', 18 type: 'GET', 19 dataType: 'json', 20 timeout: 1000, 21 error: function(){ 22 alert("地図データの読み込みに失敗しました"); 23 }, 24 success: function(json){ 25 const list = document.getElementById("list"); 26 const html = ` 27 <% map_item.each do |item| %> 28      <li class='list'> 29       <div class='item-info'> 30       <h5 class='item-name2'> 31        <%= item.name %></h5> 32     <h5 class='item-name'> 33       <%= item.address %></h5> 34  <div class='item-img-content'> 35         <%= image_tag item.image, class: "item-img" %> 36        </div> 37      </div> 38    </li> 39 <% end %>`; 40        list.insertAdjacentHTML("afterend", html); 41 }, 42}); 43});

ここでマップ表示の緯度経度を取得して、コントローラーに送りたいと考えています。
そして帰ってきたデータを"list"idのところへ表示したいと考えています。

itemsコントローラー

1def search 2 @items = Item.all 3 gon.items = @items 4 5 map_item = Item.where(lat: lat >= mapNE_lat, lat: lat <= mapSW_lat, lng: lng >= mapNE_lng, lng: <= mapSW_lng) 6 render json:{ map_item: map_item } 7 end

現状これだとコントローラー側でエラーが起きます。
whereの検索条件がおかしいのはわかるのですが、どのようにマップの緯度経度内のデータを取得する記述をすれば良いのか分かりません。
またコントローラー側で多分if文などで

itemsコントローラー

1def search 2 @items = Item.all 3 gon.items = @items 4 if _**ajax通信が行われたとき**_ 5 map_item = Item.where(lat: lat >= mapNE_lat, lat: lat <= mapSW_lat, lng: lng >= mapNE_lng, lng: <= mapSW_lng) 6 render json:{ map_item: map_item } 7 end 8 end

と記述しないとページを開いた時点で処理がされてしまい、mapNE_latの値がないまま進んでしまうと考えていますが、ajax通信が行われたときというif条件式が調べても分かりませんでした。

質問が複数になってしまい申し訳ありません。
わかるものだけで構いませんのでどうかご教授ください。

追記
別のやり方としてこんなのも考えたのですが、うまくいきません。
どちらでも処理が行えればいいのですが、こちらはうまく値を表示できなくて困ってます。
うまく名前や住所を表示して挿入できないでしょうか

javascript

1let items = gon.items; 2google.maps.event.addListener(map, 'idle',function() { 3 var mapMarkerData = []; 4 5 //地図の範囲内を取得 6 var bounds = map.getBounds(); 7 mapNE_lat = bounds.getNorthEast().lat(); 8 mapSW_lat = bounds.getSouthWest().lat(); 9 mapNE_lng = bounds.getNorthEast().lng(); 10 mapSW_lng = bounds.getSouthWest().lng(); 11 12 // console.log(mapNE_lat); 13 // console.log(mapSW_lat); 14 //console.log(mapNE_lng); 15 // console.log(mapSW_lng); 16 17 const list = document.getElementById("list"); 18 19 20 var j = 0; 21 for (var i = 0; i < items.length; i++) { 22 if (mapNE_lat >= items[i]['lat'] && items[i]['lat'] >= mapSW_lat) { 23 if (mapNE_lng >= items[i]['lng'] && items[i]['lng'] >= mapSW_lng) { 24 var name = items[i]['name'] 25 var address = items[i]['address'] 26 var image = items[i]['image'] 27 j++; 28 list.insertAdjacentHTML(`afterend`, ` 29 <div class='item-info'> 30 <h5 class='item-name2'> 31 <%= name %></h5> 32 <h5 class='item-name'> 33 <%= address %> 34 </h5> 35 <div class='item-img-content'> 36 <%= image_tag image, class: "item-img" %> 37 </div> 38 </div> 39 `); 40 } 41 } 42 }

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

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

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

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

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

guest

回答1

0

自己解決

javascipt

1google.maps.event.addListener(map, 'idle',function() { 2 var mapMarkerData = []; 3 4 //地図の範囲内を取得 5 var bounds = map.getBounds(); 6 mapNE_lat = bounds.getNorthEast().lat(); 7 mapSW_lat = bounds.getSouthWest().lat(); 8 mapNE_lng = bounds.getNorthEast().lng(); 9 mapSW_lng = bounds.getSouthWest().lng(); 10 11 12 13 var j = 0; 14 for (var i = 0; i < items.length; i++) { 15 if (mapNE_lat >= items[i]['latitude'] && items[i]['latitude'] >= mapSW_lat) { 16 if (mapNE_lng >= items[i]['studios'] && items[i]['studios'] >= mapSW_lng) { 17 mapMarkerData[j] = items[i]; 18 j++; 19 20 } 21 } 22 } 23 console.log(mapMarkerData) 24 25 $.ajax({ 26 url: '/items/search', 27 type: 'GET', 28 dataType: 'json', 29 data: { 30 mapMarkerData: mapMarkerData 31 }, 32 });

みたいな形で落ち着きました。

投稿2022/04/20 07:47

hk5232

総合スコア22

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問