How To Use Google Maps In A Quasar Project

Published at

4/1/2022

Step 1: Install Vue 3 Google Maps

npm install -S @fawmi/vue-google-maps
# or
yarn add @fawmi/vue-google-maps

Step 2: Create a Boot File

Vue Google Maps needs to "hook in" to Quasar. We can do this with a boot file!

Diving in 🤿
src/boot/google-maps.js

import { boot } from 'quasar/wrappers';
import VueGoogleMaps from '@fawmi/vue-google-maps';

export default boot(({ app }) => {
  app.use(VueGoogleMaps, { // 🤿 Vue App. Please install Vue Google Maps
    load: {
      key: '', // 🤿 I don't have a google key, so leave it blank for now
    },
  });
});

Currently this file is doing... nothing. We have to tell Quasar about it, so add the following to
quasar.config.js for vite, or quasar.conf.js for webpack

module.exports = configure(function (/* ctx */) {
  return {
    //...
    boot: ['google-maps'], // 🤿 Quasar, please run this bootfile at startup!
    // ...
  }
}

Note that it's important to be polite to Quasar when writing comments.

Google Maps should now be installed!

Step 2: Create a map components

Let's dive into IndexPage.vue and add in our map component to check everything is working!

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <!-- 🤿 Vue, please render the Google Map Component here -->
      <GMapMap
        :center="center"
        :zoom="10"
      />
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
</script>

done!

Now let's take a squiz at a fuller example:

<template>
  <q-page>
    <div style="height: calc(100vh - 50px)">
      <GMapMap
        :center="center"
        :zoom="10"
        map-type-id="terrain"
      >
        <GMapCluster :zoomOnClick="true">
          <GMapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center = m.position"
          />
        </GMapCluster>
      </GMapMap>
    </div>
  </q-page>
</template>

<script setup>
const center = { lat: 51.093048, lng: 6.84212 };
const markers = [
  {
    position: {
      lat: 51.093048,
      lng: 6.84212,
    },
  },
  {
    position: {
      lat: 51.198429,
      lng: 6.69529,
    },
  },
  {
    position: {
      lat: 51.165218,
      lng: 7.067116,
    },
  },
  {
    position: {
      lat: 51.09256,
      lng: 6.84074,
    },
  },
];
</script>

And that my fine coding friends is how you add Google Maps to a Quasar project.

Two things before I go!

1. QuasarCast.Com

Want to learn Quasar with videos, presented by someone who LOVES to code! Someone who believes in you, and wants to see you build GORGEOUS sites with Quasar?

Wack this link and make yourself an account at QuasarCast.Com

2. Always Remember

Especially when times are tough and you feel like your code just won't work.

If you keep at it,

You can build anything...