Will.Harris Will.Harris - 1 year ago 185
Javascript Question

Google Maps JavaScript API works in browser but not in Cordova app on a device

I have an Ionic / PhoneGap app that calculates the distance between two locations using Google maps


This works fine when I
ionic serve
the application in a web browser but when I install it onto my test device (Samsung Galaxy S4 - 5.0) it doesn't work, and by doesn't I mean I get no callback whatsoever (from the defered object or the try catch statement) making it impossible to debug.

My Code

Factory wrapper class:

.factory('GmapsWrapper', function ($q) {

function _GetLatLngObject(lat, lng) {
console.log('Gmaps Wrapper - getting new lat lng object...');
try {
return new google.maps.LatLng(lat, lng);
} catch (err) {
console.log('*google.maps.LatLng()* error: ' + err.message);
return null;

function _GetJourneyDistance(startLat, startLng, endLat, endLng) {
console.log('Gmaps Wrapper - calculating journey distance...');
var d = $q.defer();
try {
var origin = _GetLatLngObject(startLat, startLng);
var destination = _GetLatLngObject(endLat, endLng);

console.log('origin: ' + angular.toJson(origin));
console.log('destination: ' + angular.toJson(destination));

var service = new google.maps.DistanceMatrixService();
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
console.log('*service.getDistanceMatrix* callback: response = ' + angular.toJson(response) + ', status = ' + status);
d.resolve(response, status);
} catch (err) {
console.log('*google maps service.getDistanceMatrix()* error: ' + err.message);
return d.promise;

return {
GetJourneyDistance: _GetJourneyDistance,
GetLatLngObject: _GetLatLngObject

Controller function calling the

function Calc() {
GmapsWrapper.GetJourneyDistance(52.8425701, -1.3493778, 52.8460761, -1.3363366).then(function (data, status) {
PopupWrapper.ShowAlert('Calculte Distance', 'Success.');
if (data.rows && data.rows.length > 0) {
var distance = data.rows[0].elements[0].distance;
PopupWrapper.ShowAlert('Distance', 'Km = ' + EbiLibrary.ConvertMetersToKm(distance.value) + '<br />Miles = '
+ EbiLibrary.ConvertMetersToMiles(distance.value));
}, function (err) {
PopupWrapper.ShowAlert('Calculate Distance', 'Error: ' + angular.toJson(err));

index.html script reference:

<script src="https://maps.googleapis.com/maps/api/js?key=[MY KEY]&sensor=true"></script>

config.xml whitelisting:

<access origin="https://maps.googleapis.com/maps/api/*" />

Additional Info

I know the Google Maps script is added correctly in my
file because when I
the origin and destination variables it displays them as a lat lng object which is created using the
new google.maps.LatLng(lat, lng)

Answer Source

Thanks @Joerg for pointing me in the right direction. I used the developer tools to check what requests were being made when using ionic serve and noticed that three requests were made:

So I have changed my whitelisting to <access origin="https://maps.googleapis.com/*" /> which for now seems to have solved it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download