モーダル - Gmaps4Rails内の特定のマーカーのデータを表示するときに、各マーカーをクリックする方法

Question

Googleマップでマーカーをクリックするたびにモーダルポップアップを表示したかったのです。私は（私の見解では）JavaScriptで以下のスクリプトコードでこれを達成することができました。私の見解では

handler = Gmaps.build('Google', { 
      // builders: { 
      // Marker: InfoBoxBuilder 
      // }, 
      markers: 
        {clusterer: { 
        gridSize: 60, 
        maxZoom: 20, 
        styles: [ { 
         textSize: 10, 
         textColor: '#ff0000', 
         url: 'assets/creative/m1.png', 
         height: 60, 
         width: 60 } 
        , { 
         textSize: 14, 
         textColor: '#ffff00', 
         url:'assets/creative/m2.png', 
         height: 60, 
         width: 60 } 
        , { 
        textSize: 18, 
        textColor: '#0000ff', 
        url: 'assets/creative/m3.png', 
        width: 60, 
        height: 60} 
        ]}} 
     }); 

     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() { 
var i, len, marker, results; 
markers = handler.addMarkers(<%=raw @hash.to_json %>); 
handler.bounds.extendWith(markers); 
handler.fitMapToBounds(); 

results = []; 
for (i = 0, len = markers.length; i < len; i++) { 
    marker = markers[i]; 

    google.maps.event.addListener(marker.getServiceObject(), 'click', function() { 
    $('#myModal').modal('show') 
    return true; 
    }); 

    results.push(true); 

} 

return results; 

}); 

：ここ

<div id="map" style='width: 100%; height: 900px;'> 

    </div> 
    <% @maps.each do |map| %> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel"><%= map.number %></h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 

    </div> 
</div> 
    <% end %> 

は私のコントローラです：

class MapsController < ApplicationController 
    def index 
    @maps = Map.all 
    @hash = Gmaps4rails.build_markers(@maps) do |map, marker| 
     marker.lat map.latitude 
     marker.lng map.longitude 
     marker.title map.number 
     marker.json({:id => map.id }) 

     # marker.infowindow render_to_string(:partial => "/maps/info", :locals => { :object => map}) 
    end 


    end 

    def import 
    Map.import(params[:file]) 
    redirect_to authors_posts_path, notice: "Locations Imported!" 
    end 

    def show 

    end 
end 

私が問題を抱えているのは、マーカーをクリックするたびに、モーダルはすべてのマーカーの最初のオブジェクトのmap.numberのみを表示することです。私は、マーカをクリックすると、モーダルに表示されているデータがクリックされたマーカに対してのみ表示されます。

Modal Image with map.number

Answer 1

私は、あなたが問題にアプローチするための2つの方法を持っていると言うでしょう。

マーカーごとに1つのモーダルを保持する場合は、各モーダルごとに異なるIDを使用します。

<div class="modal fade" id="myModal-<%= map.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

とJSで：

handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() { 
    var i, len, results; 
    markers = handler.addMarkers(<%=raw @hash.to_json %>); 
    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 

    $.each(markers, function(index, marker) { 
    google.maps.event.addListener(marker.getServiceObject(), 'click', function() { 
     $('#myModal-' + marker.id).modal('show'); 
    }); 
    }); 
}); 

---

またはすべてに対して1個のモーダルを持っており、その場でそれを移入：

handler.buildMap({ provider: {}, internal: {id: 'map'}}, function() { 
    var i, len, results; 
    markers = handler.addMarkers(<%=raw @hash.to_json %>); 
    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 

    $.each(markers, function(index, marker) { 
    google.maps.event.addListener(marker.getServiceObject(), 'click', function() { 
     $('#myModal #myModalLabel').text(marker.title); 
     $('#myModal').modal('show'); 
    }); 
    }); 
});