How To Use Google Maps In A Quasar Project
source link: https://dev.to/quasar/how-to-use-google-maps-in-a-quasar-project-1c13
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 toquasar.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...
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK