Geek Answers Handbook

Google Maps on Ionic Framework / Cordoba not working on Android build

I am writing code for an application to track a user's location and display it using Google Maps.

My code works fine in browsers (Safari, Firefox, Chrome), but it doesn’t work on mobile devices (Android).

Google maps api do not work and navigation is unreliable. I am a newbie ionist and wrote a fairly simple application to test it. It has an ionic sidebar 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 the code on GitHub . Any help on this would be appreciated.

Error display on my developer console:

 ReferenceError: google is not defined
+5
source share
1 answer

Error: google undefined. My best reasonable assumption was that the script from index.html not loaded correctly:

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

I think this is due to the use of the new version of Cordova 5.0. You need to install cordova-plugin-whitelist as follows:

 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' *">

Remember that the above settings are not the settings you want in a production environment. Check out the README cordova-plugin-whitelist to find out more.

+14
source

More articles:


All Articles