chrome APP : google maps, Refused to load the script because it violates the following Content Security Policy directive

Question

I'm trying to include google map within my chrome app (not an extension, an APP).

When I launch the app, I see the following exception: Refused to load the script 'https://maps.googleapis.com/maps/api/js?libraries=places' because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

I know this is a content security policy issue, but the following line in my manifest file does not work: "content_security_policy": "script-src 'self' 'unsafe-eval' https://maps.googleapis.com; object-src 'self' 'unsafe-eval'"

This works for an extension, but not for an app. If I try to add this line in my app manifest, I get the following: 'content_security_policy' is only allowed for extensions and legacy packaged apps, but this is a packaged app.

Does anybody had managed to include a google map view within a chrome application?

Answer 1

You can't load external scripts within a Chrome Packaged Application. What you can do instead is to have an iframe in your main html document pointing to a sandboxed html document that can have the reference to the Google Maps script that you need (And also the #map div and the logic to initialize it).

See this example of a sandboxed html inside an iframe: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandbox

Also, be sure to check this document: https://developer.chrome.com/apps/app_external#external in order to setup your manifest