Loading Javascript After Google Maps API Rails APP
Yesterday in another question, with the help of another user, I can managed to use the Geocoder and Gmaps4rails gem. It is working just fine, but after I add the script on the page, the others Javascript doesn't work any more.
So if I refresh the page works perfect, Fotorama and the Gmaps works, but, when I am redirected by another link on the application Fotoroma doesn't load, actually only Gmaps work. After this happened in the entire application the others JS stopped work.
The view where the GMaps are:
<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>
At the bottom the JS Scripts:
<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>
The application JS:
//= require bootstrap
//= require underscore
//= require gmaps/google
//= require turbolinks
//= require fotorama
//= require_tree .
The layout of application
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
I already try to change the include tag for:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
Don't solve the problem. If I deleted from the view the JS importation scripts, the map doesn't work, but the JS problems stop.
I try to in the importation of gmaps do this:
<script src="//maps.google.com/maps/api/js?key=XXXXXX" data-turbolinks-eval=false></script>
Doesn't work to.
When the problem happen, the console shows this:
Anyone had this problem or know how to solve it?
I can managed to workaround this problem. I don't think this is the solution, but if anyone have the same issue, maybe can help.
First needs to correct the link of the source of the script. Changing of
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
for:
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
I find this by the comment of stevenm here:
https://github.com/apneadiving/Google-Maps-for-Rails/issues/166
And also change the location of the Scritps to the head of
app/views/layout/application.html.erb
It should be like this:
<%= 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 %>
After this, at least for me, works just fine.