Javascript 在两个不同的页面上使用2个谷歌地图，其中一个可以工作，但第二个只有在刷新后才能工作

我有一个网站正在使用谷歌地图api（src=”https://maps.googleapis.com/maps/api/js?key=...)

• 一个页面有一个带有位置标记的地图，用户可以点击它
• 当用户单击地图时，他可以选择查看该位置的详细信息
• 详细位置包括两张地图（卫星视图和街景）

问题是，当你登陆到第二个页面时，你只能看到谷歌地图框，但没有地图。为了获得地图，我必须包含一个alert（）函数，该函数将在第一次加载后执行，然后地图就会毫无问题地显示出来。 我对谷歌地图api有点陌生，我不理解这种行为。 谷歌地图的代码位于js文件中，插入地图的html文件位于另一个文件（.php）中。 因此，问题是为什么我必须重新加载或使用下面的“alert（yahoo）”（我已注释掉）才能加载地图。下面是代码的样子：

function initialize_single_location() {
 var currentdate = get_current_date();

$.getJSON(some code go here)
        .done(function (data) {
            for (i = 0; i < data.length; i++) {
              if(some codes go here)
                {

                    position_lat = data[i].lat;
                    position_long = data[i].long;
                    address=data[i].address;
                    city=data[i].city;
                    state=data[i].state;
                    zip=data[i].zip;
                    name=data[i].name; 
                   $('#myAddress').html('<strong>'+data[i].name +'</strong><br>' + data[i].address + '<br>' + data[i].city + ' ' + data[i].state + ' '
                    + data[i].zip + '<br>' +'Telephone: Not Provided' + '<br> Fax: Not Provided');
                   var direction = document.getElementById("directions");
                   direction.setAttribute("href", "https://www.google.com/maps/dir//"+address+"+"+city+"+"+state+"+"+zip+"");

                 } 

            }
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            alert("Request Failed: " + err);
        });
          //alert('yahoo');
  var fenway = new google.maps.LatLng(position_lat, position_long);

  var mapOptions = {
    center: fenway,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(
      document.getElementById('map-canvas2'), mapOptions);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 34,
      pitch: 10
    }
  };

  var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
  map.setStreetView(panorama);

}

google.maps.event.addDomListener(window, 'load', initialize_single_location);

函数初始化单个位置（）{
var currentdate=获取当前日期（）；
$.getJSON（此处有一些代码）
.完成（功能（数据）{
对于（i=0；i”+数据[i]。名称+”
'+数据[i]。地址+“
”+数据[i]。城市+”+数据[i]。州+“”
+数据[i].zip+'
'+'电话：未提供'+'
传真：未提供'；
var direction=document.getElementById（“directions”）；
direction.setAttribute（“href”https://www.google.com/maps/dir//“+地址+”+“+”+城市+“+”+州+“+”+邮政编码+”）；
} 
}
})
.fail（函数（jqxhr、textStatus、error）{
var err=textStatus+“，”+错误；
警报（“请求失败：+err”）；
});
//警报（“雅虎”）；
var fenway=new google.maps.LatLng（position\u lat，position\u long）；
变量映射选项={
中心：芬威，
缩放：18，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map=new google.maps.map(
document.getElementById（'map-canvas2'），mapOptions）；
变量全景选项={
位置：芬威，
pov：{
标题：34，
投球：10
}
};
var panorama=new google.maps.StreetViewPanorama（document.getElementById（'pano'），panoramoptions）；
地图设置树视图（全景）；
}
google.maps.event.addDomListener（窗口“加载”，初始化单个位置）；

在您的

addDomListener

中，调用一个函数，检查

地图画布是否可见（用于直接登录到此页面/选项卡）。如果可见，则初始化地图。我还添加了一个
文档。就绪
检查在从其他页面/选项卡切换时调用可见性检查功能：

jQuery(document).ready(function ($) {
    mapVisible();
});

function mapVisible() {
    if (!$("#googft-mapCanvas").is(":visible")) return;                      

    initialize_single_location();
}

//this will call it if you land directly on this page/tab
google.maps.event.addDomListener(window, 'load', mapVisible);

我们在jQuery选项卡上使用了这个选项，切换到第二个选项卡不会重新初始化
窗口加载事件。这解决了这个问题。
由于
$getJSON（）的异步性质，您会遇到问题
调用。它会立即返回，然后开始映射的初始化。变量
fenway
很可能未定义，因此映射无法正确初始化。这就是为什么
alert（）
有帮助的原因。关闭警报窗口时，设置了
$getJSON.done（）
中的变量，之后一切正常

您必须将映射初始化的所有代码移动到
.done（）
部分
$getJSON（）
调用或使其成为函数，并在
.done（）
部分末尾调用。
Anto Jurković，非常感谢！它工作起来很有魅力；您增加了我对$getJSON（）的了解，我不知道它的异步性质；是的，将映射初始化移到done中可以解决我的问题。