Using Bing Maps In A Windows App Shell
- Ray Pearce (Unlicensed)
You need to follow the Bing Maps SDK instructions here: https://github.com/blinkmobile/cordova-plugin-map#installation (don't bother actually installing the Cordova plugin unless you intend to use it)
You CANNOT put JavaScript in a script tag and expect it to execute in the Windows app. I know this is a pattern that everyone uses, but it absolutely doesn't work with Microsoft's security restrictions.
You MUST host the JavaScript somewhere and refer to it in externalJavaScript. This means only having script-free HTML (or PHP that generates it) in your navigable Interactions, and having a global event handler (e.g. "pageshow" as in my example) to activate any dynamic behaviour for selected Interactions (after a quick if-test to see if the current Interaction is one of those).
<div id="bing-map"></div>
// this UMD-wrapper lets us write code that works in both BICs!
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
require(['jquery'], factory);
} else {
factory(root.$);
}
}(this, function ($) {
'use strict';
// if we're in the Windows app, try to load in the device's copy of Bing Maps SDK
if (window.MSApp) {
MSApp.execUnsafeLocalFunction(function () {
// can't use jQuery for this, because we end up with non-executable junk ("text/inert")
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'ms-appx:///Bing.Maps.JavaScript//js/veapicore.js');
document.head.appendChild(script);
});
}
// we'll just check the page after each navigation
$(document).on('pageshow', function () {
var mapDiv = document.getElementById('bing-map');
if (!mapDiv) {
return; // can't find our DIV, so exit early
}
if (!window.Microsoft || !window.Microsoft.Maps || !window.Microsoft.Maps.loadModule) {
return; // can't find the Microsoft APIs, so exit early
}
Microsoft.Maps.loadModule('Microsoft.Maps.Map', {
callback: function () {
return new Microsoft.Maps.Map(mapDiv, {
credentials: 'HntzIgiBMFfcPuWIOZSs~gOkdkyrge56xgqvxWfzSCg~AjvxMVNOzPkKf3RubOeTV5RKa1ukcr9PyNRsaflQuSge8hLxGrXTXVyvhb7DJXaa',
width: 400,
height: 400
});
},
culture: 'en-us',
homeRegion: 'AU'
});
});
}));