Bing Maps in a hybrid app
Question
I am currently trying to use the Bing Maps AJAX API v7 in the new 'Multi-device hybrid App" template provided in Visual Studio, which uses Apache Cordova to provide crossplatform compatibility. I have written the following code, following the template at http://msdn.microsoft.com/en-us/library/gg427624.aspx :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta charset="utf-8" />
<title>Wand</title>
<!-- Wand references -->
<link href="css/index.css" rel="stylesheet" />
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1">
</script>
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
}
</script>
</head>
<body onload="GetMap();">
<div id='map' class="mainview"></div>
<div class="menu">This is the menu</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
But when I debug it in Windows 8.1, it says that Microsoft is not defined (in the GetMap function). I asume that the library from
https:// ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1
has not been loaded properly. Is there anything wrong with my code? Should I use the AJAX WEB API, or is there another for apps (the only one I have seen is for Windows 8 only)?
I think that my app is unable to load the web library because it doesn't have the proper permisions. In the config.xml there is a domain access section, but it says it doesn't appy to the windows platform, so how can I set it to allow loading pages from https:// ecn.dev.virtualearth.net ?
EDIT: Loading the script from a Web context (ms-appx-web) makes the script run, but if I want the code to be multiplatform I cannot use it. The solution would be to include in the Windows 8 manifest a permission for the Bing maps URL, how can I do it?
4 answers
solution1
2 2015-04-05 15:21:06
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Cordova Bing Mapping</title>
<link href="css/index.css" rel="stylesheet" />
<!--Needed for iOS & Android-->
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
<div id='map' class="mainview"></div>
<div class="menu">This is the menu</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
</body>
INDEX.JS
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
//Loads Scripts Dynamically
function loadScript(filename) {
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
}
function onDeviceReady() {
// Load Local Scripts if Windows
if (device.platform == "windows") {
MSApp.execUnsafeLocalFunction(
function () {
loadScript("scripts/veapicore.js"); //Bing Maps SDK VS 2013
loadScript("scripts/veapiModules.js"); //Bing Maps SDK VS 2013
loadScript("scripts/mapcontrol.js"); //downloaded from http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0
Microsoft.Maps.loadModule("Microsoft.Maps.Map", {
callback: loadMap
});
})
}
};
function loadMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), {
credentials: "BING_MAPS_KEY"
});
}
})();
NOTES
* This will work on Windows 8, Windows Phone 8, iOS, Android
* Bing Maps SDK VS 2013
1. Download Location: https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1
2. Local Location: C:\Users\[USER]\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript\
* For Windows Phone (Universal) - Microsoft.Maps.loadModule("Microsoft.Maps.Map", { callback: loadMap }); is still undefined.
solution2
1 2014-10-28 17:25:28
I've implemented Bing Maps in a "Multi-Device Hybrid App" by doing the following:
- Copied the C:\\Users\\\\AppData\\Local\\Microsoft SDKs\\Windows\\v8.1\\ExtensionSDKs\\Bing.Maps.JavaScript\\1.313.0825.1\\redist\\commonconfiguration\\neutral\\Bing.Maps.JavaScript folder into my local project
- Copied http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0 into my local project as remoteBingMaps.js
On "deviceready" (where addScript dynamically adds a script file to document.body)
a. If device.platform == "windows8", then MSApp.execUnsafeLocalFunction(function () { addScript("Bing.Maps.JavaScript/js/veapicore.js"); addScript("Bing.Maps.JavaScript/js/veapiModules.js"); });
b. Else addScript("scripts/frameworks/remoteBingMaps.js")
When loading the map control (where loadMap initializes the map control)
a. If device.platform == "windows8", then Microsoft.Maps.loadModule("Microsoft.Maps.Map", {callback:loadMap}}
b. Else loadMap()
I've gotten this working for Windows 8.1, Windows Phone, Android, and iOS.
solution3
0 2014-06-24 18:12:47
There seems to be a couple of problems with the code.
Firstly, you are directly referencing a library from a URL. That might be causing issues on the Windows platform. You might want to download the file and add it to your project locally.
Secondly, your Bing Maps key has a space at the end, which is why the app is throwing errors at runtime.
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
}
</script>
Change that to:
<script type="text/javascript">
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr" });
}
</script>
solution4
0 2016-04-14 11:24:27
I had the same issue, but neither of the proposed solutions worked for me. Interesting that Bing maps were loaded without any problems on the Ripple Simulator, but on Android emulator or device I had a problem with Microsoft namespace not defined - clearly namespace was not loaded. After some searching I found, that in the config.xml there is configuration for the Whitelist plugin, which controls which pages can be requested from the app (and you can configure that separately for each platform), so I just added:
<allow-intent href="https://ecn.dev.virtualearth.net/mapcontrol/*" />
for the android platform, commented out Content-Security-Policy from index.html and it started to work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.