Google Map Api. Динамичное изменение языка карты. Vue JS. Nuxt

Question

Использую плагин. На сайте присутствует выпадающий список из языков. При выборе языка необходимо менять язык карты. В самом компоненте GMap я передаю язык таким образом :language="$i18n.locale". При перезагрузке стр язык верный. Но при переключении это не подтягивается в head https://maps.googleapis.com/maps/api/js?key={key}&libraries=places&language=en. Клочь указываю в nuxt.config.js

modules: {
  'nuxt-gmaps', configGmap
}

configGmap содержит:

key: key, // Billing Account
libraries: ['places']

Подскажите пожалуйста как можно реализовать при переключении смену языка у карты?

Answer 1

таким образом сделала

watch: {
'$i18n.locale': {
  immediate: true,
  handler (newLocale) {
    this.updateMapLanguage(newLocale)
  }
}} 

methods: {
  updateMapLanguage (newLocale) {
    const scriptElement = document.getElementById('google-maps-script')
    const scriptSrc = scriptElement.getAttribute('src')
    const newScriptSrc = scriptSrc.replace(/language=[a-z]{2}/i, `language=${newLocale}`)
  
    // Удаляем старый скрипт
    scriptElement.remove()
  
    // Создаем новый скрипт с обновленным языком
    const newScriptElement = document.createElement('script')
    newScriptElement.setAttribute('id', 'google-maps-script')
    newScriptElement.setAttribute('src', newScriptSrc)
  
    // Добавляем новый скрипт в head
    document.head.appendChild(newScriptElement)
}}

БЛОГ НА HUSL

Google Map Api. Динамичное изменение языка карты. Vue JS. Nuxt

Ответы (1 шт):