在Fancybox中打开Google地图-重新打开时显示错误

Question

我有一个关于Google地图API的问题。 我正在使用V3 API和fancybox在类似于灯箱的div中显示地图。 当我第一次单击链接时，fancybox打开并加载地图。 一切似乎都没问题，但是当我关闭fancybox并尝试重新打开时，地图加载错误。它只加载了大约一半的区域，可能是第二次打开时创建的地图对象出了问题。 每次我想要获得正确的地图时，重新加载页面是可以的。但是当我尝试打开-关闭-打开-关闭等时，问题就出现了。 有人知道我该怎么做吗？ 我喜欢fancybox，但现在我完全被搞砸了:) 下面是我的代码片段。谢谢

$(document).ready(function () {
  $("a.maps").fancybox({
    'overlayOpacity ': 0.5,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'type': 'ajax'
  });
});

这是关于Fancybox的内容。链接是从简单的a href=""中调用的...

function initialize() {
  var myLatlng = new google.maps.LatLng(49.095354, 17.749553);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: "DAMN"
  });
}

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '400px';
  }
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>

- simekadam

Answer 1

我自己也遇到了这个问题，找到了以下解决方法：

google.maps.event.addListener(<map object>, 'tilesloaded', function() {
    google.maps.event.trigger(<map object>, 'resize');
    <map object>.setCenter(<LatLng>);
});

地图偏离中心，需要居中显示。

- Malako

Answer 2

这是一个非常普遍的问题，请看一下这里。 尝试使用google.maps.event.trigger(map, "resize");

希望能有所帮助。

- Argiropoulos Stavros