Question

From the MSDN forums, even copying and pasting the simplest example from the Virtual Earth Dev SDK results in the same exception being thrown in IE8 only. However, the same example using http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3 (in place of ?v=6, even though ?v=6 is allegedly forwarded to ?v=6.3) fixes the error.

---

Note: code shown here is updated to reflect my most recent attempts after following recommendations made–this code is STILL erroring in IE8 only!

I have a page using http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6 to show maps. In IE8 only there is a JS error and the map doesn’t work. The map works beautifully in all other browsers.

Exception thrown and not caught
mapcontrol.ashx?v=6&_=1303145735376,
line 149 character 618137 throw new
VEException(“VEMap:cstr”,”err_invalidelement”,L_invalidelement_text);

Symptoms:

• The virtual earth library gets loaded just fine.
• loadMap doesn’t have any syntax errors.
• The div placeholder for the map exists on the page before, during, and after loadmap() is called.
• The error gets thrown only around the time loadmap() is called; not when the library loads.
• The map shows up just fine in all browsers but IE8.
• All users of IE8 get the error every time (so far as I know all my testers have been on XP, but one may be on Vista).
• In IE8 a notification pops up about the error, I can get some more info in the script debugger (above). Then no map appears in IE8.

Originally all the JS was linked with script tags. The error still occurred then. I’ve now switched to yepnope for various reasons. The last JS file yepnope loads is one related to the maps, jquery.vemap.js:

(function($){
    $.fn.showMap = function(){
        var jqoThis = this;
        jqoThis.oneTime(1000, "loadVELibrary", function(){
            $.getScript("http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6", function(){
                jqoThis.oneTime(1000, "loadMap", function(){
                    if(typeof(loadmap) == 'function'){ var map = loadmap(); }
                    $(this).oneTime(500, "setZoom", function(){
                        if(typeof(map) == 'object'){ if(typeof(map.SetZoomLevel) == 'function'){ map.SetZoomLevel(13); } }
                    }); // oneTime "setZoom"
                }); // oneTime "loadMap"
            }); // $.getScript
        }); // oneTime "loadVELibrary"
    }; // showMap
})(jQuery);

Basically this exists pretty much just call loadmap(), which is a function written in cooperation with our backend code. The backend code outputs it in the HTML as an embedded script. loadmap() looks like:

function loadmap()
{
    var map = new VEMap('cmMap'),
        arp = [],
        propertyLayer = null,
        propertypoint = null,
        propertyPin = null,
        customicon = null,
        token = '...',
        label = "...";

    map.SetClientToken(token);
    map.LoadMap();                                 
    map.HideDashboard();                

    propertyLayer = new VEShapeLayer();
    map.AddShapeLayer(propertyLayer);

    propertypoint = new VELatLong(parseFloat(33.12966),parseFloat(-117.333488));
    arp[0] = propertypoint;
    propertyPin = new VEShape(VEShapeType.Pushpin,propertypoint);
    customicon = new VECustomIconSpecification();
    customicon.Image = "....";
    propertyPin.SetCustomIcon(customicon);      
    propertyPin.SetDescription(label);
    propertyLayer.AddShape(propertyPin);

    map.SetCenterAndZoom(propertypoint,13);

    return map;             
}

All changes to loadmap() are only made and tested on my local dev machine. So far no adjustments to loadmap() have helped — which isn’t exactly surprising, since the same function is used on other pages with no issues.

As far as fixing it, I have tried:

• Changing X-UA-Compatible (based on threads I found).

Originally I was using:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

I tried changing it to the below since a few threads mentioned that fixed the issue.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

I also tried taking X-UA-Compatible out entirely. None of this fixed the issue, I continued to get the error in IE8. Manually toggling compatibility mode also had no effect.

• Changed the syntax of loadmap(). (See above for last iteration)

  1. Moved pin code so that map.AddShapeLayer(propertyLayer) was done before propertyLayer.AddShape(propertyPin) based on a suggestion on a forum. IE8 still errors.
  2. Moved all the globally declared variables inside the loadmap() function. IE8 still errors.
  3. Ensured VEMap.LoadMap() method was called immediately after SetClientToken (and before HideDashboard & everything else). IE8 still errors.

Example link –redacted–. Please note the example link will not show the fixes I attempt, because it’s live. But since the attempted fixes have not fixed the issue, please ignore that and refer to this post for the up-to-date code that still doesn’t work.

Answer 1

From the MSDN forums, changing the script call to ?v=6.3 (in place of ?v=6) fixes the error.

(Even though ?v=6 is allegedly forwarded to ?v=6.3 and the two scripts are supposedly identical!)

Upgrading to v7 also works, although changes to the syntax of the loadmap() function are necessary to upgrade.