Changing the center of a google map using AngluarJS

Question

I am using ng-map it's an AngularJS Google Maps Directive created by allenhwkim to show a map on a html page and avoid coding a long javascript code.

I want to change the center of the map when the user clicks on a hyperlink.

Firstly , the map center is inialized with a value in the controller and Everything works perfectly :

Html :

<ng-map zoom="12"  center="{{MyPosition}}" >  </ng-map> 

AngluarJS controller:

$scope.MyPosition = [36.811, 10.087];

I tried to pass the longitude and latitude of the clicked item to a function in the controller that changes the value of 'MyPostion'

Html: ( device.EventData[0].GPSPoint contains a value like this : longitude,latitude )

<a data-toggle="modal" ng-click="changeMapPostion(device.EventData[0].GPSPoint)"> </a> 

Function in the AngularJS controller :

$scope.changeMapPostion = function(NewPostion) {
    $scope.MyPosition = '[' + NewPostion + ']'
}

the value of MyPostion is changed perfectly but the map center didn't change

How to solve this issue ? is it possible to change the center of the map with a javascript code

Answer 1

Reading the Get Started of the lib you use, I see there is a way to get the (Google)map object. You can therefore simply use the setCenter method:

NgMap.getMap().then(function(map) {
    map.setCenter(/* coords */);
});