I was following these simple instructions in official documentation:

Everything works fine when I open the site for the first time. Map shows normally. The problem is when I navigate to other parts of the site. After I return to the location where map should be, the map doesn't show.

Here is the basic structure:

<ul>
  <li><%= link_to "Home", root_path %></li>
  <li><%= link_to "About",   about_path %></li>
  <li><%= link_to "Contact", contact_path %></li>
</ul>

Javascript inside "Contact":

    <script type="text/javascript"
      src=";sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<h1>Contact</h1>
<p>
  Address & phone number
</p>

<div id="map-canvas" style="width: 35em; height: 35em;"/>

So, if I open the site on "Home" page and then navigate to "Contact", there is no map. But if I refresh the "Contact" site, map appears. What could be a problem?

Thank you.

EDIT1:

I tried to put my code inside ready function:

$.getScript(';sensor=false');

        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

But when I do it like that, code breaks at this line:

center: new google.maps.LatLng(-34.397, 150.644),

I was following these simple instructions in official documentation: https://developers.google.com/maps/documentation/javascript/tutorial

Everything works fine when I open the site for the first time. Map shows normally. The problem is when I navigate to other parts of the site. After I return to the location where map should be, the map doesn't show.

Here is the basic structure:

<ul>
  <li><%= link_to "Home", root_path %></li>
  <li><%= link_to "About",   about_path %></li>
  <li><%= link_to "Contact", contact_path %></li>
</ul>

Javascript inside "Contact":

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<h1>Contact</h1>
<p>
  Address & phone number
</p>

<div id="map-canvas" style="width: 35em; height: 35em;"/>

So, if I open the site on "Home" page and then navigate to "Contact", there is no map. But if I refresh the "Contact" site, map appears. What could be a problem?

Thank you.

EDIT1:

I tried to put my code inside ready function:

$.getScript('https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false');

        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

But when I do it like that, code breaks at this line:

center: new google.maps.LatLng(-34.397, 150.644),

• javascript
• jquery
• ruby-on-rails
• google-maps

• Yes, I'm using Rails 4. – Cristiano Commented Nov 4, 2013 at 19:10
• ok so its due to turbolinks, put google scripts in your layout to have a quick fix. BTW, I just released a new version of gmaps4rails, it could help! – apneadiving Commented Nov 4, 2013 at 20:00
• @apneadiving - Where should I put google scripts? I put them inside views/layouts/application.html.erb but it still only works if I refresh 'Contact' page. If I open home page and click on 'Contact', there is no map. Map shows only when I refresh that page. – Cristiano Commented Nov 4, 2013 at 21:12
• dont understand the issue then, sorry – apneadiving Commented Nov 4, 2013 at 21:20
• @ZdravkoVajudin Please can you make a jsfiddle.net illustrating the problem at all? You may just have to use the raw HTML generated by your rails app. – Rob Schmuecker Commented Nov 6, 2013 at 8:40

6 Answers 6

Are you using Rails 4 with turbolinks enabled? If so, the load event will not fire when you move from the Home page to the Contact page – but hitting refresh fully loads the whole page, so the load event does fire. This would be consistent with the behaviour you're describing.

Try adding this at the end of your script block, in addition to the 'load' line:

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

Just provide a delay to the function that initialize the google map and it would work just fine.

setTimeout(function() {
  //code for initializing the google map
}, 1000);

Setting the timeout to six seconds worked for me. The bigger the map the longer it takes, so gauge your timeout based on your map size.

It's hard to tell what might be going wrong. When you say you navigate to other parts of the site, are they all contained in one HTML file? Or perhaps they are loaded in dynamically with AJAX? Try triggering a resize event on the map when it's not showing properly.

google.maps.event.trigger(map, 'resize');

Alternatively this can be called after when you "navigate" to somewhere where it should be but isn't showing.

The problem seems to be with your turbolinks, bind your all activities in one function and call that function on document.ready as well as at document.page:load event.

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

Actually here document.ready will be called when you refresh the page. But page:load event will be called once you come to this page from another link.

I've fixed this triggering the code after page is loaded using jQuery

$(document).on("pageshow","#contact",function(){
  initialize();
});