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.
Hey
Really nice sample, the only thing with the getCurrentGeolocation() is that it will prompt the user to allow them to share their location data. When you use fetch with the IP Address this is not necessary.
Thanks for the comment. As usual, there are many ways to do things. I chose to demonstrate the wixWindow.getCurrentGeolocation() method since itās part of the Wix Code API and is a common feature in ānativeā HTML 5.
I have added the codes exactly as your example.Checked double checked the ids, .jsw file etc. But still I am not getting the desired output. And there are no errors either in the console nor in the wix code. I am seeing nothing. No output whatsoever. No dropdown, nothing. What am I doing wrong? API key was explicitly provided. CAN YOU HELP ME?
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.
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!
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: Enable and disable APIs - API Console Help
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!
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
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
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.
Thank you Yisrael for your quick response. Do you happen to know when Corvid will be releasing the Google Maps functionality noted on the COMING SOON page?
