Corrigindo ‘O mapa não aparece até que eu atualize’ ao trabalhar com Turbolinks em Ruby on Rails

Eu me deparei com esse problema há algum tempo e mal encontrei uma solução prática.

Este problema consiste em um “conflito” entre a API do Google Maps e a gema Turbolinks.

Para obter mais detalhes sobre o problema, visite este link

Portanto, para evitar esse conflito, você precisará instalar jQuery.turbolinks.

Para fazer isso, siga as indicações aqui
ou se você estiver com pressa para ler tudo isso,
em seu gemfile, adicione:

gem 'jquery-turbolinks'

em seguida, salve-o e execute a instalação do pacote.

Depois, vá para o seu application.js emassets/javascripts/

E colocado //= require jquery.turbolinks entre //= require jquerye//= require turbolinks

Deste jeito :

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require twitter/bootstrap
//........... other javascripts files here
//= require turbolinks

Agora você está pronto para definir o código.

Como você sabe, a API do Google Maps carrega o * Map Loader * primeiro por meio do link que você obtém e, em seguida, você chama a função que mostra o mapa por meio de:

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

Faremos exatamente a mesma coisa, exceto que faremos em relação aos parâmetros de nossa situação.

Chamaremos o carregador de mapa e somente quando o carregador de mapa for carregado e a página estiver carregada e pronta, então chamaremos para o mapa.

Primeiro, no mesmo arquivo js que contém sua função de inicialização, defina uma variável (torne-a global) e atribua essa função a ela. ( Decidi chamar a variável de pronta )

ready = function() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +'libraries=places&'+'callback=initialize';
   document.body.appendChild(script);
  };

O que essa função está fazendo é criar um elemento de script para conter o link para o carregador de mapa e adicionar esse fragmento a ele. Este fragmento é o que chama o ‘map shower’ depois que o ‘map loader’ termina de carregar.&callback=initialize

Agora iremos para a parte em que carregamos essas coisas quando a página terminar de carregar.

Usaremos para fazer uso da variável que usamos e usaremos para garantir que a página tenha terminado de carregar (o primeiro carregamento) e, em seguida, usaremos para carregar o carregador de mapa e mostrar o mapa na mudança de página ( segundos carregamentos e muitos mais carregamentos).$.getScript()$(document).ready$(document).on('page:load')

O que você fará (o que eu prefiro e recomendo que você faça) é colocá-lo na parte inferior da sua página de layout.

$.getScript('/assets/You_Js_File_name',function(){
                $(document).ready(ready); //calls for the function we defined above (first loading)
                $(document).on('page:load',ready); // the same but for the other loadings
              });

Salve, atualize a página, o mapa mostra, vá para outras partes do site, volte para a página do mapa, carrega corretamente. Yay.

Espero ter ajudado.

Para obter uma documentação mais aprofundada e detalhada sobre esses problemas, visite:
link1
link2

PS: Existem muitas soluções por aí, mas não funcionaram para mim por um motivo ou outro, então eu vim com a minha, e funcionou muito bem, este post pretende compartilhar minha experiência com o problema, no que diz respeito a que eu Não sou profissional, apenas um aluno iniciante que lutou muito com isso e decidiu compartilhar sua solução

Obrigado.