Skip to content

Instantly share code, notes, and snippets.

@lakhbawa
Last active May 10, 2022 19:15
Show Gist options
  • Save lakhbawa/73409735265a5c48d48bc55c70e54993 to your computer and use it in GitHub Desktop.
Save lakhbawa/73409735265a5c48d48bc55c70e54993 to your computer and use it in GitHub Desktop.
Adding Google Maps to NuxtJs
<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>
<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>
@lakhbawa
Copy link
Author

lakhbawa commented Apr 3, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment