Hey Team,
Im trying to work out if there is a way to do this via codless builder or not.
Basically the places autocomplete completes the address, then I want to get the longitude/latitude from the address so I can save in the database to later visualise on the map.
I cannot seem to find an option to do this.
Is the only way to do some custom code to the google API? Or is there something in the UI builder that I am missing?
Hello @Leon_Black
Autocomplete results have place ID property.
Now we don’t have a codeless block to get information by place ID.
I have created an internal ticket BKNDLSS-30921 to add this block.
Workaround:
const geocoder = new google.maps.Geocoder();
const geocoderResponse = await geocoder.geocode({ placeId })
return geocoderResponse.results.map(({ geometry }) => {
const lat = geometry.location.lat()
const lng = geometry.location.lng()
return { lat, lng }
})
Regards
Thats great! Thank you.
I must be doing something wrong, no matter what I do, I cannot seem to use the output of the data anywhere.
I have tried creating an object with it and get the following but does not show in the content logic of the field I have.
{
“placeData”: [
{
“lat”: 40.7572094,
“lng”: -73.979477
}
]
}
I tried setting a property with it
And using a text field with “placeData.lat” as the content logic in update-form data. But it does not show it.
It seems to return this
[{“lat”:1.4310665,“lng”:103.8000354}]
But cannot seem to use it?
I feel like im missing something obvious with this, but whatever I am trying I cannot seem to access the lat/lon other than it showing in browser console…
Instead of binding the text field to “placeData.lat”, add codeless logic to that handler and extract the data that you need to visualize.
Also tried that, but cannot seem to access the object that gets created by the custom code block.
Ill try a few more methods, maybe im just doing something wrong.
Put the value returned by custom code into the data model used by the text field data binding. It will definitely have access to it then.
Just getting back to this now. I must be doing something really wrong as I just cannot work this out!
Sorry to be a pain, maybe im missing something basic.
If i do something like this. I get the text of the object that gets returned.
i.e.: [{“lat”:43.6417442,“lng”:-79.3819559}]
Great but then the 2 items are useless as its text, but what gets returned is already a json object (right?). So i dont understand why I cannot use it straight up as an object. It just never works.
I cannot seem to use the result of the custom code any other way without it breaking the page or returning nothing at all unless it converts the response to text.
Is there something obvious I am clearly overlooking here?
Hi @Leon_Black
You can assign any value to a DataModel, in your case you skip converting to a string the list of points.
However, if you are going to display the value somewhere in a Text (content property) or an Input (value property) component you have to convert it to text because they expect text and otherwise the app might be crashed
The problem I am having is how to get codless to interpret the output of the custom code.
From what i understand it returns a javascript object.
There are 2 things in the object
lat
lng
I just want to be able to reference those 2 different keys in it, but I cannot work out how to get it into the data model is my issue.
The only way I have been able to is similar as above where I make it text but then its just got the string.
Ideally If it goes in to the data model as placeData (or similar) and has 2 properties, lat and lng then I can reference that and use it to update the DB.
But i cannot for the life of me work out the flow to get that to happen. I feel like there is something really obvious in the process that I am just missing but its driving me crazy haha.
Oh, now I see
Your custom code returns a list of objects, where at this moment only one object, is that correct?
[ { lat, lng } ]
and you would like to read these lat,lng properties, am I right?
if so, you’ve got two options:
const firstResult = geocoderResponse.results[0]
if(firstResult){
const lat = firstResult.geometry.location.lat()
const lng = firstResult.geometry.location.lng()
return { lat, lng }
}
return something when there is no items
No it only returns the single object of the lat and lng, which I then want to use to get the geopoint and record that and be able to display it on a map.
I just cant seem to use the properties in the object. It will print them in the console and you just get the single details for the address i.e.: [{“lat”:43.6417442,“lng”:-79.3819559}]
But i need to take that into the codless to create the geopoint and i cannot seem to get the data out of it no matter what I do.
Figure if it saved to the datamodel then I can use the 2 properties, but i just cant seem to get that working.
so is your issue “how to render these points on the map”?
My primary issue is saving an address into the database and also the relevant data which can then be used as a point on a map if/when needed.
alright, could you please share the logic for saving it to DB?
there isnt any yet because i cannot get the figures from the custom code block to use for it, or to create a geopoint. That is my issue here. accessing the values for the properties the custom code block returns.
It feels like it should be much simpler than what I am struggling with to just get those as useable values.
I should be able to put it in the data model as for example placeData then use placeData.lat and get just the value of lat and placeData.lng and get that, but i cannot seem to find a way to get that into the datamodel to then use.
seems like we’re going on a circle =)
It feels like it should be much simpler than what I am struggling with to just get those as useable values.
actually it is simple, you just generate some value in the CustomCode block and then return it to Codeless and you are capable to use the value, for instance you can print the value in the bowser’s console with using a Print block
I should be able to put it in the data model as for example placeData then use placeData.lat and get just the value of lat and placeData.lng and get that, but i cannot seem to find a way to get that into the datamodel to then use.
I’ve answered you about getting lat,lng directly from the result see a link below, it is not possible because this is a list of objects, let’s imagining your CustomCode returned 3 objects, what do you expect to get with the following code placeData.lat, lat of 1st, 2nd or 3rd?
Ok understood, However there will only ever be 1 lat,lng response.
So if its a list of objects then we should be able to get the first and put that in datamodel?
But this just crashes the page.
Yes i can print the values in the browser, but outside of that I have not found a way to use the values. That is where I am struggling. I just need to get the values into the datamodel so they can be used and no matter what method I try it does not work for me 
Hope this clears it up and you have a good solution for it 
Try printing out the value you get from the Custom Code block to debug the issue. For that, you can use the print block. When the logic runs, the “print” block will direct its output to the browser’s console available in the DevTools. This way, it will be clear what the logic returns.
That is what i mean above.
I can print and it shows lat and lng in the console. But I cannot convert that to be used with the data model no matter what I try.
And when it does not work I dont see any errors as to why it does not work.
The only way I can get it in data model is converting it to text. But then its useless as its the whole javascript object. I dont understand why I cannot just use it as an object? And I dont know what step I am missing?
It appears that the javascript object should be able to get used in the datamodel or make it an object, but that just crashes the page.
The only alternative way I am starting to think to do it is use some super complicated process of convert to text, split the text up based on { and , to separate the items and then use the split up text to get the relevant value. But that seems like a crazy complicated way of doing something which should just be “use this object and get the property from it”
Do you mind showing what output the print block produces when it prints a result from the custom code block?
