RailsでGoogle mapsを使いこなすためのメモ 4 / 取り出したデータを使って地図にピンを落とす

前回の記事で、データベースからデータを取得できたので、今度はそれをつかって地図上にピンを落としていきます。グーグル用語ではマーカーです。

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

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

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

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

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

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

ShopsControllerのmarkerアクションに対応する.js.erbをつくります。

shops/marker.js.erb


<% @locations.each do |location| %>

    // marker
    var marker_<%= location.id %> = new google.maps.Marker({
        position: new google.maps.LatLng(<%= location.latitude %>, <%= location.longitude %>),
        draggable: false,
        map: map_canvas,
        animation: google.maps.Animation.DROP
        });

<% end %>

@locationsに入っているお店の数だけ、ピンを落とす処理を繰り返します。
positionのところに<%= location.latitude %>と<%= location.longitude %>で座標情報を動的に挿入しています。

これで、ピンが地図に落ちるはず!

  
addListenerで、監視しているので、ユーザーが地図の操作を行うたびに、その地図の表示範囲をもとにしたデータをDBから取得してピンを落とします。
ただ問題があり、地図を移動させた時に、既に落ちているピンまで再度取得し、もう一度ピンを落としてしまします。

次は「すでに落ちているピンは除いてね」という処理を加えるところから。

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

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でスクレイピングしてみた