谷歌映射直到我刷新后才显示

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

我遵循了官方文档中的简单说明: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":

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

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?

所以，如果我打开“主页”页面，然后导航到“Contact”，就没有地图了。但如果我刷新“联系人”网站，就会出现地图。有什么问题吗?

Thank you.

谢谢你！

EDIT1:

EDIT1:

I tried to put my code inside ready function:

我试着把代码放在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);

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

但是当我这样做的时候，代码就会在这一行中断:

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

6 个解决方案

#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.

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

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

尝试在脚本块的末尾添加这个，除了“load”行:

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

#2

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.

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

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.

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

#3

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

#4

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.

把超时设置为6秒对我来说很有用。地图越大需要的时间就越长，所以要根据地图的大小来判断超时时间。

#5

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.

问题似乎在于您的turbolinks，将所有活动绑定到一个函数中，并在文档上调用该函数。既准备好了，也准备好了。页面:加载事件。

$(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.

实际上这里的文档。当您刷新页面时将调用ready。但是page:一旦您从另一个链接来到这个页面，就会调用load事件。

#6

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

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

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

#1