CODEWITHSUNDEEP
javascriptcordovagoogle-mapswindows-phonebing-maps
Vishal Sharma
Vishal Sharma

Reputation: 1733

How to implement Map(Google or Bing) in windows platform in PhoneGap?

I did finish Phonegap app for iOS & Android. But it's Windows platform which became nightmare for me now.

I need to integrate map in my app.For iOS & Android i did use mapsplugin. But it doesn't support windows platform.

So, for windows i did try Maps JavaScript API. But it shows blank screen on Windows device & It's perfect in iOS & Android(I manually tested it in both).

So, i finally decided to switch to Bing map for Windows platform. I tried Being Map Dev Center.I did copy whole html code in my index.html but now i got error "Microsoft is undefined" on :

map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});

I think issue will be my index.html may not able to load it's below source JS :

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

I did invested lots of days to salve it but not able to salve it. Please help me .

Upvotes: 3

Views: 526

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

I took a look at this and suspect that the issue you are running into is the new security in Cordova apps. Cordova by default blocks calls to external resources. All Bing Maps services use one of the following domains, often with one or more subdomains.

  • https://*.bing.com
  • https://*.virtualearth.net

http could also be used, but lets use https for added security. We can whitelist these domains as documented here: https://cordova.apache.org/docs/en/4.0.0/guide/appdev/whitelist/index.html

To whitelist these domains when targeting Windows 10, open the config.xml file in your Cordova project and near top of the fill you should see <access origin="*" /> after this line add the following two lines:

  <access origin="*.bing.com" subdomains="true" />
  <access origin="*.virtualearth.net" subdomains="true" />

Now if you build your project it may work, it may not. If it doesn't also ensure that the version of Windows that your app targets in 10. There should be a preference property in the config.xml file that specifies the target version of Windows. Make sure it is set to 10.0 like this:

<preference name="windows-target-version" value="10.0" />

If you build and deploy your app now it should work. I've tested it on my Windows 10 phone with a simple map and it worked.

Note that the there are some known performance issues with the touch controls on Windows 10 phones at the moment. You can see these even if you view the interactive SDK in the browser on your phone. Our team is working on these and plan to have these resolved within the next month.

Tip: If you are using Visual Studio and seeing a deployment error when trying to deploy to your Windows Phone, make sure the target platform in the build configuration of your project is set to Windows Phone (Universal).

Initially when I started looking into this I didn't realize that the process to whitelist domains was different depending on the target device. As a result I also figured out how to get this to work on Android as well. For Android, whitelisting is done through a content security policy metatag. By default Cordova uses this metatag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

I initially tried adding in the domains I mentioned earlier by continued to see the files blocked in the network trace. One thing to take into consideration is that for simplicity Bing Maps only requires you to specify a single URL to access the code for the map control, however the Bing Maps control uses a modular framework which allows it to load fast but also means it needs to load a number of additional resources on the fly using inline script tags. There is a security setting for this that we can set in the metatag.

With all these things in mind I modifying the security metatag to the following:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *">

These changes now allows JavaScript and CSS files to be loaded from the two domains mentioned previously and also allows JavaScript files from these domains to load additional resources using inline scripting.

Putting this all together here is a simple code sample that I used for testing that provides a full screen map in a Cordova app.

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *">

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
        <script>
            var map;

            function GetMap() {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'Your Bing Maps Key'
                });
            }
        </script>
        <style>
            body, html{
                padding:0;
                margin:0;
            }
        </style>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

Upvotes: 1

Related Questions