Google地图无法在网页上完全呈现？

I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.

我的页面上有一个谷歌地图，我自己建立了一个可以随意显示和隐藏的搜索窗格。它包括像一边说地图的200像素。问题是，当我调整地图的大小时，窗格重叠的区域是未渲染的，即地图由于某种原因不会渲染。

Check out this link

看看这个链接

In the Box type in lets say OMDB which is an icao code for an airport and press enter.

在Box类型中，假设OMDB是机场的icao代码，然后按回车键。

The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the map hasn't rendered at all...I have to drag the map around and that only partially renders that area. How can I fix it?

显示结果，您将看到窗格。现在点击全屏链接，然后单击机场选项卡以使面板消失 - 您现在看到地图的一部分根本没有渲染...我必须拖动地图并且仅部分渲染那个地区。我该如何解决？

FYI I've run it on Google Chrome, Firefox and IE8 on Windows XP. Is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does Google just don't like me? :(

仅供参考我在Windows XP上运行Google Chrome，Firefox和IE8。有没有办法强制完成地图的渲染？这是一个非常不稳定的问题，它可能与我的代码有关，还是主机问题？或谷歌只是不喜欢我？ :(

EDIT: See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well. No amount of zooming in and panning is helping clear this :(

编辑：看到旁边的丑陋补丁。它的未渲染区域也应该渲染地图。没有任何放大和平移有助于清除这个:(

11 个解决方案

#1

I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.

我无法重现您遇到的问题，但它看起来类似于我在google地图中看到的另一个问题。

It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.

看起来你可能会遇到谷歌地图确定哪些瓷砖在视野中的方式。它只计算一次，当地图第一次加载到div时，如果div增长，那么就不会绘制足够的地图。幸运的是，这很容易处理。在容器可能已调整大小的任何时候，在地图实例上使用checkResize（）方法，并且将从容器的当前大小重新计算剪切区域。

#2

Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.

是的，你必须提供容器DIV的实际像素高度和宽度。这实际上在Google API中有详细说明。

By using something like this:

通过使用这样的东西：

<div id="map_canvas" style="width:500px;height:500px;"></div>

instead of

代替

<div id="map_canvas"></div>

you'll be home free !

你会在家免费！

#3

As far as I can see it works fine on OS X 10.6.2 in Google Chrome.

据我所知，它在Google Chrome中的OS X 10.6.2上运行良好。

http://i33.tinypic.com/sfe3ah.png

Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)

唯一的问题是哥本哈根机场远离您的应用所在的位置。洛杉矶正处于海洋中;-)

Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.

编辑：我看到了您的屏幕截图，在我看来谷歌地图不会渲染搜索和搜索结果窗格所覆盖的地图部分，然后在隐藏搜索窗格时无法正确触发渲染。

I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.

我无法在Google Maps API中找到合适的渲染触发器，但我认为您应该尝试以编程方式放大或缩小地图或将地图中心移动到其他地方并返回，以便可能强制重新启动 - 渲染地图。

Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').

或者，您可以尝试手动触发一些您认为可能会导致重新渲染地图的事件，例如google.maps.event.trigger（map，'resize'）。

I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)

我知道这些建议感觉像是一种可怕的黑客攻击方式，并且我非常不确定它是否会起作用，但它是我最好的镜头;-)

#4

I faced same issue when i tried to load google map in dialog. It was like google map was not rendered properly. so i find out below solution which may be solve your problem.

当我试图在对话框中加载谷歌地图时，我遇到了同样的问题。这就像谷歌地图没有正确呈现。所以我找到下面的解决方案可能会解决你的问题。

I have triggered google map resize event after initialize dialog please check below snipped code.

我在初始化对话框后触发了谷歌地图调整大小事件，请查看下面的剪切代码。

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Example:

例：

I have loaded map by ajax call then initialized dialog and at last triggered google map resize event.

我已经通过ajax调用然后初始化对话框加载地图，最后触发了谷歌地图调整大小事件。

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $('#inlineEditPopUp').dialog('open');
        google.maps.event.trigger(map, 'resize', function () {
            // your callback content
        });
    }
});

#5

If you are using the jQuery plugin goMap, then you should use:

如果您使用的是jQuery插件goMap，那么您应该使用：

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

Although you should wrap this in an event so that it runs when the map is shown. This how i do it in my code :

虽然您应该将它包装在一个事件中，以便在显示地图时运行它。这是我如何在我的代码中做到的：

$(document).on('click', '#mapClicker', 'initmap', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, 'resize');
      $.goMap.fitBounds();
   }, 100)
});

#6

In Google Maps V3, the little bit of magic you need is documented here: https://developers.google.com/maps/documentation/javascript/reference#Map under events

在Google Maps V3中，您需要的一点点魔力在此处记录：https：//developers.google.com/maps/documentation/javascript/reference#Map

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')

当div改变大小时，开发人员应该在地图上触发此事件：google.maps.event.trigger（map，'resize'）

The trick is knowing when to call this which will be situational depending on your code. If you're using Bootstrap 3 Modals, this works beautifully.

诀窍是知道什么时候调用它，这取决于你的代码将是情境。如果您正在使用Bootstrap 3 Modals，这可以很好地工作。

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, 'resize');
    });

Where gmap is the google.maps.Map object you created.

其中gmap是您创建的google.maps.Map对象。

#7

I know this question is a bit old, but I just came across a similar problem. However, in my case, I was setting the map to be loaded from the body (for a full screen effect) within an iframe.

我知道这个问题有点旧，但我遇到了类似的问题。但是，在我的情况下，我在iframe中设置要从正文加载的地图（用于全屏效果）。

Like Jay mentioned on his answer a width and height must be specified which I had not done then.

就像杰伊在答案中提到的那样，必须指定宽度和高度，我当时没有这样做。

I changed:

我变了：

<body style="margin:0;">

to:

至：

<body style="margin:0;width:100%;height:100%">

and now it loads perfectly on Chrome, Firefox and Internet Explorer 10.

现在它在Chrome，Firefox和Internet Explorer 10上完美加载。

Hopefully this helps anyone out there who also came across this problem. You must specify width and height for it to work across different clients.

希望这可以帮助那些也遇到过这个问题的人。您必须指定宽度和高度才能在不同的客户端之间工作。

Regards

问候

#8

I had the same problem and solved it simply by changing the width of the containing div to "px" instead of "%" (e.g width="700px" instead of "80%"). I guess that google can do better size calculation that way... I don't guarantee for this but it helped me

我有同样的问题并通过简单地将包含div的宽度更改为“px”而不是“％”（例如width =“700px”而不是“80％”）来解决它。我想谷歌可以通过这种方式做更好的尺寸计算......我不保证这一点，但它帮助了我

#9

I had this issue and I found the only solution (in my instance) was to trigger the resize inline after the element. I can't say why but I found a thread where somebody also had this solution. (sorry no ref.) My setup was a tad different; it was from a jQueryMobile injected page so the late instantiation may have something to do with my issue. Hopefully this helps someone.

我有这个问题，我发现唯一的解决方案（在我的实例中）是在元素之后触发调整内联大小。我不能说为什么，但我找到了一个线程，其中有人也有这个解决方案。（抱歉没有参考。）我的设置有点不同;它来自jQueryMobile注入页面，因此后期实例化可能与我的问题有关。希望这有助于某人。

<div id="my-map"></div>
<script type="text/javascript">
  $('#my-map').height($("#my-map-container").height());
  $('#my-map').width($("#my-map-container").width());
  google.maps.event.trigger($('#my-map'), 'resize');
</script>

#10

In my case, same issues for Mac devices on: Safari 5.1.7 (Os Windows 10[Sorry]) Safari 5.1 (Ipad 1 [Old Sorry]) Safari 10 (Iphone 6 Plus) Here my solution work for me: 1) capture Browser width detect.min.js 2) change attr style width parameter 3) resize map

在我的情况下，Mac设备上的问题相同：Safari 5.1.7（Os Windows 10 [抱歉]）Safari 5.1（Ipad 1 [旧抱歉]）Safari 10（Iphone 6 Plus）这里我的解决方案适用于我：1）捕获浏览器宽度detect.min.js 2）更改attr样式宽度参数3）调整大小映射

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

#11

-1

function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:     google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});

google.maps.event.addListenerOnce(largeMap, 'idle', function(){
    google.maps.event.trigger(largeMap, 'resize');
    largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);

}

#1