Search code examples
javascriptruby-on-railsgoogle-maps-api-3turbolinks

data-turbolinks-permanent prevents js from running & gets rid of google map markers


I have added the data-turbolinks-permanent to the div:

<div id="map" data-turbolinks-permanent></div>

but upon changing pages and coming back my map markers disappear.

The following is the way I include the js:

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?v=3&key=key&libraries=places&callback=loadMap", "async" => true, "defer" => true -%>
<%= javascript_include_tag 'map.js' -%>

when I include data-turbolinks-track => reload to the google maps js include the markers show up upon page change but it is of course reloaded; I would like the elements as well as the js to persist across page loads.

Note: the key parameter in the gmaps js include is intended to hide my API key


Solution

  • I have instead decided to use locationStorage and sessionStorage HTML5 API's; What I needed was to remember the state of the application when going back:

    Removed the data-turbolinks-permanent from the #map div and then used the 'data-turbolinks-track => reload' on the google map api js include and then used the localStorage & sessionStorage API's.

    About localStorage and sessionStorage