Google maps doesn't show until I refresh

Question

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),

Answer 1

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);

Answer 2

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);