Javascript 谷歌地图没有'；我要刷新才能显示

我在官方文件中遵循这些简单的指示：

当我第一次打开网站时，一切都很好。地图显示正常。问题是当我导航到站点的其他部分时。当我回到地图应该在的位置后，地图就不显示了

以下是基本结构：

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

但当我这样做时，代码在这一行中断：

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

---

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

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

---

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

您是否使用启用了TurboLink的Rails 4？如果是这样，当您从主页移动到联系人页面时，

load

事件将不会触发–但点击刷新将完全加载整个页面，因此加载事件不会触发。这与您描述的行为一致

尝试在脚本块的末尾添加此命令，除了

'load'

行之外：

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

---

问题似乎在于您的TurboLink，将所有活动绑定到一个函数中，并在

document.ready

和

document.page:load

事件中调用该函数

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

---

实际上，刷新页面时将调用document.ready。但是，一旦您从另一个链接访问此页面，将调用page:load事件。

只要为初始化google地图的函数提供一个延迟，它就会正常工作

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

---

将超时设置为6秒对我来说很有效。地图越大，所需时间越长，因此请根据地图大小确定超时时间。

我已修复了在使用jQuery加载页面后触发代码的问题

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

---

谢谢你，但没什么区别。我仍然需要刷新。可能是窗口不是“page:load”事件的正确作用域。Akshat引用的jQuery$（document）.ready和（'page:load'）事件监听器上的$（document）.on将是合适的触发器–您可以用jQuery的监听器替换Google建议的监听器。我尝试了许多组合，但都不起作用。我更新了我的问题。我仍然相信您的问题与TurboLink的使用有关。我会尝试禁用turbolinks（）并查看地图是否正确更新。如果确实如此，并且您仍然希望使用turbolinks，则重新安装turbolinks并更新侦听事件的javascript代码。我得到以下错误：

uncaughtTypeError:无法读取未定义的

的属性“event”。有什么想法吗？是的，我使用的是Rails 4.ok，这是由于turbolinks的缘故，在你的布局中加入谷歌脚本来快速修复。顺便说一句，我刚刚发布了一个新版本的gmaps4rails，它可能会有所帮助@一开始-我应该把谷歌脚本放在哪里？我把它们放在views/layouts/application.html.erb中，但只有在刷新“联系人”页面时，它才起作用。如果我打开主页并单击“联系人”，则没有地图。只有当我刷新页面时，地图才会显示。那么我就不明白这个问题了，sorry@ZdravkoVajudin请你制作一个JSFIDLE.net来说明这个问题好吗？您可能只需要使用rails应用程序生成的原始HTML。我尝试了许多组合，但无法使其工作。我把这段代码放在ready函数中：$.getScript（'）；var-mapOptions={center:new google.maps.LatLng（-34.397150.644），zoom:8，mapTypeId:google.maps.mapTypeId.ROADMAP}；var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；--问题是，当我编写代码时，什么都不起作用，甚至其他Javascript函数也不起作用。虽然我没有使用谷歌地图，但我在使用谷歌图表api时也遇到了同样的问题。您的javascript中似乎出现了一些错误，导致它旁边的所有其他脚本无法执行。您必须在浏览器控制台中检查它，错误如下：center:new google.maps.LatLng（-34.397150.644）。我不知道为什么这行是一个问题，如果它的c/p从谷歌。他们不都包含在一个HTML文件。问题是，每当我点击其他链接时，地图就会消失。只刷新站点where is map显示地图。不幸的是，google.maps.event.trigger（地图“resize”）；没用。

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

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