map.control not refreshing

[renege]

The Refreshing is not working:

app.controller('FoobarController', function($scope, $http) {

    $scope.info = '';
    $scope.map = { 
        id: 0,
        zoom: 8
        control: {
        },
    }; 

    $scope.foobar = function(data){
        $http.post('/get/foobar', data)
            .success(function(data, status, headers, config) {
                // correct lat-lng returned
                $scope.map.control.refresh({latitude: data.latitude, longitude: data.longitude});
                // and is there a way I can change the zoom also?
            });
    };

}
<ui-gmap-google-map center="map.center" zoom="map.zoom" dorebuildall="true" control="map.control"></ui-gmap-google-map>  

What am I missing? Where can I find good docs/examples for this?

[avishai]

I'm also having trouble with this... $scope.map.control.refresh() is returning undefined as $scope.map.control is {}

TypeError: $scope.map.control.refresh is not a function
    at n.$scope.searchInMap (http://localhost.dev/assets/angular/controllers/map-b62fecafa0730b5fa00191a09d36f655.js?body=1:204:30)
    at ib.functionCall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:199:303)
    at n.$get.n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:214:530
    at http://localhost.dev/assets/angular/directives/google-autocomplete.min-654d6a501fcbe5041750fa77cd4687b3.js?body=1:1:1961
    at Array.forEach (native)
    at http://localhost.dev/assets/angular/directives/google-autocomplete.min-654d6a501fcbe5041750fa77cd4687b3.js?body=1:1:1941
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:138:473
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:40:74)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:44:155

And here is the code that triggers the error:

$scope.searchInMap = ->
    console.log $scope.filtered.autocomplete_location
    if $scope.filtered.autocomplete_location? && $scope.filtered.autocomplete_location.geometry?
      $scope.latitudeTmp = $scope.filtered.autocomplete_location.geometry.location.G
      $scope.longitudeTmp = $scope.filtered.autocomplete_location.geometry.location.K
      $scope.map.center =
        latitude: $scope.filtered.autocomplete_location.geometry.location.G
        longitude: $scope.filtered.autocomplete_location.geometry.location.K
      $scope.map.control.refresh($scope.map.center)
    return

[nmccready]

Are you positive your interacting with the map when it is actually ready? IE the map and the API is loaded. I am not seeing errors in specs nor in the main example.

[nmccready]

One of the better examples is two-maps.html

https://github.com/angular-ui/angular-google-maps/blob/master/example/two-maps.html#L46

JS:

https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/two-maps.js#L59

[nmccready]

@renege in your code above your missing zoom and center they are required or the map will bail out.

https://github.com/angular-ui/angular-google-maps/blob/master/src/coffee/directives/api/map.coffee#L76-L81

https://github.com/angular-ui/angular-google-maps/blob/master/src/coffee/directives/api/map.coffee#L42-L43

[kim0z]

Hi @nmccready , Thanks for your input. The $scope.map.control.refresh() doesn't work for me, what I am missing in my code, can you please take a look : (last 2 lines)

trackerApp.controller('view2Ctrl', function ($scope, $http, googleMapsAPIService, dataBaseService) {

        $scope.map = {
            center: {
                latitude: 7.79,
                longitude: -2.4175
            },
            zoom: 2,
            control: {},
            options:{
                draggable:true,
                disableDefaultUI: true,
                panControl: false,
                navigationControl: false,
                scrollwheel: false,
                scaleControl: false
            }
        };

        Promise.resolve(dataBaseService.getGpsTrack()).then(function (val) {
            for (var k in val.data) {

                console.log(val.data[k].latitude);
                console.log(val.data[k].longitude);
                $scope.polylines[0].path.push({latitude: val.data[k].latitude, longitude: val.data[k].longitude});
            }
            console.log($scope.polylines[0].path);
        });

        var socket = io.connect('http://localhost:8080');
        socket.on('GpsPoint', function (data) {
            console.log(data);
            console.log('GPS new point: ' + data);
            $scope.polylines[0].path.push({latitude: data.latitude, longitude: data.longitude});
            //socket.emit('my other event', { my: 'data' });
            $scope.map.control.refresh({latitude: 30, longitude: 30});
        });

[nmccready]

@kim0z please make an example I can tinker with on plnkr, jsbin

[jesmith17]

I have a similar problem. In testing I added the following logic to inspect the $scope.map.control element.

uiGmapIsReady.promise().then(function (map_instances){
        console.dir($scope.map.control);
    });

what I found is that the method gets called twice. The first invocation doesn't include the .refresh method, but the second does.

However, my page is essentially showing the map and then giving the user a search form on the side. As a result of the search I load a list of objects from an API, and iterate through them adding markers to the map. Then I need to refresh the map to have the makers show and re-center the map on the lat/lng of the first marker.

The search process runs fine, but when I call

$scope.map.control.refresh() 

from inside the $resource, it seems to only get access to the first version of the object (the one without the refresh method) resulting in the error described by other above.

What is causing me to get 2 maps here, and causing $scope.map.control to change objects.