Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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:
