Adding Geolocation and Google Maps to a Vue Application
Vložit
- čas přidán 29. 07. 2024
- In this video, I'll show you how to use two simple packages to introduce geolocation and embedded Google Maps to your new or existing Vue apps.
Follow-up video showing how to populate a Google Map with pins: • Populating Google Maps...
Join my weekly newsletter for tips on Laravel + more: aschmelyun.substack.com
You'll learn how to:
- Get the users latitude and longitude if they allow your app to use location
- Handle a rejection if your user does not approve location services
- Embed customizable Google Maps, accessing its zoom and center
- Obtain a Google Maps JavaScript API key for use with your map
Follow me on Twitter! / aschmelyun
Thanks Patreon supporters!
- Sam Ross
Directly support these videos @ / aschmelyun - Věda a technologie
If you'd like to see the finished source code for the demo in this video, check it out here: github.com/aschmelyun/geolocation-google-maps-vue
Awesome work. Can you give some suggestions or small example by using apple mapkit instead of google map?
Thank you man! Highly apprecited! That is what I need
Great tutorial, thank you Andrew !
Really smooth and clear. Thanks man.
Hello Andrew, amazing video, thank you!
Just one question, does this allow you to drop pins at specific locations on the map?
Great tutorial. Exactly what I needed!
Very useful and excellent video. Thanks!
Perfect! your explanations are always clear and straight forward.
Can you cover using firebase databases within a Laravel project
Sure thing!
what about the billing for google cloud platform
?
Great material, keep it up!
Nice tutorial, thanks!
Thanks you sooo much!
Apprecited!
in that map integration in Vue google map billing account is required or not ?
Great video! Thank you
Perfect, Thanks
thank you for sharing
Great tutorial. Also thumbs up for keyboard ASMR 😃
Bro you are awesome... Thank you so much!
thanks, this is a great help. But how about the location pin, were it points were you are exactly, that is most common in google maps?
you're gonna need to use the Marker method, the documentation has a very clear explanation of it
Thanks mate.
To use this in NuxtJS, do you think its too hard to implement?
I'm trying to decide whether to include the VueJS or the Laravel version on my Real Estate project I'm developing for a client right now
Thank you Andrew. Two questions, which editor are you using? and do you have autocomplete address using google api tutorial?
You're welcome, I'm glad you liked it! I'm using PHPStorm with the Material Theme UI and Atom One Dark color scheme.
I don't have a tutorial like that yet, but I'll add it to my list!
It doesn't seem to work with type script.. any advice or solution...
I am working on geolocation in vue pwa... it completely doesn't work.. help please!!! 😪
Hi I need an explanation or a video using that same package and the gmap-marker please
You got it! I'll add it to my list.
Thank you for your video tutor. It helps me a lot. Could you continue the video indicating how to place marks on the map, read from a mysql table?
I definitely will! I'll add it to my list, watch for future videos.
Very nice tutorial, Also whats the keyboard you are using its sounds mechanical but very silent?
Thanks! It's a Cooler Master Masterkeys S with Cherry MX Blue switches! I record the sound of it separately and tone it done, it's a little louder in person.
I am trying to use this along with Ionic, and I keep getting *"Uncaught TypeError: Cannot set property '$getLocation' of undefined"*, Any Pointers
thanks andrew.... #ask
how to calculate the distance between two locations
Thanks man.
+1 subscribed
What about the Marker on the map?
Great, subscribed ! ... one thing I had to do is :
replace :
localStorage.center = JSON.stringify(center);
with below :
localStorage.center = JSON.stringify(this.map.getCenter());
if this were to be made a mobile app with cordova would the geolocation still work? thanks!
I will check
someone help :C, install browser geolocation and throw me those errors on
->main.js when import shows 'Could not find a declaration file for module...' it exist and its well mounted
-> in vue component when use this.$getLocation({}) shows this.$getLocation is not a function on console
anyone who knows whats going on?
Fantastic!
If anyone like me is wondering why the Google Maps is not loading, I think it might have something to do with a somewhat recent change in Vue to force non-camel-case elements (e.g. GmapMap is auto lowercased to gmapmap).
To solve this go back to your main.js file and add following line after the import and use.
Vue.component('google-map', VueGoogleMaps.Map);
Now go back to your Map.vue and use instead of as HTML tags.
Thanks for the tutorial, but you didn't indicate that i have to create billing account before my api key can be activated which will eventually display my map. Just adding the key is not working for me until i create a billing account. i dont want to create the billing account is there any other method?
Unfortunately, I haven't been able to find a method without the billing, it could be done before but Google changed it so the billing is mandatory to access Google map APIs
Please make a tutorial on vue transition/transition-group component
What is this ide?
Hi, Unknown custom element: - did you register the component correctly
Try using and see if that works!
@@aschmelyun Unknown custom element: . i found a solution github.com/xkjyeah/vue-google-maps/issues/437#issuecomment-663937617
installComponents: true
how add restaurants from my db in map?
I'm creating a tutorial for this now, and it should be live within the next week or two!
I would like to thank you for this great work.
How can we click on the map to add a marker and get the marker lat lng, if user clicks again, we will change marker to the new location.
If we refresh we will centre the map and show marker to the centre of the map.
Moreover, how can we add textbox to search location and choose from drop down menu and reflect on the map
Please advice...
In me mitute 5:29 you declared vue2-google-maps in the main.js file, and you wrote installComponents: false. It should be TRUE, otherwise you will not see see the map (In my case).
I was thinking the exact same thing. How anyone followed this video with that error is anyones guess.
"Florida Man creates awesome app in under 17 mins!"
Hey Andrew. I came across your video while randomly browsing Reddit. I have a random question, what font are you using? I really like it haha
Thanks! It's FiraCode with ligatures!
@@aschmelyun Awesome thanks! :D
Yessss...that was nice as a Sunday morning and smooth as a puppy-fench-bulldogs' ass Andrew! :) more on vue/nuxt - gmaps please
Please can you make a Laravel API and Angular. Let's say an authentication system with laravel and Angular. Please
map api keys are not free anymore 😪
is free? using google maps
i think this is more correct? installComponents: true,
don't work
Where didnt you fu@# mention that a billing account needed to be created? I do not see the purpose of the video if a payment is required.