locked
Bing Maps in Apache Cordova App RRS feed

  • 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


    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


    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)

    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.
    Monday, February 29, 2016 12:55 PM