jquery - 谷歌地图信息窗口在 fancybox 中无法正确显示

Question

我已经让谷歌地图在 fancybox 窗口中运行得很好。但是，信息窗口显示不正确，请注意，指向标记的箭头丢失了，关闭它的 X 丢失了，并且背面阴影的大小不正确。可以点击 X(我猜它隐藏在后台)

下面是为我显示的图像

Valid XHTML http://www.tappertracker.com/ScreenShot2013-07-15.png

构建这个的函数如下:

    if (response["resp"].length > 0) {

        frLocations = new Array();
        for ( var i = 0; i < response["resp"].length; i++) {
            var elements = new Array();

            elements[0] = response["resp"][i]["summary"];
            elements[1] =  response["resp"][i]["latitude"];
            elements[2] =  response["resp"][i]["longtitude"];
            elements[3] =  i + 1;
            elements[4] = "<h4>" + response["resp"][i]["summary"] + "</h4><p><i>" + response["resp"][i]["description"] + 
                "</i></p><p>Starting: " + String.createStringFromMysqlDateFormat(response["resp"][i]["startDate"]) + "</p>"+ 
                "<p>Ending: " + String.createStringFromMysqlDateFormat(response["resp"][i]["endDate"]) + "</p>";
            frLocations[i] = elements;                  
        }           
    }

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom : 11,
        center : new google.maps.LatLng(response["ha"]["lat"], response["ha"]["long"]),
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });
    if (response["resp"].length > 0) {
        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for( i = 0; i < frLocations.length; i++) {
            marker = new google.maps.Marker({
                position : new google.maps.LatLng(frLocations[i][1], frLocations[i][2]),
                map : map,
                title : frLocations[i][0]
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(frLocations[i][4] );
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }           
    }

编辑:附加以启动弹出窗口的精美框代码是

$("#fr-map").click(function(){
            $.fancybox({
                'href': '#fr_div',
                'afterShow': function() { 
                    getFundraisersNearMe(showFundRaisers);}
            });
            return false;
        });

html

<div id="mapFormDiv" style="display:none">
    <div id="fr_div">
<h1>Fundraisers in your area</h1>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>

Answer 1

我也有同样的问题。这与引导样式干扰谷歌有关。我使用解决了我的问题

/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none;
}

或者简单地

img {
 max-width: none;
}