0

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 .

Miha Šušteršič
  • 9,742
  • 25
  • 92
  • 163
  • Here is nothing about the Rails. – Roman Kiselenko Apr 19 '15 at 09:46
  • pretty sure this has something to do with the way rails handles views – Miha Šušteršič Apr 19 '15 at 09:48
  • Some things to try... put the script tag for google maps in the page header, or add &callback=isNaN as in this answer [http://stackoverflow.com/questions/7811985/warning-a-call-to-document-write-from-an-asynchronously-loaded-external-scrip#comments-7812160](http://stackoverflow.com/questions/7811985/warning-a-call-to-document-write-from-an-asynchronously-loaded-external-scrip#comments-7812160) – brenzy Apr 19 '15 at 11:29
  • @brenzy thanks for the link. I browsed around a bit and found the 'official' Asynchronous Loading solution, but can't get it to work. Now the error is gone and the map won't load =/ – Miha Šušteršič Apr 19 '15 at 13:06

2 Answers2

2

I had the same issue, worked around it with this line, and didn't have to disable turbolinks:

google.maps.event.addDomListener(document, 'page:change', initialize);
Smugrik
  • 850
  • 7
  • 22
  • 1
    Check info here, chapter 5.2 http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks – Smugrik Aug 08 '15 at 21:03
0

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

brenzy
  • 1,976
  • 11
  • 20