DEV Community

Cover image for 😎 Implement Google Maps Autocomplete API | Vue.js

😎 Implement Google Maps Autocomplete API | Vue.js

Siddharth Arora on October 29, 2020

This tutorial explains how you can easily implement a Places Autocomplete Service by Google Maps API in vue.js NOTE: the picture is fancy because...
Collapse
 
felix2056 profile image
CodeBreaker •

Since GMAP script tag is added via vue meta and is also responsible for calling MapInit (which is setting the service data), if the component re-mounts or the user briefly navigates away, service will become NULL and the api will stop working.

Collapse
 
arora profile image
Siddharth Arora •

It's working fine in my case. You can login to the website gradbee.com and check.

Collapse
 
pixelsoul profile image
Oliver Kelso •

I believe this is true. This is why also it seems, adding more than one of these components to a page won't work, and the service never gets set, and stays null.

Collapse
 
francisjr1997 profile image
francisjr1997 •

Yes, I'm facing the same issue as well. Did you solve it?

Thread Thread
 
pixelsoul profile image
Oliver Kelso •

I did. I just had to change when initmap was called. I think I set a check for it in the watcher for location. When I get back home, I'll double check.

Thread Thread
 
pixelsoul profile image
Oliver Kelso • • Edited

So this maybe not the best solution, and there maybe a better a way, but it was done quickly, as I'm still working on this. Here is a gist of the component I have right now. There is a bunch of irrelevant stuff in it for this, but at least it gives you an idea of what I did.

gist.github.com/pixelsoul/8b854e39...

Collapse
 
zdev1official profile image
Info Comment hidden by post author - thread only accessible via permalink
ZDev1Official •

I like to use APIs, you can find more here: any-api.com

Collapse
 
drd05 profile image
Dr.DoS •

You saved my ars Thank you a lot ;-)

Collapse
 
hackwithharsha profile image
Harsha Vardhan •

Hi Siddharth,

is it possible to share Github Link ?

Collapse
 
arora profile image
Siddharth Arora • • Edited

Will create a gist / repo soon!

Collapse
 
jamols09 profile image
jamols09 •

Can you add another tutorial for vue 3 ?

Collapse
 
arora profile image
Siddharth Arora •

This is live on gradbee.com
When you register your account you'll need to enter the location, you can find it there.

Collapse
 
eacarras profile image
Aaron Carrasco •

This plugin works for vue3 ? I can not search doc how to initialize vue-meta on vue3.

Collapse
 
edinfonseca profile image
Edin Fonseca Rangel •

Hi, I'm wondering how with this example can I restrict results by country, and how can get addresses results instead of cities. Thanks in advance!

Collapse
 
pierreclouet profile image
PierreClouet •

Some comments have been hidden by the post's author - find out more