Maps and Location in Crosswalk

ionic-v1
1

My current ionic project makes use of google maps via the javascript api:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

I decided to migrate the project to crosswalk for performance reasons (particularly animation). However after running

ionic browser add crosswalk

I found that none of the maps work anymore. I repeated the same steps using the ionic map sample app and had the same issue. After some investigation, the issue seems to be related to Contest Security Policies since the scripts are loaded externally and Google Maps runs eval() functions.

I added the Cordova whitelist plugin and with some tweaking managed to clear up the eval() issues, but it seems the only way to get everything running is to include a Content-Security-Policy meta tag and explicitly allow each and every google ajax url which feels really clumsy:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com https://maps.gstatic.com/ https://mts1.googleapis.com">

Moreover, navigator.geolocation has stopped working completely.

Has anyone else had this many issues migrating to crosswalk with Maps and Geolocation? I’ve made the switch with previous projects seamlessly, but many hours of googling and attempts later here and I’m out of ideas.

2

are you using the geolocation plugin?

Because you need to accept that your app is using your current position and geolocation to work with it.

3

@bengtler Thanks for the tip. I have uninstalled and re-installed the geolocation plugin which has fixed navigator.geolocation issue.

The Maps API issue still remains a question, though.

4

I’m experiencing the same problem, has anybody found a resolve to the issue yet?

5

I have been using the following Content-Security-Policy which seems to be working

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

With the following in my config.xml

<access origin="*"/>