Yoshino Yoshino - 5 months ago 86
AngularJS Question

Loading Google Map Api using $.getScript on a Ionic app

I'm currently working on web-app using apache cordova, ionic and google map.
I'm getting issues trying to load correctly the google map js api. The problem is that the app don't work on my device but works just fine when I emulate it on Ripple.

So I have a controller for a Ionic View, when the user enter this view a condition check if the google maps api is loaded, if not we load it and then start using the GM Api. I can't figure where it has gone wrong.

Here is the condition making the call for the loading function...

$scope.$on('$ionicView.loaded', function () {
var test = false;
if (test) {
alert("Google Map api fully loaded");
else {
alert("Google map api not loaded"); //The alert is fired.


The loading function

$scope.loadApi = function () {
if ($cordovaNetwork.isOnline()) //check if device is connected {

alert('Loading api'); //The alert is fired
function () {

alert("Api Loaded"); //Alert not fired on device
$scope.startGeo(); // The function isn't called so no map

else {
alert('Check your connexion');


Here is the html part, in case I forgot something....

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!--Google map for Angular-->

<script src="lib/angular-google-maps/lodash.min.js"></script>
<script src="lib/angular-google-maps/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps/angular-google-maps.min.js"></script>
<script src="lib/localforage/localforage.min.js"></script>
<script src="lib/localforage/angular-localForage.min.js"></script>
<script src="lib/jquery.js"></script>

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx'></script>-->
<script src="js/controllers.js"></script>

<body ng-app="myapp">

I've tried many things such as using angular-load, replacing the getScript function by an ajax call (that is basically just the same thing), tried this answer to see if it could help..

Thanks for your help.



Solved my problem by replacing the Google Map loading links.


Installed the whitelist plugin and added in the head :

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Replaced google Map loading link :

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

Got rid of the https: from the link.


In the map's controller :

The loading function, I replaced the https protocol by the http one.

$scope.loadApi = function () {
    if ($cordovaNetwork.isOnline()) {
        $.getScript('http://maps.googleapis.com/maps/api/js?sensor=false', function () {

    else if($cordovaNetwork.isOffline()) {


SECOND SOLUTION (Using angular-google-maps)

Just a reminder of angular google map's config in the app.js

For those using Angular google Map. The library load google map automatically, you just have to set it up properly. There is also an event to check if the google map is loaded. I wasn't aware of this at the time, and mixed everything, angular google maps loading process with mine. etcetera :)

angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) {
        key: 'myKey',
        v: '3.20', //defaults to latest 3.X anyhow
        libraries: 'weather,geometry,visualization,places'