I am using ngMap in an angularjs application. I run an error when I try to set the scale on a map element. Here is the error message from the Chrome console:
TypeError: Cannot read property 'apply' of undefined at Wk.eventFunc (ng-map.js:205) at Object.T.trigger (main.js:18) at kf (main.js:22) at Wk.N.set (main.js:21) at Wk.setZoom (main.js:29) at ng-map.js:1568 at angular.js:6837 at forEach (angular.js:323) at Object.$get.Attributes.$set (angular.js:6835) at interpolateFnWatchAction (angular.js:8157)
This fires when the zoom attribute of my map element:
<map center="{{initCenter.lat}}, {{initCenter.lng}}" zoom="{{zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()">
tied to my angular controller:
app.controller("mapCtrl", function ($scope, $location, dataContext) { $scope.markers = []; $scope.initCenter = dataContext.center(); $scope.zoom = dataContext.zoom();
dataContext is a service that provides various state variables in an application. I also tried to set $ scope.zoom through a function with the same resulting error.
The error is on line 1568 of the ng-map.js file:
var observeAndSet = function(attrs, attrName, object) { attrs.$observe(attrName, function(val) { if (val) { void 0; var setMethod = parser.camelCase('set-'+attrName); var optionValue = parser.toOptionValue(val, {key: attrName}); void 0; if (object[setMethod]) { //if set method does exist /* if an location is being observed */ if (attrName.match(/center|position/) && typeof optionValue == 'string') { _this.getGeoLocation(optionValue).then(function(latlng) { object[setMethod](latlng); }); } else { // this is the line that causes the problem object[setMethod](optionValue); } } } }); };
When I tried to track what was happening, I performed a run to set the center and set the scaling (the setup center does not cause problems). Center tuning is done on line 1568 and continues along the fun.
Setting the zoom (using the setZoom function) calls the code on line 196 in ng-map.js to execute:
var eventFunc = function(attrValue) { var matches = attrValue.match(/([^\(]+)\(([^\)]*)\)/); var funcName = matches[1]; var argsStr = matches[2].replace(/event[ ,]*/,''); //remove string 'event' var args = scope.$eval("["+argsStr+"]"); return function(event) { function index(obj,i) {return obj[i];} var f = funcName.split('.').reduce(index, scope); // this next line causes an exception in google map main.js f.apply(this, [event].concat(args)); scope.$apply(); } }
Line 205 throws an exception, which leads to an error inside the google map main.js.
Any idea what causes this? And how to solve it :)?
Possible Solution
Playing with this a bit more, I noticed that it does not set the zoom level as such, which causes the problem. In fact, this is the result of burning the event with scaling → after <<<the scale changes.
The first time the map displays the scale, line 204:
var f = funcName.split('.').reduce(index, scope);
is null. I am not sure why this is so, because I do not understand what this line does.
However, future scaling changes have the same line 204 that allows a nonzero value for f.
So, as a workaround, I enclosed lines 205 and 206 in square brackets as follows:
if (f != null) { f.apply(this, [event].concat(args)); scope.$apply(); }
and the error has disappeared.