2017-07-09 5 views
0

Gestern in einer anderen Frage, mit der Hilfe eines anderen Benutzers, kann ich den Geocoder und Gmaps4rails Gem verwenden. Es funktioniert gut, aber nachdem ich das Skript auf der Seite hinzugefügt habe, funktioniert das andere Javascript nicht mehr.
Also, wenn ich die Seite aktualisieren funktioniert perfekt, Fotorama und die Gmaps funktioniert, aber, wenn ich von einem anderen Link auf der Anwendung umgeleitet wird Fotoroma nicht geladen, eigentlich funktionieren nur Gmaps. Nachdem dies in der gesamten Anwendung passiert ist, haben die anderen JS ihre Arbeit beendet.Laden von Javascript nach Google Maps API Rails APP

Die Ansicht, wo die GMaps sind:

<script src="//maps.google.com/maps/api/js?key=XXXXXX"></script> 
</script> 
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> 
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> 

<div class="fotorama col-sm-6" 
     data-width="700" 
     data-ratio="3/2" 
     data-nav="thumbs" 
     data-thumbheight="48" 
     data-allowfullscreen="true"> 
    <% @property.images.each do |imagem| %> 
    <%= link_to imagem.url do %> 
     <%= image_tag(imagem.url) %> 
    <% end if @property.images? %> 
    <% end %> 
</div> 
<h3>Description of the property:</h3> 
<%= @property.description %> 
<h3>Property in the map:</h3> 
<div class="col-sm-10"> 
<div style='width: 800px;'> 
    <div id="map" style='width: 800px; height: 400px;'></div> 
</div> 
</div> 

JS Scripts Am Boden:

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

Die Anwendung JS:

//= require bootstrap  
//= require underscore 
//= require gmaps/google 
//= require turbolinks 
//= require fotorama 
//= require_tree . 

Das Layout der Anwendung

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 

ich schon versuchen, das zu ändern, sind Tag für:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %> 

das Problem nicht lösen Sie. Wenn ich die JS-Import-Skripts aus der Ansicht löschte, funktioniert die Map nicht, aber die JS-Probleme werden gestoppt.
ich versuchen, in der Einfuhr von gmaps dies zu tun:

<script src="//maps.google.com/maps/api/js?key=XXXXXX" data-turbolinks-eval=false></script> 

Hat nicht funktioniert.

Wenn das Problem passiert, zeigt die Konsole dies:

enter image description here


jemand dieses Problem hatte oder wissen, wie es zu lösen?

Antwort

0

Ich kann dieses Problem umgehen. Ich glaube nicht, dass dies die Lösung ist, aber wenn jemand das gleiche Problem hat, kann es vielleicht helfen.
Zuerst muss der Link der Quelle des Skripts korrigiert werden. Ändern von

<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> 

für:

<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 

Ich finde dies durch den Kommentar von SteveNM hier:

https://github.com/apneadiving/Google-Maps-for-Rails/issues/166 

Und auch die Lage des scritps an den Leiter der

ändern
app/views/layout/application.html.erb 

Es sollte so sein:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<script></script> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %> 
<script type='text/javascript' src="//maps.google.com/maps/api/js?key=AIzaSyB52XBCs9iJ2UTTHkWCePRkEci7Hlrn1-k"></script> 
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
<script type='text/javascript' src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js'></script> 
<%= csrf_meta_tags %> 

Danach, zumindest für mich, funktioniert gut.