DEV Community

Cover image for How To Use Google Maps In A Quasar Project
Luke for Quasar

Posted on

How To Use Google Maps In A Quasar Project

I freaking LOVE the Quasar community!

One of the Quasar core team members (Yusuf) got quasar vite working with Stackblitz! Amazing.

Now you can start a Quasar project, in your browser, in seconds!

And here's Google Maps in a Quasar Project on stackblitz:

Anywho...

A friend of mine on twitter asked how we can setup Google Maps with Quasar. So here it is!

Step 1: Install Vue 3 Google Maps

npm install -S @fawmi/vue-google-maps
# or
yarn add @fawmi/vue-google-maps
Enter fullscreen mode Exit fullscreen mode

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
    },
  });
});
Enter fullscreen mode Exit fullscreen mode

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!
    // ...
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (5)

Collapse
 
samheard profile image
Sam Heard

I have reverted to fawmi 0.9.67 and resolved all errors. My problem is that Quasar does not recognise GMapMap - these do not seemed to have been installed. I would be grateful for any ideas, using node 18, latest quasar with vite. I had to do all these things to get no errors. I have never seen a map yet! Set up exactly like in this scenario.

Collapse
 
justin_smith_ffa28d3477e7 profile image
Justin Smith

Just tried to add this to my project and I'm getting the following error with the boot file: Syntax error: Importing binding name 'default' cannot be resolved by star export entries. has anyone else run into this?

Collapse
 
juanxodj profile image
Juan Sánchez

I am having the same error.

Collapse
 
jdriesen profile image
Johnny Driesen

Thanks Luke.

Collapse
 
yohanes_seandy profile image
Yohanes Seandy S

Thanks bro, it works!!!