Search code examples
javascriptgoogle-mapsruby-on-rails-5turbolinks-5

prevent google maps loaded multiple times with turbolinks

I'm using rails 5 and turbolinks 5, I don't want to disable turbolinks, but it is loading google maps api multiple times.

I've searched a lot, and I found lots of solutions for rails 4 and turbolinks 3. I tried all the solutions I saw but none of them worked.

One of them looks simply:

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript" data-turbolinks-eval="always"></script>

but still loading google maps multiple times.

Another one of them was:

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript" data-turbolinks-track="reload"></script>

but is neither working.

A promising solution was:

var ready;
ready = function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp';
    document.body.appendChild(script);
};

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

but this one sometimes is not loading google maps before the map inits and sometimes it is returning the error of multiple loads.

I read a lot, there's a lot of questions asking the same, but I don't find a working solution in any of them.

PD: I see now that I deleted the api key of google maps, it is still working but I read an error message in console.

Google Maps API warning: NoApiKeys

Will be any problem if I use google maps without api key in production?

Solution

  • I think I solved it, it seems that it is not a good idea to place the javascripts at the end of the body, as I was doing.

    In turbolinks 5 documentation it is said to place it on the <head>.

    Now I placed the scripts on the head and it seems it's working without problem, and I see no multiple loads messages for google maps api.