Google Maps and Geolocation app using Vue 3 Composition API

Today we will be building a google maps and geolocation application using Vue 3 with the composition API. We'll create an application that tells the distance between the current position of the user and the location they clicked on the map. By the end of this video, you'll have an understanding of how to use google maps with the Vue 3 and how to interact with it using the composition API. We'll learn about how to get the geolocation of the user as well as rendering an interactive google map.
✨ SOCIAL ✨
Discord - / discord
Twitter - / jsbroks
⚡ RESOURCES ⚡
Source Code - github.com/codingwithjustin/v...
Getting started with Google Maps (steps) - developers.google.com/maps/gm...
⭐ TIMESTAMPS ⭐
0:00 - Intro
0:50 - Project setup
1:57 - Users Geolocation
3:23 - Google Maps JavaScript API
5:35 - On map click events
7:45 - Conclusion

[@imakeinternetdev]

This is the most informative tutorial I have found for integrating Google Maps Javascript API. I really appreciate going the native API route vs. using a third-party library that will likely go unmaintained.

[@maskman4821]

I love this tutorial, it makes life very easy and make people not intimidated the configuration !!!

[@tr5946]

Very clean. Very impressive.

[@JORGEMARTINEZ-ho4wp]

Loving the Vue 3 content! :)

[@xxManscapexx]

This helped me out a lot, thanks Justin.

[@AARP41298]

Thank you, i was getting crazy about how to use this api in the new vue, and the code for geolocation, was amazing, i hope vue3 google map grow up enought to use info windows, and have a cleanest code in my project

[@rangabharath4253]

Awesome 👍

[@lucasmota8345]

Muito bom, ajudou de mais. very good!

[@PhoudthaxaySisomboun]

Very good Thank you

[@traphouse3436]

huge tnx :)

[@bogosortfan6275]

is it possible to access the coordinates by adding the event listener directly into the div? Like @click="function"

[@voiceoverhowdidyoudoit4692]

Can you please do a current tutorial for using the Javascript Maps points API? The only ones I can find are in Laravelle or don't work

[@adiprimanto8871]

is vue3-google-map useable for nuxt 3?

[@hackwithharsha5228]

Thanks Justin.. One Question
00:02:16 why ref instead of reactive ? , Initially, I thought ref is for primitive data-types and reactive is for object kind of data-structures..
But, I was wrong, ref calls reactive inside.. so we can use object like data-structures inside ref too.
Then, why we need reactive ? I understand, still in bits and pieces.. Please clarify..

[@CodingWithJustin]

Good question!
At 2:40 you can see we are doing an assignment to the ref. If this was using reactive() that assignment would break reactivity. Playing around with this code sandbox might clear it up codesandbox.io/s/elastic-platform-7v0fd?file=/src/App.vue
When using reactive you can assign values to a key of the object, not the objects itself. This is because Vue needs to keep the same object pointer to track changes.
You could build an application without reactive. But why? accessing values on a reactive object is cleaner than typing .value everywhere. My thought process is to use reactive when possible. Readability is very important in large scale software projects

[@hackwithharsha5228]

@@CodingWithJustin Thanks for clarification in very simple words..

[@RianY2K]

thank you, hope you can make video about Vue and Nuxt too

[@CodingWithJustin]

I will, just waiting on Nuxtjs 3!

[@peteroliver7405]

I had problems with the time it was taking the api to return my location in App.vue setup onMount. It was centering the map at 0/0. Below is my solution:
Created a Sleep function:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
Awaited lat/lng to be non-zero:
onMounted(async () => {
await loader.load()
console.log("centering map on coords")
while (currPos.value.lat == 0 && currPos.value.lng == 0 ) {
console.log("Awaiting Coords")
await sleep(500)
}
console.log("Centering Lat: " + currPos.value.lat)
console.log("Centering Lng: " + currPos.value.lng)
map.value = new google.maps.Map(mapDiv.value, {
center: currPos.value,
zoom: 20
})
clickListener = map.value.addListener(
'click',
({latLng: {lat, lng}}) =>
(otherPos.value = {lat: lat(), lng: lng()})
)
})

[@jimmysaul6660]

I faced the same problem but solved it by using a watcher to call setCenter on the map when currPos is updated:
import { watch } from 'vue'
watch(currPos, (currPos) => {
if (map.value) {
map.value.setCenter(currPos);
}
});

[@AmeliorScout]

I'm having issues with the map not appearing on screen. I was able to get the Your Position div to load before, but now neither that nor the Map div is loading. The only errors I'm really seeing are that onMounted, google, and mapDiv isn't defined if I remove the eslint-disable comment. just to see what other errors thee could be.
I'm not using TypeScript and that might be the problem. If so, any way to do this without TypeScript?

[@jamesdykes4141]

I had the same issue. Easy fix is to add lang="ts" to your script tag in teh App.vue file

[@JesGeeMusic]

.load is deprecated and has me completely stuck at 5:20

[@rojasguarachinestorignacio884]

no sirve en Vue3 F

[@zergzerg4844]

Using mounted and unmounted hooks outside the script setup is bad approach. If you are using nuxt 3 you'll see the warning that you have to use this hook only for script setup