Answered by:
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.
};Friday, July 31, 2015 10:38 AM
Answers
-
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
- Proposed as answer by Ricky_Brundritt Friday, July 31, 2015 5:29 PM
- Edited by Ricky_Brundritt Friday, July 31, 2015 5:29 PM
- Marked as answer by Ricky_Brundritt Wednesday, October 21, 2015 12:15 AM
Friday, July 31, 2015 5:29 PM
All replies
-
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
- Proposed as answer by Ricky_Brundritt Friday, July 31, 2015 5:29 PM
- Edited by Ricky_Brundritt Friday, July 31, 2015 5:29 PM
- Marked as answer by Ricky_Brundritt Wednesday, October 21, 2015 12:15 AM
Friday, July 31, 2015 5:29 PM -
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.
Saturday, August 1, 2015 5:18 AM -
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?
Saturday, August 1, 2015 11:50 AM -
Are you still seeing this issue?
http://rbrundritt.wordpress.com
Tuesday, August 11, 2015 7:09 PM -
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?
Thursday, August 13, 2015 7:09 AM -
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)
Monday, February 29, 2016 12:55 PM