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.
http://angular-ui.github.io/angular-google-maps/#!/
Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications.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+
https://github.com/apache/cordova-plugin-geolocationcordova plugin add cordova-plugin-whitelist
https://github.com/apache/cordova-plugin-whitelistafter 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.comAnd be happy
Result:
