#Example #WebModules #ServerSide #backend #GoogleMaps #GeoLocation #3rdPartyServices #LocationDetails #Autocomplete #Geocoding #TimeZone #Repeater
Display of location autocomplete/suggestions
Display of details of selected location
Demonstrates
Web modules - server-side (backend) code
Calling Server-side Code from the Front-end with Web Modules
Accessing 3rd Party Services (using backend function)
fetch() in the wix-fetch API
getCurrentGeolocation() in the wix-window API to retrieve the user's IP-based location coordinates
wix-storage API for persistent storage of the selected location
Repeater (create list, expand / collapse)
Required for this example
In order to run this example, you will need to supply your own Google Maps API key.
Links for this example
About this example
This example was previously described in the insanely long forum post How to Use Google Maps Services in Wix Code. There are many instances when you want to find the exact coordinates of a location, or given the coordinates, discover the name of the location. This example demonstrates geolocation queries using the Google Maps Places API web services. The queries are performed in backend (server-side) Web modules. Web modules are useful when you have security concerns such as protecting your code from prying eyes and preventing access to your web services API keys.
You can retrieve your current location, based on your local IP address, by invoking the getCurrentGeolocation() function of the wix-window API. After retrieving the coordinates of your location, the reverse() Web Module function (in the backend) invokes the reverse geolocation lookup from the Google Maps service to get the name and details of your location. You can always retrieve your current location by clicking on the Current Location button located next to the input field.
You can retrieve details of other locations by entering in the location name in the text input field. As you type, the autocomplete() Web Module function (in the backend) will return predictions (or suggestions) that are supplied by the Google Maps Places service. The list of suggestions is displayed in a dropdown (created using a repeater) which is displayed directly under the input field. If one of the listed locations is the one you want, click on that name. Otherwise, continue to type in the location name. The longer the string, the more targeted the suggestions list becomes.
Once you’ve selected a location, or clicked on the Current Location button, the details() Web Module function (in the backend) is called asking Google Maps Places to supply details about your desired location. The code then saves your latest selection in persistent storage using the wix-storage API.
For anybody who's interested in this feature: the Address Input Editor Element has been released.
taxi fare calculator with google map
hello,. how can i create cab rental quote source and destination with google map
is there anyone to help me out!!!!
@Yisrael (Wix)
Hi mate. How can you change your code to get the STREET ADDRESS autocomplete. ive gone through the google places API documentation but have failed miserably and am stuck. Could you please help?
Hi @Yisrael (Wix) . I copied your example code exactly, made sure the item names all matched, and I still can't get this to work. In the console I get the following error on my live website:
Any assistance would be greatly appreciated!
Hello @Yisrael (Wix) I'm sorry I'm a (french) noob but I would like to implement the Place Autocomplete adress google in my Wix Form (in order to be sure of the right . Could you please explain me simply the different steps ? I have the API key but I don't understand were I can put it in my Wix editor... Sorry for that :)
If I want to update this to do a address autocomplete do I just need to change out the type from "cities" to "address"? Is there any other code that would need to be modified?
@Yisrael (Wix) Is there a known restriction with using the autocomplete widget on wix? If I understand it correctly, it just needs the input id and options. Its supposed to create the autocomplete functionality on the supplied input. I'm definitely getting requests through my API Key, but no list of predictions on the input I supplied.
Google has changed licensing terms and I believe that is the issue. I'm looking into this and hope to have this example working again soon.
This example is not working. @wix Are there any plans to fix this example?
Is this live example still active? I don't get any results when I view the live example, nor am I having any luck with the functionality. :(
@Raj,
The example demonstrates various Google Maps API functions which you can learn how to create your own interfaces. However, we are unable to provide support for the Google Maps API.
You might want to check out the WixArena - it's a hub where you can look for Wix Code (and other) experts for hire.
Best of luck,
Yisrael
Hi Yisrael
I read the Google Maps API Documentation but i still don't understand how to get autocomplete for street addresses instead of city names or places. Please help me on this, i'm trying to build a moving business website where the user gives a to and from address and it shows the route on map and the distance between those two points. I'm able to do this using HTML embed code but not in wix code.
Thanks
Hi Yisrael, thank you for the reply! I will try to work it out.
@leoniksagreatman,
Instead of an HtmlComponent, you should call the reverse() function directly from Wix Code as illustrated in my example. See the example code for details.
Hi Yisrael, thank you very much for the very useful instructions! I have another noob question, which is related to this topic: I intend to build up a message board, where visitors can leave their messages (name, message), which can be instantly displayed after submission. For this, I built up a database and linked it with a List(Repeater) item of Wix for display. The problem now is, I also want that the city of the user who leaves the message get automatically displayed after their message in the list. I used the google geocoding API, which functions well, however only within a HTML frame. I am not able to get this information of the city name submitted to the datacollecton, and displayed in the list, as it seems impossible to embed a HTML frame within a List item. Do you have any suggestions how this can be achieved? Many thanks!
SOLVED!
So I found that I had enabled another api that I use for embed google maps, I thought that the api for places, geocoding, geolocation, etc., would be enabled as part of it, but nope, so I had to do it manually. If someone is struggling with some issues that are not related to the code itself, try enabling these before. I'll copy the link where you can find directions on how to do it: https://support.google.com/googleapi/answer/6158841?hl=en&ref_topic=7013279
Hi Yisrael, following your suggestion on other post I've tried to use your code, but for some reason I'm not getting it to work. At first I followed the steps on your first post of 'how to use google maps services in wix code' but I had no results, there where no error messages and I checked that I was matching every info with my elements (id's, names etc.). So then I used the code on your second post, and again replaced the id's with mine, as well as the api key and created the onClick function for the repeater container (at this point I thought I should just to be sure), I left out the code for the 'Current Location' button because I don't have one and used the // to left out the spinner show/hide events, the rest I kept the same, but again it didn't work. So I tried my api key on your template (I didn't save or modify anything though) but it didn't work. I read what RP KUNN said, and tried but my key doesn't have any restrictions.
I don't really know where's the issue, but I think it is related to my api key, because I've been almost two days on this and I haven't found anything, in fact I created a function to save the place_id on my dataset, just to make sure that there wasn't a problem on the front-end (because aside of the input field I couldn't see any other element), but it retrieved the text that I placed there, not the id info that should be replacing it. Therefore, unless I'm missing something else on the page's code and elements, I think the problem is on the server side, especifically with my api key, so I was wondering if you could please try using your api key, that way I can be dead certain and found a solution with google maps services directly. Or if you have any thoughts on what could be going on I will be really thankful!
Yisrael
Eventually I found out what was wrong. I removed referrers from the API credentials and it worked. Why I dont know. maybe something to do with sub-sub domains. Now my problem is to get the street level address instead of country and locality. Also the placeid I am getting is wrong. It is basically fetching the country and city placeid as opposed to specific id (which exists). SO how can I reverse geocode based on lat and long only (or use placeid and the address component) in Wix? The google Map API reference shows how to do as HTML . Any help is appreciated.
Did you load the template from the link? Did that work OK for you?
What output are you getting? Are you getting any error messages in the console?