Il protagonista è nuovamente lui Internet Explorer 8, nell'articolo precedente abbiamo visto un bug d'Internet Explorer 8 legato all'evento window.onload, questa volta però non si tratta di un bug Javascript nativo, piuttosto coinvolge le API di Google Maps; alla dichiarazione di una nuova mappa di Google viene mostrato un errore Javascript in Internet Explorer 8, compromettendo sempre la compatibilità cross-borwser della nostra applicazione web.
Anche in questo caso risolvere il bug è piuttosto semplice, andiamo a scoprire come fare.
Dopo aver richiamato le API di Google Maps nella nostra pagina web, supponiamo di avere scritto il segunte codice Javascript per definire la nostra mappa:
<script type="text/javascript"><!--
function initializeMap(){
var mapCenter=new google.maps.LatLng(45.18,36.72);
var mapOptions={center:mapCenter,zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("map"), mapOptions);
var marker=new google.maps.Marker({position:mapCenter,map:map});
};
window.onload = new function(){initializeMap();};
//--></script>
Il codice javascript appena scritto funziona correttamente con gli altri browser: firefox, safari, opera e chrome; mentre con internet explorer 8 otteniamo il seguente messaggio d'errore "Object doesn't support this property or method", come mai? L'errore si manifesta perchè il parser d'internet explorer 8 non consente di dichiarare una variabile con lo stesso identificativo di un oggetto facente parte del DOM della pagina; e quale sarebbe questo oggetto con lo stesso nome vi chiederete voi? Beh! semplice, molto probabilmente (come si è soliti fare) avete dichiarato il blocco del div contenitore della mappa di Google con id="map", in tal caso IE8 vede un oggetto globale window.map, ecco svelato il mistero.
Per risolvere il problema d'internet explorer 8 con Google Masp è molto semplice, basta modificare l'identificativo assegnato al div della mappa con un altro nome, e specificare un nome diverso anche per la variabile javascript locale map nella quale istanziamo l'oggetto mappa di Google, il codice molto banalmente diventerebbe:
<script type="text/javascript"><!--
function initializeMap(){
var mapCenter=new google.maps.LatLng(45.18,36.72);
var mapOptions={center:mapCenter,zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP};
var myMap=new google.maps.Map(document.getElementById("boxmap"), mapOptions);
var marker=new google.maps.Marker({position:mapCenter,map:myMap});
};
window.onload = new function(){initializeMap();};
//--></script>
Come potete notare non solo la variabile javascript è stata rinominata da map in myMap, ma inoltre la funzione document.getElementById("boxmap") viene invocata per prelevare un oggetto con id "boxmap" (che và specificato appositamente nel div dell'html) anzichè "map".
Basta questo per risolvere questo seccante errore, chiunque volesse aggiungere qualcosa o chiedere ulteriori chiarimenti su come risolvere l'errore d'internet explorer 8 con le mappe di Google può farlo tramite i commenti.