javascript - hidden google map not loading in fancybox on opening

Question

I am having a really tough time working out how to to view my google map when clicking a link to open it

currently when clicking an link I get this result

as you can see the map only loads a tiny bit in the corner

This is the 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>

and here is my fancybox code

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

Answer 1

在您的幻想箱中，您必须在显示如下后初始化谷歌地图：

    $("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 maps api，这是正常行为。

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

您需要做的是在其容器元素可见或具有 size之后创建地图。（提示：css属性）visibility