Wie habe ich jeden Marker, wenn angeklickt auf Daten für seine spezifische Markierung in der Modal-Gmaps4Rails

Question

Ich wollte eine modale Pop-up, wenn ich auf einen Marker in Google Maps klicken. Ich konnte dies mit dem folgenden Script-Code in Javascript erreichen (meiner Meinung nach):

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; 

}); 

Aus meiner Sicht:

<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 %> 

Hier mein Controller ist:

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 

Die Das Problem, das ich habe, ist, wenn ich auf einen Marker klicke, zeigt das Modal nur die map.number für das erste Objekt für jeden Marker an. Ich möchte, wenn ich auf einen Marker klicke, für die Daten, die im Modal angezeigt werden, nur für den Marker, auf den geklickt wird.

Modal Image with map.number

Answer 1

Ich würde sagen, Sie Zweiweg haben, das Problem zu nähern.

Wenn Sie ein Modal pro Marker behalten, haben Sie für jedes Modal unterschiedliche IDs.

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

und in den 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'); 
    }); 
    }); 
}); 

---

haben oder eine modale für alle und es on the fly füllen:

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'); 
    }); 
    }); 
});