Verwendung von Google Maps mit Paginierung in Rails

Ich habe eine Ansicht, in der ich eine paginierte Liste von Objekten sowie eine Google Map anzeigen möchte, die diese Objekte anzeigt. Ich habe eine "Reise" -Ansicht, die "Punkte" anzeigt, die zu dieser Reise gehören. Jeder Punkt hat ein lat/lng. Die Seite lädt zunächst richtig, aber wenn ich auf verschiedene Seiten bewegen beginne ich Fehler immer wie:Verwendung von Google Maps mit Paginierung in Rails

"You have included the Google Maps API multiple times on this page. This may cause unexpected errors." 

message: "not a LatLng or LatLngLiteral: in property lat: not a number" 
name: "InvalidValueError"

In meinem Gemfile:

gem 'gmaps4rails', '2.1.2' 
gem 'underscore-rails' 
gem 'gmaps'

In app/assets/Javascripts/application.js:

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require underscore 
//= require gmaps/google 
//= require_tree .

Mein Controller:

def show 
    @trip = Trip.find(params[:id]) 
    @trip_points = @trip.trip_points 

    @markers = Gmaps4rails.build_markers(@trip_points) do |pt, marker| 
     next if pt.lat.nil? || pt.lon.nil? 
     marker.lat pt.lat 
     marker.lng pt.lon 
    end 
    @markers.reject! { |m| m.empty? } 
    @trip_points = @trip_points.paginate(page: params[:page]) 
    end

Ich möchte alle Punkte auf der Karte anzeigen, während die Ansicht der Punkte paginiert wird.

Meine Ansicht:

<script src="//maps.google.com/maps/api/js?key=MYAPIKEY" type="text/javascript"></script> 
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> 

<div class="row"> 
    <aside class="col-md-6"> 
    <%= will_paginate @trip_points %> 
    <ul class="trip_points"> 
     <% if @trip.trip_points.any? %> 
     <%= render @trip_points %> 
     <% else %> 
     <%= render 'trip_points/add_point', last: true, index: 0 %> 
     <% end %> 
    </ul> 
    <%= will_paginate @trip_points %> 

    </aside> 
    <div class="col-md-6"> 
    <div id="map" style='width: 100%; height: 800px; margin-top: 2em;'></div> 
    </div> 
</div> 

<script type="text/javascript"> 
    handler = Gmaps.build('Google'); 
    handler.buildMap({ provider: {}, 
        internal: {id: 'map'}}, 
        function(){ 
    markers = handler.addMarkers(<%= raw @markers.to_json %>); 
    handler.bounds.extendWith(markers); 
    }); 
</script>

Ich habe einen Teil _trip_point_.html.erb

Soweit ich sagen kann, ich bin auch nur die Google Maps API einmal auf meiner Seite. Sollten die .js woanders in der Anwendung hingehen?

Quelle

2017-01-06 Greg Merritt