Google Places API

Ask the community
,
1

Hi guys, the example here
https://www.wix.com/code/home/forum/wix-tips-and-updates/example-using-the-places-api-from-google-maps-services

i s really good. I have copied and pasted the entire example and even created an api key. I have added this api key in place of “”
const key = “GOOGLE_MAP_API_KEY”;

I am wondering a) if this is the right place to put it and
if the api is correct in the first place, it is the only api key that i have in google cloud platform

It would be great to know how others create and link their api keys to this example

Thanks
Adam

2

Ok so from the google console i thought that perhaps my site needs to be verified by google before the api will work

I have tried to add the verification tag to two places. One from dashboard SEO settings and the other from the page Advanced SEO area for meta tags

I have changed the verification code issued to me for security however this is where i’ve pasted it

I’m guessing if i set this up correctly i can do this with a free published site to actually test the functionality?

Thanks
Adam

3

@adcatch02
Now that the Address Input Editor Element has been released you have a more straightforward way to display address suggestions to visitors.

@yisrael-wix
We should consider updating the example (it’s still valid as is, but maybe worth adding a note that there’s a simpler alternative).

4

Hi Eyal and Yisrael, both examples are great actually. I get the impression that the Address Input Editor Element will be easier for me to use though.

Also many thanks for the easy instructions on how to restrict use of the API key. I believe i have implemented this now.

The intent for me is to allow a user to find an address and then have this address, pinned to a google map on a dynamic page

Eyal, you have posted a page that says this can be done, well thats how i’ve read it

- Display the entered address in a Google Maps element.

so could you please walk / talk me through the steps to achieve this

I have added the Address Input to the page and connected it to the API key already

many thanks
Adam

5

@adcatch02 With pleasure!

The following code uses AddressInput.value to set GoogleMap.location .

Note the check if (address.location) .
We do this because when address.location is present it means the visitor has entered text into the Address Input (rather than cleared the text), and selected one of the suggestions (rather than clicking outside the Address Input and leaving the entered text as is).

export function addressInput1_change(event) {
    let address = $w('#addressInput1').value;
    if (address && address.location) {
        viewAddressOnMap(address);
    }
}
function viewAddressOnMap(address) {
    if (address && address.location) {
        $w("#googleMaps1").location = {
            "latitude": address.location.latitude,
            "longitude": address.location.longitude,
            "description": address.formatted
        };
    }
}

Is this helpful?

6

@eyalc Thanks so much, now what do i really need to do? I’m a little lost. I have added the address input to the page and a button although haven’t connected it yet to anything (should this be connected to a collection?)

Should the address input work just by typing? I have added the API key in settings

I have added the code snippets you provided and changed the properties to reflect the export function for address input 1

Thanks
Adam

7

@eyalc now that i have added the Google API to settings in the address element even if I do nothing else, is this supposed to work?

Please help
Thanks
Adam

8

@eyalc Hi i got there in the end. So i was thinking can i add something like the following code to a dynamic page now that my collection has the address entered. Obviously this code doesn’t work at the moment but i’m sure its along the right lines.

the idea is simply to take address from collection which was populated by address input and display on a dynamic page map

$w.onReady( function () {
$w(“#dynamicDataset”).onReady( () => {
let currentItem = $w(“#dynamicDataset”).getCurrentItem();
if (address && address.location) {
$w(“#googleMaps1”).location = {
“latitude”: currentItem.latitude,
“longitude”: currentItem.longitude,
“description”: currentItem.title,
};
}
} );

thanks
Adam

9

Hey @adcatch02 , very sorry that I missed your original message.

It would help me a great deal to take a look at your website and its code. Are you OK with me doing this?
If so, please pass me the URL of the published site (if published) or the metasite ID.
You can find the metasite ID in a URL param when you open the site with the Editor. It looks something like this:
https://editor.wix.com/html/editor/web/renderer/edit/< ID>?metaSiteId= &editorSession…

Thanks

10

@eyalc Hi Eyal, sure please find my editor url here. I’m not sure if you realise that i have the places API working and now just trying to find code to show the saved addresses on a map on a dynamic page. I am guessing that if it can work directly between address input and map it should be able to pick up the right info from the field key

https://editor.wix.com/html/editor/web/renderer/edit/b9f34163-10d4-42dd-b95e-2deec974cdd0?metaSiteId=594d236f-b270-48eb-bf5b-6399d04830fd&editorSessionId=F337A673-4457-4C26-BCC3-4BB5461FB46A

Thanks
Adam