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

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.