Google Maps on Ionic Framework/Cordova not working on android build

Question

I have been writing code for an app to track user location and display it using Google Maps.

My code works perfectly in browsers (Safari,Firefox,Chrome) but doesn't work at all on mobile (android).

The google maps api doesn't work and the navigation is unreliable. I'm a ionic newbie and wrote a fairly simple app to test it out. It has got ionic side menu template with some simple AngularJS controller.

angular.module('starter.controllers', [])

    .controller('AppCtrl', function($scope, $ionicModal, $timeout) {

        // With the new view caching in Ionic, Controllers are only called
        // when they are recreated or on app start, instead of every page change.
        // To listen for when this page is active (for example, to refresh data),
        // listen for the $ionicView.enter event:
        //$scope.$on('$ionicView.enter', function(e) {
        //});

        // Form data for the login modal
        $scope.loginData = {};

        // Create the login modal that we will use later
        $ionicModal.fromTemplateUrl('templates/login.html', {
            scope: $scope
        }).then(function(modal) {
            $scope.modal = modal;
        });

        // Triggered in the login modal to close it
        $scope.closeLogin = function() {
            $scope.modal.hide();
        };

        // Open the login modal
        $scope.login = function() {
            $scope.modal.show();
        };

        // Perform the login action when the user submits the login form
        $scope.doLogin = function() {
            console.log('Doing login', $scope.loginData);

            // Simulate a login delay. Remove this and replace with your login
            // code if using a login system
            $timeout(function() {
                $scope.closeLogin();
            }, 1000);
        };
    })

    .controller('PlaylistsCtrl', function($scope) {
        $scope.playlists = [
            { title: 'Reggae', id: 1 },
            { title: 'Chill', id: 2 },
            { title: 'Dubstep', id: 3 },
            { title: 'Indie', id: 4 },
            { title: 'Rap', id: 5 },
            { title: 'Cowbell', id: 6 }
        ];
    })

    .controller('PlaylistCtrl', function($scope, $stateParams) {
    })

    .controller('MapController', function($scope, $ionicLoading) {
        console.log("MapController");
        $scope.initialise = function() {
            console.log("In Google.maps.event.addDomListener");
            var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
            var mapOptions = {
                center: myLatlng,
                zoom: 19,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            console.log(mapOptions);
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            navigator.geolocation.getCurrentPosition(function(pos) {
                console.log(pos);
                map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                var myLocation = new google.maps.Marker({
                    position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                    map: map,
                    title: "My Location"
                });
            });

            $scope.map = map;
        };
        google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());


    });

Check all code on GitHub. Any help on this would be appreciated.

The error displaying on my developer console:

ReferenceError: google is not defined

Answer 1

Error states that google is undefined. My best educated guess would be that the script from the index.html is not loaded correctly:

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD4bzp0Ck8nTXgfs9ZYo8vXZ2tgWhqzWmY&sensor=true">

I think this is because of the new Cordova 5.0 release being used. You need to install the cordova-plugin-whitelist as following:

cordova plugin add cordova-plugin-whitelist

Also add the following to config.xml:

<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

Finally add the following to your index.html:

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

Be aware that above settings are not settings you want to have in a production environment. Please take a look at the README of the cordova-plugin-whitelist to learn more.