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>

Hi thanks for sharing. I'm new to Nuxt and not sure where to put the LoadingGoogleMapsMixin.vue file. Do you know which folder it should go in?

All the online material shows mixins as .js files and without the xml markup :-/

Cheers

Dave

hi, @ekwus it's my pleasure. Pls check import, you will notice I had put that mixin in a newly created folder called mixins in the root, however, you can put that anywhere like in the components folder, etc, and adjust the path accordingly