I successfully incorporated angular-google-maps into my Ionic project - in index.html, I included the following scripts:
<script src="lib/lodash.min.js"></script>
<script src="lib/angular-google-maps.min.js"></script>
Within my view HTML file, the code looks like this:
<ion-view>
<ion-content controller="WeatherController">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</ion-content>
</ion-view>
The configuration setup in app.js is as follows:
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'mygmapskey',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
Also, there are specific styles defined in style.css for the map container:
.angular-google-map-container { height: 400px; }
And within the WeatherController script, I have this code:
angular.module('starter', ['ionic', 'uiGmapgoogle-maps']);
...
.controller("WeatherController", function ($scope, uiGmapGoogleMapApi) {
console.log('WeatherController');
uiGmapGoogleMapApi.then(function(maps) {
console.log('maps API loaded; creating map');
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
});
});
While everything works smoothly when running 'ionic serve' on a browser, I encountered an issue when testing it on Android devices. The WeatherController is initialized, but uiGmapGoogleMapApi.then doesn't trigger. Is this expected behavior on mobile devices? I couldn't find much information about it on the official site.