Google Maps API 3 - 在Firefox（v11）/ IE（v9）中映射加载但不在Chrome（v17）中加载

Question

我在这里有一个动态生成的谷歌地图：http://www.socialinvestmentscotland.com/looking-for-investment/case-studies/

这是生成的地图javascript（页面标题中还有另外两个数组 - simple_markers_descriptions[]和simple_markers_addresses[] - 这些数据太大而无法在此处重现）：

var addresses = ["57.1443510,-2.1076268","56.1372861,-3.3121857","55.9645964,-3.1738792","55.8651100,-4.1025119","56.4561225,-2.9863503","56.2444546,-4.2167933","56.9607619,-2.2021569","55.8477464,-4.2950799","58.1476532,-5.2027190","55.9720150,-3.2304094"];
        var descriptions = ["<div><span>Udny</span><img src='/files/cache/a693e687b706d5acd6b46c25ecc7661f.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Udny Community Wind Turbine Co (UCWTC) is a community wind...<a href='/looking-for-investment/case-studies/udny'>Read more ></a></p>","<div><span>Recycle Fife</span><img src='/files/cache/356787e114efcc96697049971afad75a.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Recycle Fife is a project based in Lochgelly providing recycling...<a href='/looking-for-investment/case-studies/recycle-fife'>Read more ></a></p>","<div><span>Out of the Blue Arts &amp; Education Trust</span><img src='/files/cache/ef910f196cd28ccc721c6cf6f4fb0cf3.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Out of the Blue (OOTB) is an Edinburgh based Arts...<a href='/looking-for-investment/case-studies/out-of-the-blue-arts-and-education-trust'>Read more ></a></p>","<div><span>FARE</span><img src='/files/cache/24072ab36e531e01b8572c9b787b474b.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Family Action in Rogerfield and Easterhouse (FARE) is a grassroots...<a href='/looking-for-investment/case-studies/fare'>Read more ></a></p>","<div><span>Factory Skate Park</span><img src='/files/cache/6e18539e7aed388b83c4bc9195ab3ed4.JPG' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Factory Skate Park is an innovative project based in Dundee...<a href='/looking-for-investment/case-studies/factory-skate-park'>Read more ></a></p>","<div><span>Callander Youth Project</span><img src='/files/cache/d131cb56df57c42bc9916467a3786892.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Callander Youth Project (CYP) was established in 1997 and delivers...<a href='/looking-for-investment/case-studies/callander-youth-project'>Read more ></a></p>","<div><span>Maritime Rescue Institute</span><img src='/files/cache/1f6c88cad135cac16d751bd443dd5975.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Maritime Rescue Institute (MRI) is a Scottish Charity based in...<a href='/looking-for-investment/case-studies/maritime-rescue-institute'>Read more ></a></p>","<div><span>Glasgow City Mission</span><img src='/files/cache/8a7653db916025c4aceb94b467b3bfa6.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Glasgow City Mission (GCM) is the world's first City...<a href='/looking-for-investment/case-studies/glasgow-city-mission'>Read more ></a></p>","<div><span>Assynt Foundation</span><img src='/files/cache/0f33797845f6cf308fa43a9a5eca13eb.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>The Assynt Foundation was formed in 2004 in order to...<a href='/looking-for-investment/case-studies/assynt-foundation'>Read more ></a></p>","<div><span>Spartans Community Football Academy</span><img src='/files/cache/5f62cdb1362b4f52d5101fac7859e6d5.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>The Spartans Community Football Academy (Spartans) is the home of...<a href='/looking-for-investment/case-studies/spartans-community-football-academy'>Read more ></a></p>"];

// Combine case study markers and simple markers
if (simple_markers_addresses.length > 0) {
    var numCaseStudies = addresses.length;
    addresses = addresses.concat(simple_markers_addresses);
    descriptions = descriptions.concat(simple_markers_descriptions);
}

// Global map vars
var infobox = new InfoBox({
    boxStyle: { 
        background: "url('/themes/sis/img/map/map_sprites.png') no-repeat -116px -8px",
        width: "228px",
        height: "140px"
    },
    closeBoxURL: "/themes/sis/img/map/map_close.gif",
    closeBoxMargin: "10px 13px 0 0",
    infoBoxClearance: new google.maps.Size(1,1),
    pixelOffset: new google.maps.Size(-112, -14),
    alignBottom: true
});
var infoboxSmall = new InfoBox({
    boxStyle: { 
        background: "url('/themes/sis/img/map/map_sprites.png') no-repeat -357px -8px",
        width: "228px",
        height: "110px"
    },
    closeBoxURL: "/themes/sis/img/map/map_close.gif",
    closeBoxMargin: "10px 13px 0 0",
    infoBoxClearance: new google.maps.Size(1,1),
    pixelOffset: new google.maps.Size(-115, 1),
    alignBottom: true
});
var marker;
var lastClickedMarker;
var bounds = new google.maps.LatLngBounds();
var markersArray = new Array();
var iconType;
var center = new google.maps.LatLng();
var startCenter = new google.maps.LatLng(56.816922, -4.18265);
var startBounds = new google.maps.LatLngBounds();
var bigMarker = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
        new google.maps.Size(20, 24),
        new google.maps.Point(46, 8),
        new google.maps.Point(5, 22)                
    );
var bigMarkerHover = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
        new google.maps.Size(20, 24),
        new google.maps.Point(75, 8),
        new google.maps.Point(5, 22)                
    );
var smallMarker = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
        new google.maps.Size(15, 15),
        new google.maps.Point(8, 8),
        new google.maps.Point(4, 4)             
    );

// Initialise map
function initialise() {

    // Map options
    var mapOptions = {
        disableDefaultUI : true,
        zoomControlOptions : { style: google.maps.ZoomControlStyle.SMALL },
        disableDoubleClickZoom : true,
        backgroundColor : "#E7E7E7",
        mapTypeId : google.maps.MapTypeId.TERRAIN,
        minZoom : 6,
        maxZoom : 14,
        center : startCenter
    };

    // Map object
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // Loop through geocoded data
    for(var i = 0; i < addresses.length; i++) {
        createMarker(addresses[i], descriptions[i], i);
    }

    function createMarker(address, desc, i) {
        if (i >= numCaseStudies) {
            iconType = smallMarker;
        } else {
            iconType = bigMarker;
        }
        var latlongAddress = address;
        latlongAddress = latlongAddress.substring(1);
        latlongAddress = latlongAddress.substring((latlongAddress.length-1));
        var latlongArray = address.split(',')
        var pos = new google.maps.LatLng(latlongArray[0],latlongArray[1]);
        marker = new google.maps.Marker({
            position : pos,
            map : map,
            icon : iconType,
            flat : true
        });

        // Add new marker to markersArray
        markersArray[i] = marker;

        // Recalculate extent of map
        bounds.extend(marker.position);
        setBounds();

        if (i >= numCaseStudies) {
            attachListener(marker,desc,1);
        } else {
            attachListener(marker,desc,0);
        }
    }

    // Set extent of map
    function setBounds() {
        map.setZoom(6);
        center = map.getCenter();
        startBounds = map.getBounds();
    }

    // Attach infowindow with listener event
    function attachListener(marker,desc,simple) {

        if (simple == 0) {

            // Event on hovering marker
            google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                return function() {
                    marker.setZIndex(999);
                    marker.setIcon(bigMarkerHover);
                }
            })(marker, i));

            google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
                return function() {
                    marker.setZIndex(undefined);
                    marker.setIcon(bigMarker);
                }
            })(marker, i));
        }

        // Event on clicking markers
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infobox.close();
                infoboxSmall.close();
                if (simple == 1) {
                    infoboxSmall.setContent(desc);
                    infoboxSmall.open(map, marker);
                    resetRollovers(lastClickedMarker);
                } else {
                    infobox.setContent(desc);
                    infobox.open(map, marker);
                    marker.setZIndex(999);
                    marker.setIcon(bigMarkerHover);
                    google.maps.event.clearListeners(marker, 'mouseout');
                    google.maps.event.addListener(infobox, 'closeclick', function() {
                        resetRollovers(lastClickedMarker);
                    });
                    google.maps.event.addListener(infobox, 'content_changed', function() {
                        resetRollovers(lastClickedMarker);
                    });
                }
                lastClickedMarker = marker;
            }
        })(marker, i));

        // Handles rollover/active states between small and big markers
        function resetRollovers(lastClickedMarker) {
            var pos = 10000;
            for(i=0; i < markersArray.length; i++) {
                if (markersArray[i] === lastClickedMarker) {
                    pos = i;
                    break;
                }
            }
            if (pos < numCaseStudies) {
                lastClickedMarker.setIcon(bigMarker);
                google.maps.event.addListener(lastClickedMarker, 'mouseout', (function(lastClickedMarker, i) {
                    return function() {
                        lastClickedMarker.setZIndex(undefined);
                        lastClickedMarker.setIcon(bigMarker);   
                    }
                })(lastClickedMarker, i));
            }
        }
    }

    /*google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.case-study-list').css('visibility','visible');
    });*/

}

window.onload = initialise;

它在Firefox 11和IE 9中运行良好，但Chrome只显示一个灰色框。控制台中没有错误，页面验证成功。

我不知道问题是什么 - 开发页面我发现Google Maps API对于它的Javascript非常不安全，但由于它在其他浏览器中工作，我担心太多了。

Answer 1

问题是CSS中-webkit-backface-visibility设置为hidden。我在某处读到这有助于对旋转元素的边缘进行抗锯齿处理，但显然我没有对它进行适当的测试。

删除属性（因此默认适用，visible）就可以了。