Menu
I'm using gmaps4rails to load a map on a "clients" show page. I've integrated turbolinks to make the app speadier all together, but now I'm hitting an issue where I have to refresh the page with the map for the map to show up. All I get is a blank map frame. When I refresh the page, the map shows up correctly.
I tried adding the gem 'jquery-turbolinks', but the problem persists.
In view:
<%= gmaps("map_options" => {:container_class => "map_container_renamed", "zoom" => 15, "auto_zoom" => false},"markers" => { "data" => @json }) %>
In application.js
//= require jquery
//= require turbolinks
//= require jquery.turbolinks
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
Gist of page source where map is blank here.
416
The fix ended up that I need a full page load for the scripts to refresh.
Adding
'data-no-turbolink' => true
to the link that goes to the maps page worked.
For example, if I have an index page of clients, and I have a map of where the client lives on the show page, the link to go to the show page would be formatted as below:
<%= link_to 'View Client', client, class: "btn", 'data-no-turbolink' => true %>
This will cause a full refresh of the html and javascript, instead of just the changed html.
78
Please note, just adding the attribute data-no-turbolink="true" to a link does suppress turbolinks for that link. Clicking on that link does load the entire page rather than replacing the content with turbolinks.
But there are several ways to use turbolinks with gmaps4rails without suppressing turbolinks.
The key to getting something to work with turbolinks, is to use the provided callbacks. In this case, one has to tell gmaps4rails to perform the map loading when turbolinks has loaded a new page.
In general, one can use $(document).on('page:load', function ... ) as, for example, shown in Railscast #390.
The google api script included by the gmap4rails gem requests another script from a google static server. But if the api is dynamically included by turbolinks, the single-origin policy prevents the request to the google static server.
The single-origin policy itself is a useful thing. Although there are a couple of ways to circumvent it, this appears not to be a natural thing to do. Instead, the "right way" to do it is to "prove" that the web page really wants to execute the remote script (the google api) and that the remote script is not requested by a malicious script. This is done by including the script tag that requests the google api directly in the html tree.
Including the google api script tag directly in the html tree is only possible on the first request, when using turbolinks, since all later changes are dynamically injected into the tree by turbolinks. That means that, when using turbolinks, the google api has to be included even on pages that do not show a map.
I've made a pull request, hopefully adding Turbolinks support for gmaps4rails.
If you'd like, have a look at this demo first that shows the use of gmaps4rails with turbolinks:
You can try this out and check if it's working for your project by adding the fork to your Gemfile:
# Gemfile
# ...
gem 'turbolinks'
gem 'gmaps4rails', '~> 2.0.1', git: 'https://github.com/fiedl/Google-Maps-for-Rails.git'
# ...
Furthermore, you need to modify your layout file to include the api in the html head:
<!-- app/views/layouts/application.html.erb -->
<html>
<head>
...
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= gmaps4rails_api_script_tags # <-- THIS IS NEW ----------------- %>
<%= csrf_meta_tags %>
</head>
<body>
...
<%= yield %>
<%= yield :scripts %>
</body>
</html>
If, for some reason, you do not want to use this fork, I see two alternatives to use gmaps4rails together with turbolinks:
Basically doing the same thing as the fork (Solution 1), one can manually add the api scripts to the head in the layout file. Then, when loading a page via turbolinks, one can configure and activate the map using javascript.
This is demonstrated generally for the use with UJS in the gmaps4rails wiki: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Using-with-UJS
If you do not want to add the api scripts globally, there is a way to get around the single-origin policy and load the api dynamically.
I have prepared a gist for that: https://gist.github.com/fiedl/6573175
You would have to add a javascript file that does two things:
You can find out the url to the statics file by opening the api script in a browser and copying the url from the getScript call at the bottom.
But: Doing this fixes the static api request to your locale, which is probably not a good thing if your app is used internationally.
43
I had trouble filling the map canvas on revisits to pages already managed by turbolinks, especially when using the back button. I fixed the issue by adding a listener, for the turbolinks event page:load, to map initialization.
map.js.coffee
google.maps.event.addDomListener(window, 'load', @_setup)
google.maps.event.addDomListener(window, 'page:load', @_setup)
application.js.coffee
//= require jquery
//= require jquery.turbolinks
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
