Question

Bing’s got something they call “an AJAX control” that can dynamically embed generated maps into any webpage. There’s an online interactive demo for the control.

How can I use this control?

Answer 1

See the demonstration.

There’s a Javascript class library available at
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

You need to include it into your page like this:

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

And then call it from within javascript like this:

var map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), 
                                 {credentials: 'Your Bing Maps Key'});

To get a bing maps key, go to this page.

You need a div with that id in your HTML page, and it should be sized and styled position:relative:

<div id="SDKmap" style="position:relative; height:400px; width:400px">

You can then add information boxes and pushpins to that map.

---

I also built a javascript helper that can extract custom attributes form the div element, and generate the map for you, complete with pushpins and infoboxes. like this:

  <div id='map3'
       class='map'
       data-mapdata='center: 42.3 -78.0; zoom:7;pushpin:42.323 -78.80; pushpin:42.93 -77.189; pushpin: 41.13 -78.389'></div>

And then the javascript:

        bingMap.displayMap("map3");

The js module containing the helper class is available on the jsfiddle link.