I’m trying to integrate Google Maps in mi Ionic app, with no success so far. As far I have researched, this is something quite straightforward to achieve, so imagine my frustration… (sigh!). I plan to go with angular-google-maps as soon I can make the simple approach work, but for the moment I’m restraining to plain .js solution.
First problem I encountered was with the new cordova-whitelist feature. I thing I’ve come over that, but yet I can’t make things work.
Next is my code snippets:
config.xml:
....
<access origin="*"/>
<allow-navigation href="*://*.googleapis.com/*"/>
...
index.html:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline';">
<title></title>
...
<!-- google maps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
map.html:
<ion-view ng-controller="MapController">
<ion-content>
<div id="map" class="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
MapController.js:
angular.module('myApp').controller('MapController', function MapController($scope) {
console.log("Previous to initialize");
google.maps.event.addDomListener(window, 'load', initialize());
console.log("Not initialize");
function initialize() {
console.log("Initialize");
var mapOptions = {
.....
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
}
});
app.js:
app.run(function($ionicPlatform, $state) {
...
$ionicPlatform.ready(function() {
console.log("Type of: "+ typeof google);
if (typeof google === 'undefined' || typeof google === undefined) {
console.log("Google maps unavailable");
}
console.log('APP STATE DEVICEREADY');
});
});
So, what happens? Map doesn’t show on div and console log messages are like:
– On loading the app:
SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 161 : Type of: undefined
SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 163 : Google maps unavailable
SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 165 : APP STATE DEVICEREADY
– On accessing the controller:
I/Web Console(11672): Previous to initialize at file:///android_asset/www/js/controllers/MapController.js:6
E/Web Console(11672): ReferenceError: google is not defined
E/Web Console(11672): at new MapController (file:///android_asset/www/js/controllers/MapController.js:8:3)
So, obviously, there is something I’m missing; but after several hours researching, I have no clue of what’s wrong.
Can someone please help me??
Thanks in advance
