Google Maps script only loads the first time I open page

Question

following this tutorial I've added a google maps component to my rails 4 project. Now when I open my page in the browser (the map is on the landing/index page), the map shows, but when I use the navigation to move around, and come back the map is not there. I am new to rails and have no idea how to fix it, or why it happens. There are no errors in the console.

Here is the html of the page I'm talking about:

<script>
function initialize() {
var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(46.04236, 14.48786)
  };

  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
}

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

window.onload = loadScript;
</script>

<div class="col-xs-12 ">
    <div class="panel panel-default">
        <div class="panel-heading center">
            <h3 class="panel-title">Lokacija</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6 center">
                <br />
                <br />
                <br/ >
                <br />
                <p>Institut Jožef Stefan</p>
                <p>Knjižnica</p>
                <p>Jamova 39</p>
                <p>1000 Ljubljana</p>
                <br />
            </div>
            <div class="col-xs-6">
            <div id="googleMap"></div>
            </div>              
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title">Telefonske številke</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6">
                <p>informacije:</p>
                <p>izposoja:</p>
                <p>bibliografije:</p>
                <p>vodja knjižnice:</p>
                <p>fax:</p>                                             
            </div>
            <div class="col-xs-6 right">
                <p>+386 1 477-3304</p>
                <p>+386 1 477-3304</p>
                <p>+386 1 477-3247</p>
                <p>+386 1 477-3258</p>
                <p>+386 1 477-3152</p>
            </div>
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title">Delovni Čas</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6">
                <p>ponedeljek-četrtek:</p>
                <p>petek:</p>
            </div>
            <div class="col-xs-6 right">
                <p>8.00-19.00</p>
                <p>8.00-17.00</p>
            </div>
        </div>
        <div class="panel-heading center">
            <h3 class="panel-title linktext"><%= link_to 'Cenik', zic_cenik_path %></h3>
        </div>

    </div>
</div>

Everything gmaps related is on here. If you need more info please let me know and I'll edit the main post. I also have a gitHub repo of the whole page. The relevant view here would be zic/index .

Answer 1

我遇到了同样的问题，可以通过以下方法解决此问题，而不必禁用涡轮链接：

google.maps.event.addDomListener(document, 'page:change', initialize);

Answer 2

It sounds like the issue is that you have Turbolinks turned on, and when you navigate away and then come back, the page isn't actually receiving the load message. You could either turn off Turbolinks, add the google maps script tag to the header in your application layout file, or try to reload it using the "page:changed" event. More information on Turbolinks can be found here: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks