Adding Geolocation and Google Maps to a Vue Application

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.

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

Thanks Patreon supporters!
- Sam Ross

[yarincepadilla]

what about the billing for google cloud platform
?

[digicoder]

Great tutorial. Also thumbs up for keyboard ASMR 😃

[lexelgaming]

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

[romulonavas]

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

[oladapodaniel]

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?

[jdm]

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?

[milou]

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

[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 <google-map> instead of <GmapMap> as HTML tags.

[envygamer]

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

[hetulpatel]

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

[dimokabdullaev]

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

[anisdlakic]

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

[PrashantPanditDigiSarathi]

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

[josuebarros-desenvolvedorw]

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

[anokkibet]

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]

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

[payflipteam]

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

[citrace]

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

[swibay]

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

[bilich]

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?