Reverse Geolocation Lookup & Input into Form

Ask the community
,
1

So I’m trying to apply a “Get Current Location” option to a simple contact form:

  1. Upon clicking “Get Current Location,” I want to perform a “getCurrentGeolocation” function to capture the coordinates from the user’s mobile device.
  2. I want to then run those coordinates through Google Maps API and return the nearest physical address. I have an API key.
  3. Finally, I want that physical address to be plugged into the “Location” field in my form.

Though I have hand-written simple websites with HTML and CSS, I know very little about Javascript. Can anyone lay out the steps I need to take to make this happen? I have a general idea based on browsing this forum, but I can’t find this exact scenario with code examples. Thanks!

1186×1031 32.9 KB

2

See this example:

Using the Places API from Google Map Services

Demonstrates geolocation queries using the Google Maps Places API web services. The queries are performed in backend (server-side) web modules.

Also, see the forum post How to Use Google Maps Services in Wix Code .

3

Thanks, Yisrael. I looked over that material, but it doesn’t quite fit my scenario. I’ve simplified this down & eliminated the physical address query. All I want to do is plug the coordinates into the location field. Here’s what I got, but I’m not getting the expected result. How do I sequence this so the values returned for latitude and longitude are inputted into form field “#input1”?

import wixWindow from ‘wix-window’;

// …

export function button2_click(event) {

wixWindow.getCurrentGeolocation()
.then( (obj) => {
let timestamp = obj.timestamp; // 1495027186984
let lat = obj.coords.latitude; // 32.0971036
let lng = obj.coords.longitude; // 34.774391099999995
let altitude = obj.coords.altitude; // null
let accuracy = obj.coords.accuracy; // 29
let altAccuracy = obj.coords.altitudeAccuracy; // null
let heading = obj.coords.heading; // null
let speed = obj.coords.speed; // null
} )
. catch ( (error) => {
let errorMsg = error;
});
}
$w.onReady( function () {
let pageTitle = $w(“#input1”).value = “lat, long”;
} );

4

You’ll want something like this:

import wixWindow from 'wix-window';

$w.onReady(function () {

});

export function button2_click(event) {
 wixWindow.getCurrentGeolocation()
    .then((obj) => {
       let lat = obj.coords.latitude;
       let lng = obj.coords.longitude;
       $w("#input1").value = "lat: " + lat + ", lng: " + lng;
    })
    .catch((error) => {
       let errorMsg = error;
    });
}

Also, not sure why you’re saving to an input field, since the user isn’t inputting anything - the text is as a result of the geo lookup. You might want to save to a plain text field instead.

See the Corvid documentation for more information on programming in Corvid.

5

That’s exactly what I was looking for! Thanks so much for your help!! The reason I’m saving the geo lookup into an input field is because I want the user to retain the ability to manually input a physical street address if they don’t want to submit their coordinates. Here’s the final result with code:

2069×1323 277 KB

import wixWindow from ‘wix-window’;

$w.onReady( function () {

});

export function button2_click(event) {
wixWindow.getCurrentGeolocation()
.then((obj) => {
let lat = obj.coords.latitude;
let lng = obj.coords.longitude;
$w(“#input1”).value = “Google Maps” + lat + “,” + lng;
})
. catch ((error) => {
let errorMsg = error;
});
}

6

Hi, this is exactly what I am after, I have read through numerous articles and forum posts, want a simple contact form whereby someone can press a button to get their current location and populates the field within contact form. Any assistance greatly appreciated.

7

See the following examples: