直到我刷新,Google地图才会显示

Question

我在官方文档中遵循了这些简单的说明:https://developers.google.com/maps/documentation/javascript/tutorial

当我第一次打开网站时,一切正常.地图显示正常.问题是当我导航到网站的其他部分时.在我返回到地图应该的位置后,地图不会显示.

这是基本结构:

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

"联系方式"中的Javascript:

    <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;"/>

因此,如果我在"主页"页面上打开该网站,然后导航到"联系人",则没有地图.但是,如果我刷新"联系"网站,则会显示地图.可能有什么问题？

谢谢.

EDIT1:

我试着把我的代码放在ready函数中:

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

但是,当我这样做时,代码在此行中断:

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

Answer 1

您是否在启用 turbolinks 的情况下使用 Rails 4？如果是这样，load当您从主页移动到联系人页面时，该事件将不会触发 - 但点击刷新会完全加载整个页面，因此加载事件确实会触发。这将与您所描述的行为一致。

除了以下'load'行之外，尝试在脚本块的末尾添加：

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

Answer 2

很难判断可能出了什么问题。当您说您导航到网站的其他部分时，它们是否都包含在一个 HTML 文件中？或者也许它们是通过 AJAX 动态加载的？当地图未正确显示时，尝试在地图上触发调整大小事件。

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

或者，当您“导航”到它应该在但未显示的某个位置后，可以调用此方法。