Get user's location and return on map

#1

Hi,

I’m creating a project for displaying a user’s location on a map and showing available restaurants near by

I am using, open external link with the following javascript to get the user’s location

function getLocation(callback) {
if (navigator.geolocation) {
    var lat_lng = navigator.geolocation.getCurrentPosition(function(position){
      var user_position = {};
      user_position.lat = position.coords.latitude; 
      user_position.lng = position.coords.longitude; 
      callback(user_position);
    });
} else {
    alert("Geolocation is not supported by this browser.");
}
 }
 getLocation(function(lat_lng){
  console.log(lat_lng);
});

Which works for getting the user’s lat long but I’m now stuck trying to work out how to get the lat long in order for me to add it to google maps parameter for returning their location

Any ideas/solutions would be greatly appreciated! :fist_right::fist_left:

#2

You should have access to an object with lat and lng properties in the callback you’re passing to getLocation. Currently you’re printing it to the console but use the lat_lng object in your callback to do what you need with it.

What do you want to do with it, specifically?

#3

Is there a way to intercept the callback and pass that into a global variable?

I’m going to use the lat long to mark the user’s location on the map

So adding the lat lng to;

https://www.google.co.uk/maps/@USERLATLNG

#4

Add this to the callback function:

$axure.setGlobalVariable('axureLatVariable', lat_lng.lat);
$axure.setGlobalVariable('axureLngVariable', lat_lng.lng);

Rename the Axure variables if you want. You can then use them to format the link like you posted. I don’t know how the URL is supposed to be formatted but it’s probably something like:

https://www.google.co.uk/maps/@[[axureLatVariable]],[[axureLngVariable]]

You’ll have to modify that to format it correctly probably. It’s also possible that the lat and lng might need to be formatted by the callback function before setting the Axure variable. Just a guess because I have no idea what the Maps URL is expecting or what the device location API returns.

#5

I would also like to demonstrate this in an axure prototype, is there any material to help me learn how to implement it?

unlisted #6
closed #7