Home

Awesome

Bing Maps V6.x To V8 Shim

Bing Maps (formerly known as Virtual Earth) was deprecated in November of 2016 and will be taken offline in August of 2017. This project wraps Bing Maps V8 and exposes an API that is very similar to Bing Maps V6.x. In many cases this shim can be implemented in an existing application using Bing Maps 6.x with a only few lines of code and provide majority of the v6.x functionality on a Bing Maps V8 web control.

This shim has some known limitations and is only meant to help keep applications that are using Bing Maps v6.x running long enough for developers to be fully migrated their applications to Bing Maps V8. This should not be condsidered a long term solution. See the Bing Maps V6.3 to V8 Migration Guide for detailson how to migrate your app.

How to implement

Implementing this solution requires the following steps:

  1. Download the BingMapsV63ToV8Shim.js file from the dist folder or this project.
  2. Add this file to your application like you would any other JavaScript file.
  3. Locate the script tag in your application which loads the Bing Maps V6.3 web control. It will look something like one of the following, but may have additional query parameters in the URL.
<script type="text/javascript" src="http://dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript" src="https://dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3&s=1"></script>

<script type="text/javascript" src="https://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3&s=1"></script>
  1. Replace this map script tag with the following script tag.
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol'></script>
  1. Right after the map script tag add an additional script tag that points to where the BingMapsV63ToV8Shim.js file is hosted in your application.
<script type="text/javascript" src="scripts/BingMapsV63ToV8Shim.js"></script>

Note that you will need to change the URL path to point to the proper location in your application.

Ensure proper authenication is implemented

It is important to ensure that your application is properly implementing authenication. V6.x required the map to be authenicated but did not display any warnings when this was not done. Bing Maps V8 will display a warning over top of the map if a Bing Maps key is not specified when loading the map.

In your code, find where the VEMap class is created and also where the LoadMap function of that class is being called. Between these two lines of code should be call to the SetCredentials function. Here is what this should look like:

var map = new VEMap('myMap');
map.SetCredentials('Your Bing Maps Key');
map.LoadMap();

If you do not see the call to the SetCredentials function, your application is not properly implementing authenication. Add this line of code as shown above and add your Bing Maps key. You can find your Bing Maps key in the Bing Maps portal by going to My Account -> My Keys.

Example Implementation

Before - using V6.x

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Core Map Control Sample</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=6.3"></script>

    <script type="text/javascript">
    var map = null;
    function GetMap()
    {
        map = new VEMap('myMap');
        map.SetCredentials('Your Bing Maps Key');
        map.LoadMap();
    }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

After - Shimmed and uses V8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Core Map Control Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol'></script>
    <script type="text/javascript" src="scripts/BingMapsV63ToV8Shim.js"></script>

    <script type="text/javascript">
    var map = null;
    function GetMap()
    {
        map = new VEMap('myMap');
        map.SetCredentials('Your Bing Maps Key');
        map.LoadMap();
    }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

Common Issues

Known Limitations

Additional Resources

License

MIT

See License for full license text.