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...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
Yes, I'm facing the same issue as well. Did you solve it?
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.
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...
It's working fine in my case. You can login to the website gradbee.com and check.
I like to use APIs, you can find more here: any-api.com
You saved my ars Thank you a lot ;-)
Hi Siddharth,
is it possible to share Github Link ?
Will create a gist / repo soon!
Can you add another tutorial for vue 3 ?
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!
Hi, you can do this :
developers.google.com/maps/documen...
developers.google.com/maps/documen...
This is live on gradbee.com
When you register your account you'll need to enter the location, you can find it there.
This plugin works for vue3 ? I can not search doc how to initialize vue-meta on vue3.