Google地图无法完全加载

Question

我有一个奇怪的问题.我的网站上有两张地图,一张大地图和一张小地图.我想用大的一个来显示到某个地址的路线.我现在正在尝试实现这两张地图,但却遇到了一个奇怪的问题.小地图工作正常,但在大地图上只有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);
    });

它将在地图渲染之后开始重新调整大小.

Answer 2

我修好了它！

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

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

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