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

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

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

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

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

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

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

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

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

shops/marker.js.erb

1
2
3
4
5
6
7
8
9
10
11
12
13
<% @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から取得してピンを落とします。
ただ問題があり、地図を移動させた時に、既に落ちているピンまで再度取得し、もう一度ピンを落としてしまします。

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