Google maps not displaying “angular-google-maps”
Hi guys… I am here again to share a tip. I have worked a lot in the last two weeks with Angular Google Maps inside my current Onsen UI project, and i had many issues of compatibility and dependencies.
My project was working well in browser and with Cordova 4.3 ( But i had many alerts from Google play , like , Security Alert: Apache Cordova vulnerabilities in your Google Play app , change your cordova version)
So, i changed my cordova to 5.2 , 6.0 .
To my sadness, Angular Google Maps not works normally with Cordova 4+ .
Searching in web i found this note below
if you works with Cordova 4+ you may need to include a Whitelist meta tag, or maps will not work . Cordova 4+ comes with a Whitelist Security plugin by default. But some services require additional HTML5 security meta tag.
You may need
cordova plugin add cordova-plugin-geolocation. This requires cordova 5.0+
cordova plugin add cordova-plugin-whitelist
after add whitelist plugin , we need to initialize it properly. Add this meta tag to index.html HEAD content:
<meta http-equiv=“Content-Security-Policy” content="default-src ; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’">
If you use Visual studio add the configuration below
Add two Domain acess: geo: & http://maps.google.com
And be happy