Getting googlemaps javascript and turbo links working together

Hey Chris - been struggling with this off and on for a bit now. Just trying to add basic google maps using the javascript API (not the gems) to a rails 4.2 app and am having all of the various issues that seem to pop up on stack overflow. The google API itself is really well documented and pretty straightforward, but I can't seem to find a clear consensus about how to make this work with turbo links.

( If I turn off turbo links, everything works fine. But turning off turbo links causes some unwelcome behavior when running as a 'native-ish' app in iOS/safari.)

So, with turbo links on, there are a couple of errors - the first of which is the map not displaying at all without a full page reload, and the second is a javascript error about loading the googlemaps API multiple times.

So, my questions are -

1. Where do you recommend placing the googlemaps API script tag? (In which file, and in which position in that file). I'm currently including it with a javascript_include_tag at the bottom of the view where the map is displayed.

2. How should my jQuery code for initializing the gmaps and setting the parameters be included? I'm currently using the jQuery.turbolinks gem and including my jQuery code for gmaps in a standard closure per the jQuery.turbolinks docs. (I think I added the jQuery.turbolinks gem to fix this problem in the first place - so I'm happy to remove it if it's not necessary)

And again, everything works if I turn the turbo links off, so it is seems like it has to be something with either the load order or the timing of the event listener.

any suggestions appreciated!...chris

Hey,

Sometimes the way .on page:load and on ready work are a little different with Turbolinks. Best way to deal with it as following:

var ready = function () {
// your code goes here
}

$(document).ready(ready);
$(document).on('page:load', ready);

Trying using that and see if it works.

Hi Tabish - Thanks for the suggestion! Unfortunately that did not take care of the problem. I'm trying a few other things now and will post an update if I can get this figured out.

With the number of sites using googlemaps, it doesn't seem like this should be all that difficult!

Based on the suggestion from Tabish above, I started playing around with a couple of different ideas. And the solution that seems to be working is to add a second 'addDomListener' statement into my js file. I am using the jQuery-turbolinks gem, so the file looks like -

$(document).ready(function()){

 function initMap(){

  .....google maps code here

 }

 google.maps.event.addDomListener(window, 'load', initMap);

 google.maps.event.addDomListener(window, 'page:load', initMap);

}

And I'm actually fairly sure the 2 statements can be combined into one, just don't have the desire to spend anymore time on this currently!!!

You may want to look at this: http://reed.github.io/turbolinks-compatibility/ :)

I'm also still running into issues where randomly google maps is erroring.

I've also got my google maps in the head of my application layout and I'm wondering if thats inefficient. Should I keep it there and load it once so its always available? Or load it only on the pages that need it?

Still wondering.