Angular-Google-Maps: How to use 'method' in the controller

Question

When I change my app from jQuery way to Angular way, I try to use Angular-Google-Maps.

But I can't find where is the Google Map Objects(Map, Marker, Polygon...) and the approach to use Object 'method' (such like getMap() , getPath(), getPosition()..).

If I need to get the position of the marker which is dragged, how can i do? just like I usually do ?

marker = new google.maps.Marker(opts);
postion = marker.getPosition();

Leonaleonanie

Answer 1

Edit: I found a way how to get the marker position when it was dragged'n'dropped. You can set the callback function for the marker:

<google-map center="center" zoom="zoom" control="googleMap">
   <marker coords="coords" options="options" events="events">
</google-map>

Then in the controller you define the callback:

$scope.events: {
               dragend: function (marker) {
                  $rootScope.$apply(function () {
                     console.log(marker.position.lat());
                     console.log(marker.position.lng());
                  });
               }
            }

Old Answer: It is currently not possible: https://github.com/nlaplante/angular-google-maps/issues/277

However, you can get the original google.maps.Map object:

Directive call:

<google-map center="center" zoom="zoom" control="googleMap"></google-map>

Angular controller:

...
$scope.center = = {
            latitude: 48.13171,
            longitude: 11.549554
         };
$scope.zoom = 8;
$scope.googleMap = {}; // this is filled when google map is initiated

function getMapObject() {
   $scope.googleMap.control.getGMap();
}
...

Hibbard

Answer 2

Actually you don't even need events, the library already binds your marker position with the scope.

Here is how I did it in Coffee Script:

Controller:

$scope.map =
  center:
    latitude: k
    longitude: D
  zoom: 16
  marker:
    coord:
      k
      D

View:

    <ui-gmap-google-map center='map.center' zoom='map.zoom'>
      <ui-gmap-marker
              idKey="'pin'"
              coords="map.marker.coord"
              options="{'draggable':true}"
              >
      </ui-gmap-marker>
    </ui-gmap-google-map>

    <pre>{{map | json}}</pre>

Cymbre