Bing Maps in Apache Cordova App

Question

I have starting building a new Apache Cordova project in VS 2015, and I have added Bing maps functionality which works fine in both Android and IOS simulators.

It fails on both my Windows phone device and simulator with 'Microsoft Undefined' error. I have looked everywhere trying to find an answer, I have even downloaded the MyShuttle.biz Apache Cordova app to look at the JavaScript code. What am I missing.

 document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {

        if (device.platform == "windows") {
            Microsoft.Maps.loadModule('Microsoft.Maps.Map');     fails on this line
        }

        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        angular.bootstrap(document, ['App']);

    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };

Answer 1

First make sure you have a script reference to Bing Maps on your WP HTML page:

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

Once this is done, I do the following in my Apache Cordova apps:

var map;

document.addEventListener("DOMContentLoaded", init, false);

function init() {
    //Check to see if the Windows 8 version of the map control is being used by checking for the ClientRegion property on the map control. 
    if (device.platform == "windows") {
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: getMap });
    } else {
        getMap();
    }
}

function getMap() {
    map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
        credentials: "YOUR_BING_MAPS_KEY"
    });
}

If you want to use the device ready event you will need to add some logic that waits for the Microsoft namespace to be available. Here is a sample of how to do this:

document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

function onDeviceReady() {
	getMap();
};

function getMap() {
	if (typeof Microsoft == 'undefined' || 
		typeof Microsoft.Maps == 'undefined' ||
		typeof Microsoft.Maps.Map == 'undefined') {
		setTimeout(getMap, 100);
		return;
	}

	try{
		var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
			credentials: bingMapsKey,
			showDashboard: false,
			enableHighDpi: true,
			backgroundColor: new Microsoft.Maps.Color(255, 0, 0, 0)
		});
	}catch(e){
		alert('failed');
	}
}

---

http://rbrundritt.wordpress.com

Answer 2

Thanks for your reply Ricky

Unfortunately neither of these suggestions seem to work.

I have a reference added to 'http://ecn.dev.virtualearth.net...' in my main index page. I load the Map using an Angular Directive in a sub page and this works perfectly for IOS and Android simulators. 

On my windows mobile device I tried both 'DOMContentLoaded' which failed on this line 'if (device.platform == "windows") {' because the device was not available at that point, I also tried using the setTimeout but the reference to Microsoft Maps never becomes available, also tried increasing the Timeout value.

I also use the Geolocation service to get an address from cords, and have read your Blog article 'Accessing the Bing Maps REST services from various JavaScript frameworks'. I use Angular for this to, and this works fine for IOS and Android simulators, but comes back with a 404 on my windows device and windows simulator.

Answer 3

Ricky this error shows up in JavaScript console.

Can’t load <https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1>. An app can’t load remote web content in the local context.

Is there a work around for this?

Answer 4

Are you still seeing this issue?

---

http://rbrundritt.wordpress.com

Answer 5

I have now switched to Windows 10 development for my Apache Cordova app, which has resolved some of the issues I was having. I now get the following error after deploying to the device. This does not occur on Android or IOS simulators.

SCRIPT5009: Unhandled exception at line 1, column 120652 in https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20150720111303.14/js/en-us/veapicore.js
0x800a1391 - JavaScript runtime error: 'ConfigCache' is undefined
veapicore.js (1,120652)

Any ideas?

Answer 6

SCRIPT5009: Unhandled exception at line 1, column 120652 in https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20150720111303.14/js/en-us/veapicore.js

0x800a1391 - JavaScript runtime error: 'ConfigCache' is undefined
veapicore.js (1,120652)

Were you able to solve this? I have the same problem (but with Google Maps). Working fine on Android and iOS, but not on my Windows Phone and the WP emulator.