Thursday, April 28, 2016

angular-google-maps TypeError: $scope.map.control.refresh is not a function

By Hường Hana 1:30 AM , , , , Leave a Comment

I integrate angular-google-maps in my cordova mobile application. I want to refresh map using the following function.

        function refreshMap() {             $scope.map.control.refresh({                 latitude: $scope.location.T_Lat_Deg_W.value,                 longitude: $scope.location.T_Long_Deg_W.value             })         }

But error apprears

angular.js:13540 TypeError: $scope.map.control.refresh is not a function

at Scope.refreshMap (mapController.js:122) at fn (eval at <anonymous> (angular.js:1), <anonymous>:4:224) at expensiveCheckFn (angular.js:15475) at callback (angular.js:25008) at Scope.$eval (angular.js:17219) at Scope.$apply (angular.js:17319) at HTMLAnchorElement.<anonymous> (angular.js:25013) at defaultHandlerWrapper (angular.js:3456) at HTMLAnchorElement.eventHandler (angular.js:3444)

Here is the JSFiddle example for this problem.

Is there a way to solve this problem ? Thanks !

1 Answers

Answers 1

Actually the key of this problem is that $scope.map.control.refresh should not be used before the map is completely loaded. If the map is initially hide, then I call a function like this

function refreshMap() {     //show map action     $scope.map.showMap = true;     //refresh map action     $scope.map.control.refresh({latitude: 48,longitude: 2.3}); }

The refreshMap function will call the show map action and refresh map action at the same time. It means that map is not fully loaded when I call the $scope.map.control.refresh function. Thus, it will report the TypeError: $scope.map.control.refresh is not a function.

One method is to use uiGmapIsReady to detect whether the map is ready for usage.

function refreshMap() {     //show map action     $scope.map.showMap = true;      //refresh map action     uiGmapIsReady.promise()         .then(function (map_instances) {             $scope.map.control.refresh({latitude: 48,longitude: 2.3});         }); }

This JSFiddle use uiGmapIsReady to solve this problem.

The second method is to use $timeout to delay the refresh action.

function refreshMap() {     //show map action     $scope.map.showMap = true;      //delayed refresh map action     $timeout(function(){         $scope.map.control.refresh({latitude: 48,longitude: 2.3});     },3000); }

This JSFiddle uses $timeout to solve this problem.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment