Example: Using the Places API from Google Maps services

#Example #WebModules #ServerSide #backend #GoogleMaps #GeoLocation #3rdPartyServices #LocationDetails #Autocomplete #Geocoding #TimeZone #Repeater

Display of location autocomplete/suggestions


Display of details of selected location


Demonstrates

Required for this example

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.

5 Likes

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.

Hey Andreas,

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.

Yisrael

How do i get street addresses autocomplete instead of cities ?

1 Like

@Raj - refer to the Google Maps API web services documentation for details on all the options available.

Hi There

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?

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?

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!

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: Enable and disable APIs - API Console Help

1 Like

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!

@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 for the reply! I will try to work it out.

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

@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

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. :frowning:

1 Like

This example is not working. @wix Are there any plans to fix this example?

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.

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?

@_eric Sorry, but I really don’t know when it’s due out.