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-geolocation

    cordova plugin add cordova-plugin-whitelist
    https://github.com/apache/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

    0_1457821045655_2016-03-12 (2).png

    Result:

    0_1457821173974_Screenshot_2016-03-12-19-18-14.jpg