Adding Geolocation and Google Maps to a Vue Application

[@aschmelyun]

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]

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

[@digicoder]

Great tutorial. Also thumbs up for keyboard ASMR 😃

[@dimokabdullaev6646]

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

[@radovankrizalkovic9084]

Really smooth and clear. Thanks man.

[@milou0104]

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

[@aschmelyun]

Sure thing!

[@larrevick]

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.

[@yarincepadilla6126]

what about the billing for google cloud platform ?

[@cyrillamirand3745]

Great tutorial, thank you Andrew !

[@oladapodaniel6372]

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]

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

[@jakubmonikowski4871]

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

[@payflipteam9983]

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

[@LongJourneys]

Great tutorial. Exactly what I needed!

[@tomdigimon02]

Thanks you sooo much! Apprecited!

[@lexelgaming]

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

[@aschmelyun]

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

[@envygamer]

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

[@josuebarros-desenvolvedorw2490]

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

[@swibay]

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

[@lars-sorensen]

Very useful and excellent video. Thanks!

[@Troy-ol5fk]

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

[@jdm9033]

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]

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

[@gurmukhsingh-uh5qo]

thank you for sharing

[@pharyyady]

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

[@matteogll84]

Nice tutorial, thanks!

[@miguelruizad]

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]

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

[@anokkibet3514]

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

[@alexandros-markovits]

Great video! Thank you

[@santiagograviano9064]

Great material, keep it up!

[@bradmccord8895]

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

[@hetulpatel3649]

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

[@jacaratu2586]

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

[@romulonavas5863]

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

[@ivanc.6064]

I was thinking the exact same thing. How anyone followed this video with that error is anyones guess.

[@ssahillppatell]

Thanks mate.

[@harshitthakore5149]

Thanks man. +1 subscribed

[@CodingMadeEasy]

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]

Thanks! It's FiraCode with ligatures!

[@CodingMadeEasy]

@@aschmelyun Awesome thanks! :D

[@bilich7651]

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?

[@seyedmohammadhosseini1310]

Perfect, Thanks

[@MarcelloPato]

Fantastic!

[@citrace]

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

[@aschmelyun]

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!

[@RezaSeedin]

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

[@aschmelyun]

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.

[@anisdlakic8697]

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

[@aschmelyun]

Try using and see if that works!

[@Raza_9798]

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

[@miauw8762]

installComponents: true

[@PrashantPanditDigiSarathi]

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

[@brajbaj]

I will check

[@MULTICODE]

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

[@imranlashari6578]

What about the Marker on the map?

[@ivanc.6064]

i think this is more correct? installComponents: true,

[@basharalmasri7919]

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

[@marovsalexey]

What is this ide?

[@shekhsaifuddin1353]

map api keys are not free anymore 😪

[@heyyy4987]

how add restaurants from my db in map?

[@aschmelyun]

I'm creating a tutorial for this now, and it should be live within the next week or two!

[@kid_rz]

is free? using google maps

[@todayisyourfuture]

don't work

[@carlossfuentess]

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.