Che cosa sta causando un errore di Google Maps in IE8?

Question

Stiamo utilizzando Google Maps e abbiamo identificato un problema che sembra accadere solo in IE8 (e possibilmente in basso). La funzionalità funziona correttamente in FF, Chrome, IE9.

Il codice che l'errore si verifica intorno è:

google.load("maps", "3.x", { other_params: "sensor=false" }); 
    var mapdiv = null; 
    $(function() { 
     mapdiv = document.getElementById("map"); 
     map = new google.maps.Map(mapdiv, { 
      zoom: 1, 
      center: new google.maps.LatLng(6, 35), 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 
     var latlngbounds = new google.maps.LatLngBounds(); 

In particolare su questa linea:

map = new google.maps.Map(mapdiv, { 
    zoom: 1, 
    center: new google.maps.LatLng(6, 35), 
    disableDefaultUI: true, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

e l'errore è:

oggetto non supporta questa proprietà o metodo

Ho avuto un po 'di gioco con gli strumenti di sviluppo IE e se sostituisco map = con qualcosa come var x = non c'è alcun errore, quindi questo mi porta a credere che l'oggetto map sia il colpevole che manca qualche proprietà/metodo . Anche se non so da dove viene l'oggetto map, presumo venga caricato dalla chiamata google.load.

Qualcuno sa cosa sta succedendo qui?

Answer 1

Quando la linea:

map = new google.maps.Map(mapdiv, { zoom: 1, center: new google.maps.LatLng(6, 35), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.TERRAIN }); 

Viene eseguito l'interprete JavaScript inizierà attraversando la catena dell'area di validità alla ricerca di dove map è dichiarato. Poiché non è dichiarato localmente, ovvero var map = ..., non lo trova nel tuo ambito locale e alla fine viene aggiunto all'ambito globale.

Nel tuo caso map è già definito nell'ambito globale come window.map perché, è l'ID di uno div sulla tua pagina. In tutti i browser non viene visualizzato un messaggio di errore, window.map è impostato su un nuovo oggetto google.maps.Map. Per qualche motivo, buono o cattivo, IE8 non ti consente di creare una variabile globale il cui nome è in conflitto con una variabile globale esistente che fa riferimento a un elemento DOM.

Si potrebbe risolvere questo diversi modi:

1. Creare un locale var map
2. modificare l'ID del div da map a qualcos'altro

3. Se si deve avere map esistono in ambito globale , impostarlo utilizzando window.map =...

   (3b) Modificare il nome della variabile in modo da non essere in conflitto con window.map, ad es. myMap = new google.maps.Map(...