How To Use Google Maps In A Quasar Project
Tags: webdev, vue, javascript
Published: 2022-04-01 23:31:15

I freaking LOVE the Quasar community!

One of the Quasar core team members (Yusuf) got [quasar vite working with Stackblitz](https://stackblitz.com/edit/quasarframework-ghscmc?file=src%2Fpages%2FIndexPage.vue)! Amazing.

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

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

{% embed https://stackblitz.com/edit/quasarframework-5mbs1w?ctl=1&embed=1&file=src/pages/IndexPage.vue&hideExplorer=1 %}

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](https://vue-map.netlify.app/docs/#install)
```sh
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`
```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
```js
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!

```vue
<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:

```vue
<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](https://quasarcast.com/register) with videos, presented by someone who [LOVES to code](https://quasarcast.com/register)! Someone who believes in you, and wants to see you [build GORGEOUS sites with Quasar](https://quasarcast.com/register)?

Wack [this link](https://quasarcast.com/register) and make yourself an account at [QuasarCast.Com](https://quasarcast.com/register)


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