Internet Explorer 6 won't show a Bing Ajax v7 map

Question

Is it possible to make IE6 (or IE 8 set to quirks mode through the IE Developer Tools window) load and show a Bing Ajax version 7 map control?

For example, try running the "Hello World" example on this page in IE6 or IE8 in quirks mode. The page remains blank.

From this blog post I understand that the Bing Ajax v7 map does not officially support IE6. But you can visit maps.bing.com with IE6 and it shows a v7 map, so it must be possible.

I've played around in IE8's Developer Tools window and if you suppress the position style element on the div with class MicrosoftMap that's added dynamically by MS's JavaScript it starts to look better. This makes me think there's some magic combination of styles on parent divs and other tags that will make it work.

I'm having the same problem as you.. I am in the process of upgrading to 7.0 and I saw on the website that IE6 was not listed in the supported browser section.. However, the actual bing maps website which looks to use the new api and does work in IE6.. I suppose they added support for themselves but not for the open version. This is a major blow since now I'll need to support both versions (about 7% of our visitors are on ie6). I tested in fiddler and it appears the images and things are loading but the images do not get put on the map. There may be a way to fix this though. — Matt Wolfe

Alastair Aitchison Alastair Aitchison · Accepted Answer · 2011-03-05T10:04:45

Make sure that you set a width and height on the map (both in the div style and also in the mapoptions passed to the map constructor). Can't actually test it myself, but try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <script type="text/javascript">
    function GetMap() {
       var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
              { credentials: "BingMapsKey",
                center: new Microsoft.Maps.Location(52.6, 1.26),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7,
                height: 480,
                width: 640
              });
    }
  </script>
</head>
<body onload="GetMap();">
  <div id="mapDiv" style="position:relative; width:640px; height:480px;"></div>    
</body>
</html>

Internet Explorer 6 won't show a Bing Ajax v7 map

1 Answers