Google地图无法完全加载 [英] Google Maps don't fully load

问题描述

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

我使用下面的代码来显示两张地图：

  
函数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：Center}）; 
 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（）; 
}）; 
 

以下结果为

解决方案

我修正了它！ p>

我为largemap制作了自己的函数，并在元素打开时将其放置在回调函数中

  
函数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）;点击（功能（e）{
 e.preventDefault（）; 
 $（＃b 
 $ b [..] 
 $（＃showRoute （＃shadow），$（＃shadowbar），$（＃content））。 ）.css（{'width'：'750px'，'top'：'25px'，'left'：'50％'，'margin-left'：' -  400px'}）; 
 $（ （＃shadow）。add（$（＃shadowContent），$（＃closebar）。 ），$（＃content））。fadeOut（500）; 
}）; 
 largeMap（）; 
}）; 
  

谢谢！

I have a somewhat strange problem. I have two maps on my site, a big one and a small one. I want to use the big one to show a route to a certain address. I'm now trying to implement the two maps but get a weird problem. The small map is working fine, but on the big map only a small area of the div is filled with the map, the rest is empty. (See the image.)

I use the following code to display the two maps:

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

What's going wrong here?

EDIT:

Unfortunately the suggestions below doesn't seem to work. The closes i came is to remove the display:none from the elements and set the elements to hide with jquery

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

With the following result

解决方案

I fixed it!

I made an own function for the largemap and placed it in the callback when the elements are opened

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

Thanks anyway!!

这篇关于Google地图无法完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！