Search code examples
angularjsangular-google-maps

Angular Google Maps won't show anything


From what I gather the below code is the minimum necessary to run Angular Google Maps, but it won't show the map on screen. Looking at #my-map component in Chrome, it shows 0x0px and I haven't been able to change that despite the css and dynamic height declarations. Apart from that it seems to be running fine, there are no console errors and the appMaps module is at least initialized correctly.

<!DOCTYPE html>
html>
  <head>
    <title>New Map</title>
    <style>
      html, body {
        height: 2000px;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .angular-google-map-container { height: 400px; }
    </style>

    <script src="lodash/lodash.js"></script>
    <script src="angular/angular.js"></script>
    <script src="angular-google-maps/dist/angular-google-maps.js"></script>
    <script>  
      var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);

      appMaps.config(function(uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
         key: 'My Key Is Entered Here',
         v: '3.20',
         libraries: 'weather,geometry,visualization'
        });
      });

      appMaps.controller('mainCtrl', function($scope) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
        $scope.$on('$viewContentLoaded', function () {
                var mapHeight = 400; // or any other calculated value
                $("#my-map .angular-google-map-container").height(mapHeight);
            });
      }); 
    </script>
  </head>
  <body>
    <h1>TEST</h1>
    <div id="map_canvas" ng-controller="mainCtrl">
      <ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
    </div>
  </body>
</html>

Edit: Yep, so Roux was correct, added the google maps API script (with key) at the top and angular-simple-logger after angular and that lead me pretty close. Then I just needed to add ng-app="appMaps" to the body element (I'm new to angular in general) and it worked. Thanks!


Solution

  • By following the Quickstart, you can see that you missed to call a few library/api.

    • Add the angular-simple-logger.js in your project (I think it comes with angular-ui packages or angular-google-maps)
    • Don't forget to add the google api, without it, nothing will work. <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>