隐藏的谷歌地图没有在开放时装入fancybox

Question

我很难找到如何在点击链接打开时查看我的谷歌地图

目前点击链接时我得到了这个结果

你可以看到地图只在角落里加载了一点点

这是html

<a href="#map-canvas" id="inline" class="fancybox" id="inline">
            <img id="map-image" alt="Tea Map" src="wp-content/themes/Tea-interactive/assets/images/map.png" />
        </a>

这是我的fancybox代码

    $("a#inline").fancybox({
    'hideOnContentClick': false,
    'afterShow': function(){
    google.maps.event.trigger(map, "resize");
  }
});

Answer 1

在您的fancybox中，您必须在显示如下内容后初始化Google地图：

    $("a#inline").fancybox({
        'hideOnContentClick': false,
        'afterShow': function(){
             initialize(map);
      }
    });

function initialize(map){
   //your code to initialize the google map example: (ZOOM_LEVEL AND DISABLE_DEFAULT should be set above)
   var mapOptions = {
      center: new google.maps.LatLng(30, 30),
      zoom: ZOOM_LEVEL,
      disableDefaultUI: DISABLE_DEFAULT,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById(id),
    mapOptions);
}

Answer 2

不幸的是，如果您在隐藏的对象中创建了Google地图api的正常行为。

创建它的元素需要有一个大小（高度/宽度），以便正确绘制地图。

您需要做的是在 可见或大小之后创建地图。 （提示：css visibility属性）