Google maps .setMap issue for IE8

问题:

So I've got a bit of a problem here. This script works fine in all browsers apart from IE8

The route() function is called - and is given a Google maps encoded polygon and polyline. The script breaks every time IE8 tries to do setMap

I'm thinking the issue is something to do with map being out of its scope? Or a trailing comma error? I just spent the last few hours playing with thisand I couldn't fix it.

Any ideas?? Much appreciated. Dont normally like to paste the whole code as it's a bit overwhelming but it's needed in this case.

var markersArray = [];


function initMap(lat,lng) {
    if(lat) {

        var myLatLng = new google.maps.LatLng(lat, lng);
        var zoomi=13;
    }else{

        var myLatLng = new google.maps.LatLng(54.162434, -2.285156);
        var zoomi=5;
    }

    var myOptions = {
        zoom: zoomi,
         zoomControl: true,
        panControl: false,
       streetViewControl: false,
       zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
     },
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}


function route(journeyPolyy,journeyLine,startLat,startLng,endLat,endLng) {

reset();

    var startLatLng=startLat + ',' + startLng;

    var start = new google.maps.LatLng(startLat,startLng);
    var end = new google.maps.LatLng(endLat,endLng);

    var decodedPath = google.maps.geometry.encoding.decodePath(journeyLine);
      var flightPath = new google.maps.Polyline({
        path: decodedPath,
        strokeColor: 'blue',
        strokeOpacity: 0.5,
        strokeWeight: 5
      });
    markersArray.push(flightPath);

    flightPath.setMap(map);
     var marker = new google.maps.Marker({
        position: start
    });

    markersArray.push(marker);


    marker.setMap(map);

     var endPpoint = new google.maps.Marker({
        position: end
    });
    markersArray.push(endPpoint);


    endPpoint.setMap(map);

    poly = journeyPolyy.replace(/\\\\/g,"\\");

    var decodedPath = google.maps.geometry.encoding.decodePath(poly);

    var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");

    var setRegion = new google.maps.Polygon({
        path: decodedPath,
        levels: decodedLevels,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor    : '#FF0000',
        fillOpacity  : 0.1,
        map: map
    });
    setRegion.setMap(map);
    markersArray.push(setRegion);
        var obj= document.getElementById('map');
    obj.style.visibility='visible';
    HideContent('mainContent');
    map.setCenter(start); 
    map.setZoom(13); 
}


function decodeLevels(encodedLevelsString) {
    var decodedLevels = [];

    for (var i = 0; i < encodedLevelsString.length; ++i) {
        var level = encodedLevelsString.charCodeAt(i) - 63;
        decodedLevels.push(level);
    }
    return decodedLevels;
}

function reset() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

回答1:

There is a naming-conflict (the map-objects name is the same like the id of the element)

You may either use a different id for the div, a different name for the map-variable, or declare the map-variable in global scope:

var map;