0

I am trying to open Google Map inside fancybox by clicking thumbnail which is also a Google Map. Fancybox is opening fine but did not show map properly on fancybox.

If I zoom/resize map on fancybox then it is working fine. Here is my code that I am using to generate map.

<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 Code Is : 

<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 -->

Code For 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>

Currently Opening Popup:

![enter image description here][1]

4

1 に答える 1

0

ファンシーボックスを表示した後、マップを初期化してみてください。

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

非表示の要素でGoogleマップマップを初期化したときに同じ問題が発生し、上記のような構造で解決しました。

于 2013-01-29T14:54:05.123 に答える