Question

我正在尝试通过点击也是Google地图的缩略图在fancybox中打开Google地图。 Fancybox打开正常，但没有在fancybox上正确显示地图。

如果我在fancybox上缩放/调整地图，那么它工作正常。这是我用来生成地图的代码。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">     
</script>

<script>
var mapHash = [];
var bound = new google.maps.LatLngBounds();
finishedCoding = false;
function initMap(map_container_div) {

    var latlng = new google.maps.LatLng(38.5111, -96.8005);
    if(map_container_div == 'map1')
    {
        var myOptions = {
        zoom:0,
        center:latlng,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    }
    else
    {
    var myOptions = {
        zoom:1,
        center:latlng,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    };
    } 

    if(map_container_div == 'map1')
    {
        var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);
    }
    else
    {
        var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);           
    }

    if (!getMap(map_container_div)) {
        var mapInfo = {
            mapkey:'',
            map:'',
            geocoder : new google.maps.Geocoder()
        };
        mapInfo.map = map;
        mapInfo.geocoder = new google.maps.Geocoder();
        mapInfo.mapKey = map_container_div;
        mapHash.push(mapInfo);
    }
}

function palceMarker(myAddress, mapId) {
        mapIndex = getMap(mapId)
    //alert(myAddress + mapId + map)
    mapHash[mapIndex].geocoder.geocode({
        'address':myAddress
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            mapIndex = getMap(mapId)
            var marker = new google.maps.Marker({
                map:mapHash[mapIndex].map,
                position:results[0].geometry.location,
                title: results[0].formatted_address
            });
            bound.extend(results[0].geometry.location);
            mapHash[mapIndex].map.fitBounds(bound);

            finishedCoding = true;

        }
    });
}

function getMap(mapKey) {

    for (var i = 0 ; i < mapHash.length ; i++) {
        if (mapHash[i].mapKey == mapKey) {
            return i;
        }
    }
    return false;
}

function init() {
    initMap("map1")
    initMap("map_thumb")

    palceMarker("1/86-100 Market St, Sydney New South Wales 2000", "map1")
    palceMarker("120 Market St, Sydney New South Wales 2000", "map_thumb")
}

HTML代码是：

<div style="display:none;">
<div id="map1" style="width: 900px; height: 480px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" >
</div>
</div> <!-- large map div ends -->

FancyBox代码：

<script type="text/javascript">
    $(document).ready(function() {
    init();
    $("a#inline").fancybox({
    'hideOnContentClick': false,
    'overlayColor'      : '#6b0202',
    'overlayOpacity'    : 0.8,
    'width' : '100%',
    'height' : '100%',
    'afterLoad': function(){
    google.maps.event.trigger(map, "resize");
  }

    });
});
</script>

目前正在打开弹出窗口：

！[在此处输入图片说明] [1]

Answer 1

在显示fancybox之后尝试初始化地图：

$('#yourelement').fancybox({ afterShow: function() { initMap(); } });

当我在隐藏元素中初始化谷歌地图时，我遇到了同样的问题，并且像上面那样的结构为我解决了这个问题。

Fancybox无法正确打开谷歌地图

1 个答案: