Device location / passing JS results to text box

Hi , I'm trying to use getlocation from device. I have used the following JS Code which runs which success. I want it to populate and textbox with the location but I'm struggling with how to do this (Newbie!) I thought or hoped that it was as simple as setting the text value as {{}} but I'm wrong ! Any suggestions ?

+++++++++++ JS Code (already using google maps API elsewhere ) ++++++++

var x=document.getElementById("log");
function getLocation()
if (navigator.geolocation)
else{x.innerHTML="Geolocation is not supported by this browser.";}
function showPosition(position)
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("longitude").value = longitude;
document.getElementById("latitude").value = latitude;


Hi @willfahy, happy to help!

Could you send some screenshots of your setup? Specifically, the left panel of your app expanded out to show the JS query data as much as possible? It'd also be helpful for me to see your google maps query in the left panel.

Just for reference in the meantime, here are our docs on the Google Maps API Integration:

Hey @willfahy, are you still blocked up here?

Hey Jay, I was finishing off frontend but still stuck ...!
Screenshot 2

Public view of my frontend

Hi there Will,

The way that you are referencing the value seems correct to me, but judging from your screenshot, it looks like the query was not run yet, or otherwise has not returned a value, as is showing null as its value. You may want to se the query to run on page load in the "advanced" tab of the query editor.

I also wanted to point out that we actually have a utility function for getting the current location, so you don't need to mess around with navigator functions nor a virtual canvas. the function is called utils.getCurrentPosition, and will return an object with coordinates, a timestamp, speed, altitude, accuracy and heading (when available).

Here is a simple example of using this util function to display current latitude and longitude in a text component:

1 Like

Hi Mark,
I have a use case where I want to track the user long/lat in my retool mobile app. I saw the solution you suggested but I cannot seem to replicate it in my app. When I setup the JS query it executes, but it is not returning any results and not showing an error either. When I link a button to the query using an event handler, the value box (similar to yours) for the text field shows "Cannot read properties of null (reading 'coords')".
Let me know if there is a step I am missing here. I am new to ReTool and JS is new to me as well (I am a data analyst by trade).

Hey @bmciver, it's working for me actually!

In your screenshot, it looks like you might just need to invoke the function, so

return utils.getCurrentPosition()

instead of

return utils.getCurrentPosition

1 Like

@victoria thank you so much. I feel so silly that I missed this. It works now. Quick question, does this actually use the google maps api or another method? because I just setup the google api as a resource but not sure if it's actually needed for this function?

@victoria , may I ask one more question. I am trying to capture the long/lat when a button is clicked and then update the database table. I was able to capture both values in two number fields in screen, however when I try running the update for lat, it shows the data value blank in my table. Is there anything that looks off here? I made the fields numeric with 7 decimals in the source table. The fields showing the values are "number fields".

Utils does not rely on the Google Maps API!

For your update query question, are you getting any error messages when you run your query?

Hi, I am running a query, but result is empty - it's the same on phone and computer. Any idea why it's empty?

Hey @seba3! What browser, OS and mobile OS are you using?

Computer: Mac 13.4.1 + Firefox
Phone: Android 13

UPDATE: Changing browser to Safari returns non-empty response:

However Retool app still does not display coordinates in Hello message. In app permissions I have set full access to precise location

Awesome, glad to see you're getting the coords! What is the Hello message you're trying to display these coordinates in?