WinJS – Adam's Code Blog

I was having some trouble finding any good information on how to implement the final build of Bing Maps (v1.1.20120927.0) into a WinJS Windows Store application. It’s actually pretty simple.

Start by downloading and installing the Bing Maps SDK from:
http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca

In Solution Explorer, right click on References and add a reference to “Bing Maps for JavaScript”

Add the following script tag to the top of your HTML file:

<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

1	<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

And add a DIV tag to the HTML which will contain the map:

<div id="mapDiv" style="position: relative; width:  100%; height: 100%"></div>

1	<div id="mapDiv" style="position: relative; width: 100%; height: 100%"></div>

Now add the following JavaScript code to your JavaScript file:

function initMap() {
    var map;

    var mapOptions = {
        credentials: "YOUR_MAP_CREDENTIALS"
    };

    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
}

function initMap() {

var map;

var mapOptions = {

credentials: "YOUR_MAP_CREDENTIALS"

};

map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

}

Add this JavaScript to your onactivated or ready events in the JavaScript file:

Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap, culture: 'en-us', homeRegion: 'US' });

1	Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap, culture: 'en-us', homeRegion: 'US' });

Tag: WinJS

Bing Maps with JavaScript and Windows 8