Change angular-google-maps language dynamically

Question

Is it possible to change map language dynamically when language is changed ? Or at least have the language map changed the next time I access it (after language is changed).

I can set default language on map loading using this code (in mymap.module.ts) :

@NgModule({ imports: [ 
  AgmCoreModule.forRoot({ apiKey: 'MY_KEY',
  language: 'es', }),
  ]
})

And I can get the current language using this.translate.currentLang (in mymap.component.ts).

But I don't know how I can combine both.

Answer 1

In order to change map's language, a bunch of localized JS scripts need to be refetched anew. So, you can just try to refresh entire page (JS not Angular) providing wanted language via local storage for example:

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot({ 
      apiKey: 'MY_KEY',
      language: localStorage && localStorage.gml || 'en'
    }),
  ]
})

to reload your page, use window.location.reload() method

StackBLITZ: https://stackblitz.com/edit/angular-google-maps-demo-f3xzhn?file=app%2Fapp.module.ts

Answer 2

In app.component add the following make sure upon language change to update "lang" in local storage and reload the page using window.location.reload()

export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit() {

    var script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?v=quarterly&key=${KEY}&libraries=places&language=${localStorage && localStorage.lang || 'en'}`;
    document.head.appendChild(script);
  }
}

In your relevant module add:

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot(),
  ]
})