AngularJS and google-maps

Question

I'm using Google Maps for AngularJS to add a map to my project in AngularJS. Everything works great, except the case when at certain point I want the map center to be the exactly the same position as the clicked marker. So, on a click event I set the center of the map in AngularJS controller. Everything is OK, but when I drag or zoom the map, the marker position becomes the "new" center of the map. Does anybody know why is this happening? It's like the marker coords are binded in bi-directional way... Any help is appreciated! Thanks in advance

Here's the code:

// angular js controller
// map init [displays markers for all railway terminals in DB]
$scope.map = {
        center: {
            latitude: 48.22476,
            longitude: 16.41356
        },
        zoom: 4
    };
    $scope.markers = []; // later filled with data from DB

// some code in between ...

// selection in table with termnals
$scope.selectTerminal = function (terminal) {
    $scope.selected.terminal = terminal;
    if (terminal.placeId != $scope.currentSelectedId) {
        $scope.currentSelectedId = $scope.selected.terminal.placeId;
        $scope.getTerminalDetails($scope.selected.terminal.placeId);
        $scope.map.center = terminal.address.coords; // THIS LINE GIVES ME TROUBLE
        $scope.map.zoom = 12;
    }
};

So, the map center is set according to the coordinates of the selected terminal on select action (it is the new center of the map), and the zoom level increases. The thing is when i try to reset the map, or try to zoom or drag the map, the marker coordinates get the new map center coords, but it shouldn't. That's why I say 'two-way binding', I just can't figure this thing out.

Answer 1

Using your example you can do this.

$scope.map = {
        center: {
            latitude: 48.22476,
            longitude: 16.41356
        },
        zoom: 4,
        markersEvents: {
          click: function(marker, eventName, terminal) {
            $scope.map.center.latitude = terminal.coords.latitude;
            $scope.map.center.longitude = terminal.coords.longitude;
          }
       }
    };

remember in the html marker introduce events="map.markersEvents"