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.
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
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..
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
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()}) ) })
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); } });
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
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?
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.
This helped me out a lot, thanks Justin.
Very clean. Very impressive.
Loving the Vue 3 content! :)
I love this tutorial, it makes life very easy and make people not intimidated the configuration !!!
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
Awesome 👍
Muito bom, ajudou de mais. very good!
Very good Thank you
huge tnx :)
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..
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
@@CodingWithJustin Thanks for clarification in very simple words..
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
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()})
)
})
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);
}
});
thank you, hope you can make video about Vue and Nuxt too
I will, just waiting on Nuxtjs 3!
is it possible to access the coordinates by adding the event listener directly into the div? Like @click="function"
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
.load is deprecated and has me completely stuck at 5:20
is vue3-google-map useable for nuxt 3?
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?
I had the same issue. Easy fix is to add lang="ts" to your script tag in teh App.vue file
no sirve en Vue3 F