0

我正在尝试通过单击同样是谷歌地图的缩略图在fancybox 中打开谷歌地图。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]

4

1 回答 1

0

在你展示了幻想框之后尝试初始化你的地图：

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

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

于 2013-01-29T14:54:05.123 回答