Angular Google Map not rendering in Ionic view


Before I post my first question I’d like to say thanks to the creators of the Ionic Framework for the great job that they’ve done with the software - I’m having a lot of fun working with and exploring the framework in my App development and look forward to working with it for the foreseeable future.

I am experiencing some issues with the angular-google-maps integration (!/) in that I cannot get the map to render at all. Crazy thing is that the GoogleMapAPI promise is being triggered (as per alerts that I am placing within there for testing purposes) but no map is rendered to the screen.

My index.html file (in my iOS directory) uses the following file calls:


I have double checked that these files are all present in the locations I have listed in the script src attributes so no problems there.

The Google Map plugin is being loaded/initialised within my controller.js file via the following:

angular.module('sampleAppNameHere.controllers', ["google-maps".ns()])

.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
 	key: 'MY-KEY-HERE',
        v: '3.17',
       libraries: 'weather,geometry,visualization'

Further down in the controller where I want the Google Map to be loaded from I have the following set-up:

.controller('LocationController', ['$scope', '$http', '$stateParams', '$sce', '$ionicLoading', '$ionicPopup', '$timeout', 'Logger'.ns(), 'GoogleMapApi'.ns(), 'RetrieveAppContent', function($scope, $http, $stateParams, $sce, $ionicLoading, $ionicPopup, $timeout, $log, GoogleMapApi, RetrieveAppContent)

  function parseLocations(locationID, locationName, regionName)
               // Retrieve factory function to return AJAX loaded data
                       // Loop through associative array formed from parsed AJAX data into factory method
			angular.forEach(locationObj.locations, function(v, k)
	    		    if(locationID === v.recordID)
                                // Other content in here bonded to scope
		    		$scope.mapLongitude       = 	v.mapLongitude;
		                $scope.mapLatitude          = 	v.mapLatitude;
		                $scope.mapZoom 	           = 	v.mapZoom;


                        // Alerts placed in here are triggered when the template loads
			maps.visualRefresh = 	true;
			$             = 	{ center: {latitude: $scope.mapLatitude, longitude: $scope.mapLongitude }, zoom: $scope.mapZoom };
        		$scope.options        = 	{ scrollwheel: false };



The parseLocations function is called shortly afterwards in the above controller and the content is all loaded into the template exactly as intended so no problems there BUT the angular map will not render.

The following segment is from the view where the content for the controller is loaded/displayed and where the map is located:

<ion-view title="{{ locationName }}">
	<ion-content class="location-panel" ng-controller="LocationController">

		<!-- Render Google Map -->
		<div id="map-canvas">
    		<ui-gmap-google-map center="" zoom="map.zoom"></ui-gmap-google-map>

I have set the following class within the CSS that the app uses:

.angular-google-maps-container {
    height: 400px;

But I see NO rendering of the map only a white space fixed to the above height.

Can anyone offer any suggestions/heads-up on what might or could be causing the non-rendering of the Map and what steps I might be able to take to rectify this?

My thanks in advance for any help that folk might be able to provide…and my apologies if the code formatting is a bit wonky! :-/


I have the same question. I believe this is because the API key is only authorized for your package and not the Ionic View package. Adding the ionic view package name should remedy the situation (whatever that name is…).


did you figure this out