Mayur Patel
1 min readSep 28, 2022

q-google-map — Integrate google map in the Quasar 2, Vue 3 project using the Quasar extension — easy steps

Website — https://q-google-map.netlify.app/

Quasar Framework is a great UI framework that provides lots of ready-to-use components which are well tested on the web, iPad, mobile, and all devices.

q-google-map is a Quasar app extension written using Quasar 2 and Vue 3 to integrate Google Maps in any Quasar project. It works with Quasar 1.X as well as 2.X.

Demo and Documentation — https://q-google-map.netlify.app/
GitHub — https://github.com/mayur091193/q-google-map

To install the extension, use the below command:

quasar ext add q-google-map

To uninstall the extension, use the below command:

quasar ext remove q-google-map

In quasar.conf.js, add below:

...
build: {
...
env:{
options: JSON.stringify({
load: {
key: 'xxxxxxxxxxxxxxxxxxxxxx'
},
installComponents: true
})
},
...
},
...

Front-end code — HTML and script

<q-google-map :center="center"
:zoom="zoom"
style="width: 320px;height: 230px;">
</q-google-map>
data() {
return {
center: { lat: 20.7937, lng: 78.3629 },
zoom: 4
}
}

mayur091193@gmail.com