Can't center AngularJS Google Map / Use of AngularJS Google Maps API

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:

<script src='/path/to/lodash.underscore[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>

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:

<google-map
    center="map.center"
    zoom="map.zoom"
    draggable="true"
    style="display:block; width: 100%; height:100%;">
</google-map>

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.

Well, the "code" for Google maps for AngularJS resides in the second script tag. This script depends on some functionality from the first script (lodash), which is why the latter is loaded first.

The AngularJS code wraps the Google maps API. So, yes, you can use the Google API by itself, but you won't have some of the easier declarative tags that the Angular API gives. For instance,

<google-map center="{latitude:80.001, longitude:125.43}">   
</google-map>

Will actually generate a map and display it. The HTML tags for this (angular directives) are defined in the second script file.

If you didn't use this, you could still write the javascript code required to generate a map according to the Google API:

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Just two different styles of coding. With the Angular approach, you can largely define functionality in the HTML itself depending on your use case.

Regarding the errors that you're seeing, it seems like your app can't find the script files above. You are replacing the paths indicated above with your actual paths, correct?

I'm using this module for a long time and I wrapped it in my own directive. The reason why you might want to use this module is because loading the google maps is of course asynchronous and you ends to handle all the promises before you'll be able to use the Google maps API, so this module wraps this and a lot of other usages in maps. It also expose directives you might want to use.