Display of location autocomplete/suggestions
Display of details of selected location
Web modules - server-side (backend) code
Accessing 3rd Party Services (using backend function)
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.