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

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

尝试在脚本块的末尾添加此内容，除了 'load'行之外

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

Answer 2

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

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

或者，当你“导航”到它应该但不显示的地方时，可以调用它。

Answer 3

只是为初始化谷歌地图的功能提供延迟，它会正常工作。

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

Answer 4

将超时设置为6秒对我有用。地图越长，花费的时间越长，因此根据您的地图大小来衡量您的超时。

Answer 5

问题似乎在于您的turbolinks，在一个函数中绑定您的所有活动，并在document.ready和document.page:load事件上调用该函数。

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

实际上，在刷新页面时会调用document.ready。但是，一旦从另一个链接到达此页面，将调用page：load事件。

Answer 6

我已经修复了这个在使用jQuery加载页面后触发代码

Application

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

6 个答案: