RailsでGoogle mapsを使いこなすためのメモ 3 / 表示範囲に含まれる情報をDBから取り出す

地図が無事に表示できたところで、次はその表示範囲に含まれるお店の情報をデータベースから取得して、云々…というところです。お店のテーブル shops に、緯度(latitude)と経度(longitude)のカラムがあるという前提です。

  
RailsでGoogle mapsを使いこなすためのメモ

  1. 地図(現在位置を中心とした地図)を表示

  2. 地図デザインのカスタマイズ

  3. 表示範囲に含まれる情報をDBから取り出す 今ココ

  4. 取り出したデータを使って地図にピンを落とす

  5. すでに存在するピンは再度取得しないようにする

まず、表示されている地図の範囲を取得する必要があるので、getBounds()を使います。
前回のコードに下記を追加しました。

javascript

google_maps.coffee.erb


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に定義しておいてください。
こんな感じかと思います。

  get 'shops/marker',  to: 'shops#marker',  as: :marker

ShopsController

コントローラー側で、受け取った緯度経度を使ってデータベースを検索するにはこんな感じ。


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テーブルから取り出しています。
  
あとはこれを使って地図にマーカーを落とせばいい、というところまできました。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた