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
    }
}

[e-mail]