Not able to switch language dynamically using AngularJS (NgMap)

Question

I am using ngmap (http://ngmap.github.io) version 1.18.4, angular version 1.4.9.

I want to switch language but it didn't take effect. I saw a couple of issues that are already discussed, like:

https://github.com/allenhwkim/angularjs-google-maps/issues/760

Above issue was closed by suggesting to remove a script tag. I don't have script tag which loads google-maps. I have the below code:

index.html:

<script src='bower_components/ngmap/build/scripts/ng-map.js'></script>

Controller code:

$scope.markers = [$scope.latitude, $scope.longitude];
$scope.mapParams = 'https://maps.google.com/maps/api/js?language=' + $scope.locale;    

$timeout(function() {
  NgMap.getMap({id: 'site-map'}).then(function(map) {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng($scope.latitude, $scope.longitude));
  });
}, 2000);

Html code:

<div map-lazy-load="https://maps.google.com/maps/api/js?key=abc&v=3.34" map-lazy-load-params="{{ mapParams }}">
    <ng-map id="site-map" center="{{[ latitude, longitude ]}}" zoom="question.zoom"
    >
      <marker position="{{ markers }}"></marker>
    </ng-map>
</div>

I tried different combinations in map-lazy-load-params but nothing worked. Few combinations were:

$scope.mapParams = '&language=' + $scope.locale;
$scope.mapParams = 'https://maps.googleapis.com/maps/api/js&language=' + $scope.locale;

Static language works perfectly fine like I did this to verify map language change or not.

<div map-lazy-load="https://maps.google.com/maps/api/js?key=abc&v=3.34&language=ja">

Can someone tell me the solution?

Answer 1

Once the google maps are loaded, the language cannot be changed. It seems that the ng-map library does not support automatic reloading of the API if it changes, so a custom solution would be to re-render the ng-map component.

You can use ng-if to destroy the current ng-map and recreate it.