Angular Google Maps $scope issue

Question

I'm trying to learn angular, and using Angular-Google-Maps with Angular Seed.

I'm just trying to get the map to show up, but I don't think it's receiving the latitude, longitude and zoom parameters, and thus nothing is there. I am not showing any errors in the web developer inspector in Chrome.

I do believe the issue is in adding this

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };

To my scope like the angular-google-maps documentation reads.

If I skip the above instruction and do this in my index.html file instead, it works.

<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map>

This is my app.js file:

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.view3',
  'myApp.version',
  'uiGmapgoogle-maps'
])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){
    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({redirectTo: '/view1'});
}]);

This is my index.html file:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Project R</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
</head>
<body>
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>

  <ul class="menu">
    <li><a href="#/view1">Add Memory</a></li>
    <li><a href="#/view2">Profile</a></li>
    <li><a href="#/view3">Search</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="view3/view3.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
  <script src='bower_components/lodash/dist/lodash.min.js'></script>
  <script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script>
</body>
</html>

my app.css file includes these styles:

#map-container{
  height:400px;
  width:100%;
  position: absolute;
    z-index: -1;
  left:0;
  top:0;
}
.ng-isolate-scope{
  height:400px;
  width:100%;
}

.angular-google-map{
  height:400px;
  width:100%;
}
.angular-google-map-container{
  position: absolute;
  height:400px;
  width:100%;
}

MattDionis · Accepted Answer · 2015-04-17 21:25:22Z

1

It does not look like you declared ng-app or ng-controller in your html. Try the below at the beginning of your code (and obviously close out that div wherever you want that controller's scope to end):

<body ng-app="myApp">
    <div ng-controller="mapCtrl">
        <ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map>

answered Apr 17, 2015 at 21:25

MattDionis

3,62610 gold badges56 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Livi17 Over a year ago

That was the issue... That got it to work. However, in the documentation they do not ask for a div to encompass the ui-gmap-google-map tag. I have no idea how it could possibly work according to the documentation they have here: angular-ui.github.io/angular-google-maps/#!/use

MattDionis Over a year ago

I believe what's happening is that by supplying the values directly in the HTML you are removing the need for the controller, therefore it worked when you hard-coded it. When you're bringing those values in from the controller using bindings like map.center that's where the problems arise, because you obviously would then need that controller.

shaunhusain Over a year ago

This is true, I assumed and the docs probably assume that you defined the controller in your route definition since that's typically the best place to do it. Honestly still wouldn't use this directive as a starting point for learning angular there were/are definite pitfalls in the documentation and it's overly complicated for most peoples needs.

Livi17 Over a year ago

@shaunhusain I'd be interested in looking at your directive. This one has a lot of errors in it.

shaunhusain Over a year ago

@livi1717 I un-deleted my answer with the basic google map wrapper directive I put together. It's definitely got some hacky parts to it still but at least it's pretty simple so debugging/modifying/adding to it shouldn't be too hard.

shaunhusain · Accepted Answer · 2015-04-17 21:25:32Z

/**
* itSimpleGoogleMap Module
*
* Just a google maps api wrapper
*/

(function(){
  'use strict';

  angular.module('itSimpleGoogleMap', [])

  .directive('itSimpleGoogleMap', function($compile, $timeout){
    // Runs during compile
    var _currentMarkers = [];
    var _overlays = [];

    var newdiv = document.createElement('div');
    newdiv.style.width = "100%";
    newdiv.style.height = "100%";
    var map = new google.maps.Map(newdiv, {
      center:  {lat: 41.90, lng: -87.65},
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    return {
      // name: '',
      // priority: 1,
      // terminal: true,
      scope: {
        markers:'=',
        overlays:'=',
        triggerResize:'='
      }, // {} = isolate, true = child, false/undefined = no change
      // controller: function(scope, $element, $attrs, $transclude) {},
      // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
      // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
      // template: '',
      // templateUrl: '',
      // replace: true,
      // transclude: true,
      // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
      link: function(scope, iElm) {
        iElm[0].appendChild(newdiv);

        _.each(_currentMarkers, function(marker){
          marker.setMap(null);
        })
        _.each(_overlays, function(overlay){
          overlay.setMap(null);
        })

        google.maps.event.trigger(map, 'resize');


        scope.$watch('triggerResize', function(){
          google.maps.event.trigger(map, 'resize');
        });


        $timeout(function(){

          var mapOptions = {
            center:  {lat: 41.90, lng: -87.65},
            zoom: 10
          };


          // scope.$watchCollection('options', function(){
          //   if(!scope.options || !map){
          //     return ;
          //   }

          //   map.setCenter({lat:scope.options.center.lat,lng:scope.options.center.lng});
          // });


          scope.$watch('overlays', function(){
            if(!scope.overlays || !map){
              return ;
            }

            _.forEach(_overlays, function(curOverlay){
              curOverlay.setMap(null);
            });

            _.forEach(scope.overlays, function(overlayData){
              var newOverlay = new google.maps.KmlLayer({
                 url: overlayData,
                 map:map
              });
              _overlays.push(newOverlay);
            });

          });

          scope.$watchCollection('markers', function(){
            if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude)
            {
              return;
            }

            _.forEach(_currentMarkers, function(curMarker){
              curMarker.setMap(null);
              google.maps.event.clearInstanceListeners(curMarker);
            });

            _currentMarkers = [];

            var bounds = new google.maps.LatLngBounds();

            var infowindow = new google.maps.InfoWindow();

            if(scope.markers.length==0){
              map.setCenter({lat: 41.90, lng: -87.65});
              return;
            }

            _.forEach(scope.markers, function(markerData){
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude),
                  map: map,
                  icon:markerData.icon
                  // title:markerData.data['Growing Site Name'].answer
              });

              bounds.extend(marker.position);

              var infoWindowElement;

              $compile(markerData.infoWindow)(scope, function(cloneElm){
                infoWindowElement = cloneElm[0];
              });

              google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(infoWindowElement);
                infowindow.open(map,marker);
              });
              _currentMarkers.push(marker);
            });
            map.fitBounds(bounds);
          });

        },100)
      }
    };
  });
})();

Usage would be something like:

<it-simple-google-map
  overlays="model.mapOpts.overlays"
  markers="model.mapOpts.markers"
  trigger-resize="resizeMap">
</it-simple-google-map>

In my implementation here I'm actually only ever creating 1 map object and just appending it wherever this directive is found, so this can't work with more than one on screen but was an optimization that was good for my project. If you move the creation of the map object inside the link function then you'd get one created every time the directive is encountered for compiling.

The trigger-resize is a bit of a hack to make a call on the maps function for resizing itself when the directive is being re-used with different container sizes on different pages.

Just noticed I also only had this deal with taking a set of markers and then fitting to bounds as the means to set the location but if you're interested in building on this let me know and can help add the parts to deal with center/zoom appropriately.

Collectives™ on Stack Overflow

Angular Google Maps $scope issue

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related