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

Question

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 !

China

Can you show some more code? Your whole controller and your map tag? – Undertook

I'm facing with the same issue since I upgraded to Angular 1.5 and angular-google-maps 2.3.2... – Ammoniacal

It is really weird. Sometimes it works, sometimes it reports errors – China

Can you put your code in a plunkr or something so it's easier to tell what the problem is – Spectatress

so according to your comment it works sometimes, it is not giving error every time when you refresh in the same controller? – Birthroot

also if you can update how you are calling that function, it will be great – Birthroot

It seems like you need to wait until the map is loaded before you can call that function. – Ablepsia

@Josem Exactly, but I tried 'uiGmapIsReady', it does not work – China

What does "it does not work" mean? It never gets fired? It says true when it's false? Something else? Like others have said, we need more code to be able to help you, preferably a Minimal, Complete, and Verifiable example. – Ablepsia

Thanks, I will add a JSFiddle in this question, I'm working on it – China

Answer 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.

China