Adding Google Maps to NuxtJs

componentWhereMapsRequired.vue

<template>
  <div>
    <input
      ref="searchCityTextField"
      class="input"
      autocomplete="off"
      @focus="autoCompleteLocation($event)"
    />

    Multiple Cities Selection:

    <input
      ref="searchLocationsPreferred"
      class="input"
      autocomplete="off"
      @focus="
        autoCompleteLocation($event, {
          arrayToReceivedTheValue: form.preferred_locations,
        })
      "
    />
    <button @click="submit"></button>
  </div>
</template>

<script>
import GoogleMapsLoadingMethods from '@/mixins/GoogleMapsLoadingMethods'

export default {
  mixins: [GoogleMapsLoadingMethods],
  data() {
    return {
      form: {
        city: null,
        preferred_locations: [],
      },
    }
  },
  async mounted() {
    // if (!process.server) {
    await this.injectGoogleMapsApiIfNotInjectedAlready()
    // }
  },
  methods: {
    submit() {
      this.form.city = this.$refs.searchCityTextField.value
    },
  },
}
</script>

<style scoped></style>

LoadingGoogleMapsMixin.vue

<script>
const apiKey = process.env.GOOGLE_MAPS_API_KEY

export default {
  props: {},
  computed: {},
  methods: {
    injectGoogleMapsApiIfNotInjectedAlready() {
      return new Promise((resolve, reject) => {
        try {
          if (
            typeof window !== 'undefined' &&
            !Object.prototype.hasOwnProperty.call(window, 'google')
          ) {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`
            document.head.appendChild(script)
          }
          resolve()
        } catch (e) {
          reject(
            new Error('Map could not be loaded due to network issues ' + e)
          )
        }
      })
    },
    autoCompleteLocation(event = null, config) {
      const defaultValues = {
        arrayToReceivedTheValue: null,
      }
      config = Object.assign(defaultValues, config)
      // const self = this
      // if (!event || !config.eventTargetValue) {
      //  console.log(
      //    'not sufficient data provided' + event + config.eventTargetValue
      //  )
      // }
      if (typeof window.google === 'undefined') {
        return
      }
      const options = {
        types: ['(cities)'],
        // componentRestrictions: {
        //    country: 'in'
        // }
      }
      const searchCityTextField = event.target // .getElementById('searchTextField');
      try {
        // eslint-disable-next-line no-undef,no-unused-vars
        const locationSearch = new google.maps.places.Autocomplete(
          searchCityTextField,
          options
        )
        if (config.arrayToReceivedTheValue) {
          // eslint-disable-next-line no-undef
          google.maps.event.addListener(
            locationSearch,
            'place_changed',
            function () {
              config.arrayToReceivedTheValue.push(searchCityTextField.value)
              searchCityTextField.value = ''
            }
          )
        }
      } catch (error) {
        // eslint-disable-next-line no-console
        console.error(error)
      }
    },
  },
}
</script>

<template>
  <div></div>
</template>

<style lang="scss" scoped></style>