Google地图无法完全加载

我有一个奇怪的问题。 我的网站上有两张地图，一张大地图和一张小地图。 我想用大的一个来显示到某个地址的路线。 我现在正在尝试实现这两个地图，但却遇到了一个奇怪的问题。 小地图工作正常，但在大地图上只有div的一小块区域填充了地图，其余的都是空的。 （见图。）

我使用以下代码显示两个映射：

function initialize() { var latlng = new google.maps.LatLng(51.92475, 4.38206); var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"}); var image = '/Core/Images/Icons/citysquare.png'; var myLatLng = new google.maps.LatLng(51.92308, 4.47058); var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"}); marker.setMap(map); var largeLatlng = new google.maps.LatLng(51.92475, 4.38206); var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions); var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"}); largeMarker.setMap(largeMap); } [..] jQuery(document).ready(function () { [..] initialize(); }); 

这里出了什么问题？

编辑：

不幸的是，下面的建议似乎不起作用。 我来的关闭是从元素中删除display：none并将元素设置为使用jquery隐藏

 [..] jQuery(document).ready(function () { [..] $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide(); }); 

具有以下结果

Answer 1

是的，@ Argiropoulos-Stavros但是，将它添加为听众

  google.maps.event.addListenerOnce(map, 'idle', function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(location); }); 

它将在地图渲染之后开始重新resize。

Answer 2

我认为你正在使用v3。 所以google.maps.event.trigger（map，“resize”）;

另外看看这里

Answer 3

我修好了它！

我为largemap创建了一个自己的函数，并在打开元素时将它放在回调中

 function largeMap(){ var largeLatlng = new google.maps.LatLng(51.92475, 4.38206); var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions); var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"}); largeMarker.setMap(largeMap); } [..] $("#showRoute").click(function(e){ e.preventDefault(); $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500); $("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'}); $("#closeBarLink").click(function(l){ l.preventDefault(); $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500); }); largeMap(); }); 

不管怎么说，还是要谢谢你！！

Answer 4

call initialize(); 您激活后的function。

 $(document).ready(function () { $("#shadow").show(function () { initialize(); }) }); 

Answer 5

当您在大地图中加载时，请尝试在地图代码的末尾添加此地图。

 map.checkResize(); 

当Google地图首次在您的网页上呈现时，它会记录尺寸，以便以该尺寸显示地图图像。 如果要动态调整地图大小，则需要告诉API检查新大小。

Answer 6

Answer 7

您正在使用带有jQuery的弹出窗口，并且当guest文档准备好时，我会调用initialize()函数（ $(document).ready(function() {initialize(); }) ）。 弹出窗口显示后尝试调用initialize()函数。

约翰尼