Getting Errors with the New Version of the Bing Maps v7 Control? – UPDATE

After further investigation following my post yesterday, it seems that the scope of changes included in the latest Bing Maps AJAX v7 update is rather wider than I initially realised. This became clear after a number of threads started appearing on the MSDN Bing Maps forum reporting that seemingly innocuous code had suddenly and inexplicably stopped working, at around the same time that the new release was pushed out.

The problems seem to revolve around changes made to the method and order in which separate elements of the library are loaded. In v6.3, the general recommendation was:

  • Include a call to the API library, <script charset=”UTF-8″ type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us”></script&gt;, in the <head> section of your code
  • Initialise a new VEMap() object in the onload event handler of the <body>.
  • Call all other functions on the map from the onLoadMap callback function, to ensure that they are fired only after the map is fully initialised.

In v7, this changed slightly. For starters, there isn’t an equivalent to the onLoadMap callback, so every function that you want to fire immediately after the map is created tend to get called in sequence from a single GetMap() method. It seems possible that these may therefore fire before the map is fully initialised.

Secondly, it seems that the updated v7 API now employs some form of asynchronous or lazy-loading – only including certain elements on demand as they are required. It’s hard to unravel exactly what the load sequence is here, but it no longer seems possible to include any Bing Maps code directly in the <head> of the document. The following code, for example, will fail with a TypeError: Microsoft.Maps.Location is not a constructor error:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Bing Maps v7 Initialisation Bugs</title>
  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
  <script type="text/javascript">
    function tryCreateLocation() {
      try {
        var MyLocation = new Microsoft.Maps.Location(51, -0.15);
        alert(MyLocation);
      }
      catch (e) {
        alert(e);
      }
    }
    tryCreateLocation();
  </script>
</head>
<body></body>
</html>

Users of jQuery are probably familiar with the $(document).ready function, used to fire an event only after the DOM has loaded, and you may think that this would provide a solution to the problem. Unfortunately, not so… calling the tryCreateLocation() method after the document is ready, as in the following code, reports intermittent errors (the most annoying kind – for me, it works in IE9 but not FF4, but others have reported other findings):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Bing Maps v7 Initialisation Bugs</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
  <script type="text/javascript">
    function tryCreateLocation() {
      try {
        var MyLocation = new Microsoft.Maps.Location(51, -0.15);
        alert(MyLocation);
      }
      catch (e) {
        alert(e);
      }
    }
    $(document).ready(function() { tryCreateLocation(); });
  </script>
</head>
<body></body>
</html>

If you are using jQuery, and want to perform actions on the map as soon as it is loaded, try using the $(window).load method instead, as shown below. $(window).load fires slightly after $(document).ready, and only when all objects on the page have fully finished loading, not just after the DOM is ready. This seems to fix the errors of using Bing Maps methods in the latest v7 update before they are initialised (at least, all those found so far).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Bing Maps v7 Initialisation Bugs</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
  <script type="text/javascript">
    function tryCreateLocation() {
      try {
        var MyLocation = new Microsoft.Maps.Location(51, -0.15);
        alert(MyLocation);
      }
      catch (e) {
        alert(e);
      }
    }
    $(window).load(function() { tryCreateLocation(); });
  </script>
</head>
<body></body>
</html>
This entry was posted in Bing Maps and tagged . Bookmark the permalink.

2 Responses to Getting Errors with the New Version of the Bing Maps v7 Control? – UPDATE

  1. Brian M says:

    Thanks for this post, we’ve noticed degradation of our map performance since last week and this explains it. Will try implementing your window.ready() workaround.

  2. Jordan314 says:

    Thanks for this. Unfortunately for me when trying to manipulate the pins with jquery, I still was having trouble as the map was zooming in and settling itself once it loaded. I had to hack a for() loop manual timeout for about 2 seconds before I could access everything.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s