Google 地图 API - 第二次初始化时地图未显示

Question

我有一个页面设置，需要通过 API 初始化 Google 地图的多个实例。第一次初始化一张地图时一切正常。当您重新单击按钮执行此操作时，地图不会完全显示。

var locations = [

              ['test1', 45.440188, -75.676309, 1, 'transportation.png'],
              ['test2', 45.439463, -75.675751, 1, 'medical.png'],
              ['test3', 45.439792, -75.683544, 1, 'schools.png'],
              ['test4', 45.439652, -75.676929, 1, 'shopping.png']     
      ];

    function initialize_1() {
        var mapOptions = {
          center: new google.maps.LatLng(45.438612, -75.677561),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas_1"), mapOptions);

        marker = new google.maps.Marker({
           position: new google.maps.LatLng(45.438612, -75.677561),
            map: map
        });

        var marker, i;

        var iconBase = 'http://www.elkproperty.com/new/images/icons/';

        for (i = 0; i < locations.length; i++) {  
            marker = new google.maps.Marker({
               position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
               ,icon: iconBase + locations[i][4]
            });

        }

      }

Answer 1

我认为问题在于您正在将映射初始化为隐藏层。尝试在 show():

之后将调用移至 initialize_1()

onclick="$('#units_1').hide(); $('#unitArrow_1').hide(); $('#amenity_1').show(); $('#amenityArrow_1').show(); initialize_1();"

其他选项是在 div 可见后强制调整事件大小。为此，您可能必须将 map 变量设置为全局变量。

google.maps.event.trigger(map, 'resize');

可能与您的问题无关，但是您每次使用地图显示 div 时是否都必须初始化地图层？也许你可以测试它是否被初始化，例如：

var isInit_1 = false;
function initialize_1() {
  if (isInit_1) { return; }
  isInit_1 = true;
  var mapOptions = {
  ...

Google 地图 API - 第二次初始化时地图未显示

Google Maps API - Map not showing on second initialize

api

google-maps