Adding Geolocation and Google Maps to a Vue Application

Подписаться 35 тыс.

Просмотров 50 тыс.

50% 1

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

Наука

Опубликовано:

7 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@aschmelyun 4 года назад

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

@souravkaran6497 3 года назад

Awesome work. Can you give some suggestions or small example by using apple mapkit instead of google map?

@dimokabdullaev6646 4 года назад

Thank you man! Highly apprecited! That is what I need

@radovankrizalkovic9084 3 года назад

Really smooth and clear. Thanks man.

@cyrillamirand3745 4 года назад

Great tutorial, thank you Andrew !

@LongJourneys 3 года назад

Great tutorial. Exactly what I needed!

@tomdigimon02 3 года назад

Thanks you sooo much! Apprecited!

@lars-sorensen 4 года назад

Very useful and excellent video. Thanks!

@matteogll84 3 года назад

Nice tutorial, thanks!

@digicoder Год назад

Great tutorial. Also thumbs up for keyboard ASMR 😃

@santiagograviano9064 4 года назад

Great material, keep it up!

@alexandros-markovits 3 года назад

Great video! Thank you

@milou0104 4 года назад

Perfect! your explanations are always clear and straight forward. Can you cover using firebase databases within a Laravel project

@aschmelyun 4 года назад

Sure thing!

@swibay 2 года назад

Bro you are awesome... Thank you so much!

@harshitthakore5149 3 года назад

Thanks man. +1 subscribed

@gurmukhsingh-uh5qo 11 месяцев назад

thank you for sharing

@seyedmohammadhosseini1310 4 года назад

Perfect, Thanks

@bradmccord8895 3 года назад

Hello Andrew, amazing video, thank you! Just one question, does this allow you to drop pins at specific locations on the map?

@ssahillppatell 3 года назад

Thanks mate.

@yarincepadilla6126 4 года назад

what about the billing for google cloud platform ?

@MarcelloPato 3 года назад

Fantastic!

@miguelruizad 4 года назад

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?

@aschmelyun 4 года назад

I definitely will! I'll add it to my list, watch for future videos.

@josuebarros-desenvolvedorw2490 3 года назад

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

@jakubmonikowski4871 3 года назад

Great, subscribed ! ... one thing I had to do is : replace : localStorage.center = JSON.stringify(center); with below : localStorage.center = JSON.stringify(this.map.getCenter());

@lexelgaming 4 года назад

Hi I need an explanation or a video using that same package and the gmap-marker please

@aschmelyun 4 года назад

You got it! I'll add it to my list.

@hetulpatel3649 3 года назад

in that map integration in Vue google map billing account is required or not ?

@jdm9033 4 года назад

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?

@tuanchu8022 4 года назад

you're gonna need to use the Marker method, the documentation has a very clear explanation of it

@citrace 4 года назад

Thank you Andrew. Two questions, which editor are you using? and do you have autocomplete address using google api tutorial?

@aschmelyun 4 года назад

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!

@pharyyady 3 года назад

thanks andrew.... #ask how to calculate the distance between two locations

@envygamer 2 года назад

I am trying to use this along with Ionic, and I keep getting *"Uncaught TypeError: Cannot set property '$getLocation' of undefined"*, Any Pointers

@larrevick 3 года назад

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.

@jacaratu2586 3 года назад

Yessss...that was nice as a Sunday morning and smooth as a puppy-fench-bulldogs' ass Andrew! :) more on vue/nuxt - gmaps please

@CodingMadeEasy 4 года назад

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

@aschmelyun 4 года назад

Thanks! It's FiraCode with ligatures!

@CodingMadeEasy 4 года назад

@@aschmelyun Awesome thanks! :D

@Troy-ol5fk 2 года назад

Please make a tutorial on vue transition/transition-group component

@anokkibet3514 4 года назад

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!!! 😪

@RezaSeedin 4 года назад

Very nice tutorial, Also whats the keyboard you are using its sounds mechanical but very silent?

@aschmelyun 4 года назад

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.

@payflipteam9983 2 года назад

"Florida Man creates awesome app in under 17 mins!"

@oladapodaniel6372 3 года назад

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?

@rajatchauhann 2 года назад

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

@bilich7651 3 года назад

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?

@PrashantPanditDigiSarathi 4 года назад

if this were to be made a mobile app with cordova would the geolocation still work? thanks!

@brajbaj 4 года назад

I will check

@imranlashari6578 3 года назад

What about the Marker on the map?

@anisdlakic8697 4 года назад

Hi, Unknown custom element: - did you register the component correctly

@aschmelyun 4 года назад

Try using and see if that works!

@Raza_9798 4 года назад

@@aschmelyun Unknown custom element: . i found a solution github.com/xkjyeah/vue-google-maps/issues/437#issuecomment-663937617

@miauw8762 3 года назад

installComponents: true

@MULTICODE 4 года назад

Please can you make a Laravel API and Angular. Let's say an authentication system with laravel and Angular. Please

@basharalmasri7919 4 года назад

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

@romulonavas5863 2 года назад

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