Can't center AngularJS Google Map / Use of AngularJS Google Maps API-open source projects allenhwkim/angularjs-google-maps

I stumbled open Google Maps for AngularJS and thought it could be a good approach for working with google maps on a mobile cross-device app (I’m using the Ionic Framework). I’d like to load locations from a server, filter them, use custom markers and info bubbles, create routes with navigation steps, etc.

I wonder why do I need this:

since I’m already able to do the stuff I intend to using only the Google Maps API (without Ionic or Angular, though).

Actually, using the Google Maps for AngularJS method, I’m running through some issues, for example, this doesn’t work:

$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

It returns Uncaught TypeError: undefined is not a function

This does not work either:

$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});

It returns: Uncaught TypeError: Cannot read property 'refresh' of undefined

Here’s the code from the controller:

.controller('MapCtrl', function($scope) {

  $scope.map = {
    center: {
        latitude: 45,
        longitude: -73
    },
    zoom: 8
    };

  $scope.centerMap = function () {
    if (!$scope.map) {
      return;
    }

    navigator.geolocation.getCurrentPosition(function (pos) {
      //console.log('Got pos', pos.coords.latitude, ", ", pos.coords.longitude); // ok
      //$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));     // does not work
      //$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});   // does not work

    }, function (error) {
      alert('Unable to get location: ' + error.message);
    });
  };
})

And inside the view:

I know the obvious, philosophical answer is: “if you don’t need it don’t use it” but I feel I’m missing some basic stuff here and I want to have a deeper understanding on the subject.

Any help will be greatly appreciated.

ps:

i’m very new to Angular (and many concepts it relies on), so that’s probably the main reason behind my confusion. if there’s anything wrong with this post (too vague, or i’m too lazy) i’d be happy to be notified.

ps 2:

I got it to work using:

$scope.map.center.latitude = 45; $scope.map.center.longitude = -74;

I don’t understand why the following example, as in AngularGoogleMaps API docs, doesn’t work for me:

$scope.map.control.refresh({latitude: 32.779680, longitude: -79.935493});

Actually $scope.map.control returns undefined in my code.

ps 3:

I actually have 2 questions in one here: one about centering the map and another vague one about the use of the AngularJS Google Maps API, for which I had great answers – so, sorry for the mess, I’m deleting this thread.