2

我已经让谷歌地图在一个花哨的窗口中运行得很好。但是信息窗口显示不正确，请注意缺少指向标记的箭头，缺少关闭它的 X 并且后阴影的大小不正确。X 可以点击（我猜它隐藏在背景中）

下面是为我显示的图像

有效的 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>
4

1 回答 1

0

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

/** 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;
}
于 2013-11-08T09:08:16.853 回答