Angular Google Map not rendering in Ionic view

Question

I am experiencing some issues with implementing the angular-google-maps plugin (https://angular-ui.github.io/angular-google-maps/#!/) for the Ionic Framework software 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:

_assets/_js/_plugins/lodash-2.4.1.min.js"
lib/ionic/js/ionic.bundle.js"
lib/ngCordova/ng-cordova.min.js"
cordova.js"
_assets/_js/_plugins/angular-google-maps-2.0.7.min.js"
_assets/_js/app.js"
_assets/_js/_custom/factories.js"
_assets/_js/_custom/controllers.js"

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) {
  GoogleMapApi.configure({
    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
        RetrieveAppContent.retrieveRemoteContentForApp().then(function(locationObj)
        {
                       // 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;


                }
            });


        GoogleMapApi.then(function(maps) 
        {
                        // Alerts placed in here are triggered when the template loads
            maps.visualRefresh =    true;
            $scope.map             =    { 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="map.center" zoom="map.zoom"></ui-gmap-google-map>
        </div>

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

.map-canvas,
.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! :-/

Answer 1

First of all thanks to Brad for his answer to my question (the heads up on the CSS class name WAS useful for my most recent attempt in using this package!).

I originally solved this, back in November 2014, by writing my own custom directive which provided the Google Map functionality that I needed.

Since then I've had occasion to use the latest version of the AngularJS Google Maps package (angular-google-maps 2.0.12 2015-01-29) and have implemented this without problem (noting Brad's tip on the class name).

Thanks once again.

Answer 2

Check your CSS class

.angular-google-maps-container

should be

.angular-google-map-container.

I believe you have it as maps not map.