RailsでGoogle mapsを使いこなすためのメモ 3 / 表示範囲に含まれる情報をDBから取り出す
地図が無事に表示できたところで、次はその表示範囲に含まれるお店の情報をデータベースから取得して、云々…というところです。お店のテーブル shops に、緯度（latitude）と経度（longitude）のカラムがあるという前提です。
RailsでGoogle mapsを使いこなすためのメモ
まず、表示されている地図の範囲を取得する必要があるので、getBounds()を使います。
前回のコードに下記を追加しました。
javascript
google_maps.coffee.erb
coffee
1
2
3
4
5
6
7
8
9
10
11
12
google.maps.event.addListener(map_canvas, 'idle', ->
# 表示範囲を取得
pos = map_canvas.getBounds()
north = pos.getNorthEast().lat()
south = pos.getSouthWest().lat()
east = pos.getNorthEast().lng()
west = pos.getSouthWest().lng()
# コントローラーに値をGETパラメータで渡す
$.getScript("/shops/marker?&north=#{north}&south=#{south}&east=#{east}&west=#{west}")
)
addListenerで、マップの表示範囲やズームの変更など、ユーザーの行動を監視することができます。
イベントは色々ありますが、'idle'がいいと思います。
getBounds()をつかって、東西南北それぞれの座標が取れたら、それをShopsControllerに渡したいので、そういう風にURLをつくってみました。
これでコントローラ側ではparams[:north]といった具合に値を取得できます。
/shops/markerに相当するパスはあらかじめ、routes.rbに定義しておいてください。
こんな感じかと思います。
ruby
1
2
get 'shops/marker', to: 'shops#marker', as: :marker
ShopsController
コントローラー側で、受け取った緯度経度を使ってデータベースを検索するにはこんな感じ。
ruby
1
2
3
4
5
6
7
8
def marker
# 北から南、東から西の範囲をつくる
lat = Range.new(*[params["north"], params["south"]].sort)
lon = Range.new(*[params["east"], params["west"]].sort)
# データ取得
@locations = Shop.where(latitude: lat, longitude: lon)
end
緯度が y1〜y2 までの間で、経度が x1〜x2 までの間という条件に当てはまるお店をshopsテーブルから取り出しています。
あとはこれを使って地図にマーカーを落とせばいい、というところまできました。