Google Maps API 3 - Karte Laden in Firefox (v11)/IE (v9), aber nicht Chrome (v17)

Question

Ich habe eine dynamisch generierte google map hier: http://www.socialinvestmentscotland.com/looking-for-investment/case-studies/

Hier ist die generierte Karten Javascript (es gibt zwei andere Arrays im Seitenkopf - simple_markers_descriptions[] und simple_markers_addresses[] - die zu groß sind hier zu reproduzieren):

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; 

Es funktioniert in Firefox 11 und IE 9, aber Chrome zeigt nur ein graues Feld. Es gibt keine Fehler in der Konsole und die Seite wird erfolgreich validiert.

Ich bin ratlos, was das Problem ist - Entwicklung der Seite Ich entdeckte, dass das Google Maps API ziemlich pingelig über sein Javascript ist, aber da es in anderen Browsern funktioniert, bin ich vorsichtig zu viel stochern .

Answer 1

Das Problem war -webkit-backface-visibility im CSS auf hidden festgelegt. Ich habe irgendwo gelesen, dass dies beim Antialiasing der Kanten von gedrehten Elementen helfen würde, aber offensichtlich habe ich es nicht richtig getestet.

Das Entfernen der Eigenschaft (so dass der Standard gilt, der visible ist) hat den Trick gemacht.