Setting language outside of Vue.use

[gileneusz]

There is a simpla way to change the language

Vue.use(VueGoogleMaps, {
  load: {
    region: 'VI',
    language: 'vi',
  },
})

however - what if I want to change it while using the map with i18n? I simply cannot pass parameter to the vue.use like this:

Vue.use(VueGoogleMaps, {
  load: {
    region: 'VI',
    language: $i18n.locale,
  },
})

because it's throwing the error that i18n is undefined. How it can be done so the language could be changed on the fly?

[tuanzicc]

Hi, I have the same problem, did you solved it?

[gileneusz]

@tuanzicc probably not, I don't remember right now, I'm sorry. I'll try to look at this tomorrow. It was quite long ago, but I think that I couldn't configure this on the fly. Probably you need to talk to main dev of this plugin...

[valdoryu]

Once you registered Vue-i18n you may have access to it through Vue.$i18n.

You can then

Vue.use(VueGoogleMaps, {
  load: {
    region: 'VI',
    language: Vue.$i18n.locale,
  },
})

[auirarrazaval]

I know this is necroposting, but I was wondering if any of you actually made it work?

[omarpecos]

@auirarrazaval

Did you try with this? https://developers.google.com/maps/documentation/javascript/localization?hl=es-419 instead on vue plugin or whatever sending region and language on the Maps URL when you load it I Will try it in a moment, Hope this way is working!

[gileneusz]

@auirarrazaval @omarpecos well... 3 years and no solution

[omarpecos]

@auirarrazaval @gileneusz It works! you must put queryParams region=&language= on maps url when loading it like https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=EG&language=ar&callback=initMap more or less I dont have callback but it seems to be needed now https://developers.google.com/maps/documentation/javascript/url-params?hl=es-419#required_parameters

Follow the url I posted before and is working, problaby on a language change you must reload the maps url again, but is seems to work like that! Hope u can get it working too jaja

[Ruberoni]

This is how i solved it in Nuxt

// ~/plugins/VueGoogleMaps.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

export default ({ i18n }) => {
  Vue.use(VueGoogleMaps, {
    load: {
      key: '...',
      libraries: 'places',
      language:  i18n.locale,
    },
  })
}