Setting an Address type field using wixData.insert or wixData.update

Ask the community
,
1

What is the correct way to set the value of an Address type field from code?

I have latitude, longitude and description which so far I have been using onReady to set the location for a GoogleMaps panel by doing this:
$w(‘#googleMaps1’).location = { latitude: item.lat, longitude: item.lon, description: item.desc }
But if I try to direct connect the component Location to an Address field it doesn’t work.

Setting the Address field from code as either a JSON string or an object does not render correctly, and the field shows as ‘not being an Address type’ and needs converting.

If I don’t link the Location data on the component, I get this console error every time the page is opened:
The location parameter at index 0 that is passed to the markers function cannot be set to undefined. You need to set either location object {longitude, latitude}, or a valid address - placeId

I’m unable to find a combination that sets the field correctly, renders correctly in the GoogleMaps component, shows as a valid field in the collection, and doesn’t produce console warnings.

2

I guess you are trying to connect the Google Maps element to the Address in your dataset?

You just need to get the property that has the location object.

        const currentItem = $w('#dataset1').getCurrentItem() //Get the current Item
        //Destructuring of location object
        const { address: { location } } = currentItem 
        $w('#googleMaps1').location = location //Assign it to Google Maps

If you can paste your code a can help you better.

3

I have dynamic pages links to my dataset that contains the Address field - each page is displaying a GoogleMaps element based on the field.

The problem is populating the dataset which is done from code where I have the raw latitude and longitude (no Address object or whatever).

I am then just trying to call something like this:

wixData . insert ( “MyDataSet” , {
id : thing . id ,
addressField : “{latitude:” + thing . lat + “,longitude:” + thing . lon + “,description:"” + thing . desc + “"}”
})

The problem is how to construct the value of addressField so that I don’t have to rely on setting the $w ( ‘#googleMaps1’ ). location myself and instead just link the data field to the element via the editor UI.

4

See comment below

5

This code you paste is not right.

Do you have a the addressField set to object ? Otherwise you are saving a string and the Google Maps element uses an object. Set the addressField to object like this:

{
    latitude: -22.992387,
    longitude: -13.0112123,
    description: "Thing",
}

and then insert the new item like this:

wixData.insert('MyDataSet', {
    id: thing.id,
    addressField: {
        latitude: thing.lat,
        longitude: thing.lon,
        description: thing.desc,
    },
})
6

I have the addressField configured as an Address type field (not Object field to clarify), and I have tried setting it as an object as you suggest:

789×423 34.6 KB

It is not recognised as an Address type value as this shows, and also the GoogleMaps element reverts to a default location rather than using the object

7

It seems that the Address object has to have more than just the location lat/lon.
Setting it to this seems to work:

{
city : “” ,
location : {
latitude : lat ,
longitude : lon
},
streetAddress : {
name : “” ,
number : “”
},
formatted : “” ,
country : “” ,
postalCode : “” ,
subdivision : “”
}

8

Although now the addressField is now correctly linked to the GoogleMaps element, the pin style is lost (which was a just a fixed style but not the original default which it has now reverted to and refuses to change)

9

Yes, the Address Field in WIX uses this object format that you described, so to save a new location you would have to use this whole object above. To feed the location information to the Google Maps element, you only need to destructure it and get the location property like this:

const address = { //This is the address object that you get/save (exemple)
    title: '',
    rooms: '',
    location: '',
    address: {
        city: 'São Luís',
        location: {
            latitude: -2.5306721,
            longitude: -44.2988947,
        },
        streetAddress: {
            number: '',
            name: '',
            apt: '',
        },
        formatted: 'São Luís - Vila Maranhão, São Luís - State of Maranhão, Brazil',
        country: 'BR',
        subdivision: 'MA',
    },
}

const { location } = address //This is the destructuring to get the location property

$w('#googleMaps').location = location //This is to feed the Google Maps element.