Geo Coordinates From Phone

[Hearnie]

Does anybody have some code that can stamp the geolocation of a mobile device into a data form when that form is viewed.

 

I am looking at a way that when a record is updated it automatically grabs the geo coordinates from the device that viewed it and stamps them into the record from.

 

Any ideas greatly appreciated

 

Hearnie

[Vitalikssssss]

Hi @ahmedramadan,

Perhaps you may try the following code snippet:

<script type="text/javascript">
  
document.addEventListener('DataPageReady', initGeolocation);
                          
                          
     function initGeolocation()
     {
        if(navigator.geolocation)
        {
           // Call getCurrentPosition with success
           navigator.geolocation.getCurrentPosition(success);
        }
        else
        {
           alert("Sorry, your browser does not support geolocation services.");
        }
     }

     function success(position)
     {
		//Change to EditRecord for an update form

		//Current_Long and Current_Lat should change to reference correct field names
         document.getElementById("InsertRecordLong").value = position.coords.longitude;
         document.getElementById("InsertRecordLat").value = position.coords.latitude;
       	 document.removeEventListener('DataPageReady', initGeolocation);
     }
 </script>   

Regards,

vitalikssssss

[Walter]

Hello Hearnie,

 

I believe, this article can help.

[ChrisCarlson]

This article shows how to pull geo-location using an established address, however I think Hearnie was requesting how to get geo coordinates of actual mobile device?

[Hearnie]

Many thanks

I am indeed looking for a way to stamp coordinates from a device when a data page is viewed

I hope there may be some Java out there that can grab the phone GPS lat and long and then stamp it into a data table

Steve

[GoCubbies]

You could try something along the lines of the following, your browser may prompt you to allow current location.  

 

<script type="text/javascript">
     function initGeolocation()
     {
        if(navigator.geolocation)
        {
           // Call getCurrentPosition with success
           navigator.geolocation.getCurrentPosition(success);
        }
        else
        {
           alert("Sorry, your browser does not support geolocation services.");
        }
     }

     function success(position)
     {
//Change to InsertRecord for a submission form

//Current_Long and Current_Lat should change to reference correct field names
         document.getElementById("EditRecordCurrent_Long").value = position.coords.longitude;
         document.getElementById("EditRecordCurrent_Lat").value = position.coords.latitude;
     }

//Modify behavior for method trigger as desired
window.onload = initGeolocation();
 </script>   
 

[Hearnie]

Many thanks Caspio Ninja

 

At the risk of sounding a total novice, what would I need to put in the form submission field in my caspio app to receive the location parameters.

 

I have no problem with the warning notification as I will also be stamping the IP address.  

 

So, how do I get the Lat and Long above into my data page?

 

Thanks so much

 

Steve

[GoCubbies]

You would need 2 fields to capture the latitude and longitude, in the example above the fields Current_Long and Current_Lat were used.  These fields need to be included on the submission form, but can be hidden fields.  For a submission form as well, any spots in the script using EditRecord need to change to InsertRecord.

[ChrisCarlson]

The script above would write the longitude and latitude to fields named Current_Long and Current_Lat. As long as you have these fields on your datapage as hidden with no default value and the script above is in your footer it should work.

[Hearnie]

Thanks so much for all your help

 

After some frustration I have the location grab up and running using the above script.

 

Great help

 

Steve

[GoCubbies]

New note on this script: You may see an error if the DataPage is deployed on a page using http.  Please see this message:

 

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

[alexm72]

Thanks GoCubbies for the heads up about this code not working on an insecure server anymore.  I was testing out a new app using one of my update record forms which contains this code and I thought I "broke" the page because it wasnt capturing the Lat & Long anymore on Chrome.  I direct users now the https Caspio page directly instead of my URL and it works!  The only drawback is that the browser now prompts you to accept sharing your location from Caspio rather than your own URL! 

[GoCubbies]

Here is an updated version of this code to work with the ajax feature on DataPages:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
     function initGeolocation()
     {
        if(navigator.geolocation)
        {
           // Call getCurrentPosition with success
           navigator.geolocation.getCurrentPosition(success);
        }
        else
        {
           alert("Sorry, your browser does not support geolocation services.");
        }
     }

     function success(position)
     {
//Change to EditRecord for an update form

//Current_Long and Current_Lat should change to reference correct field names
         document.getElementById("InsertRecordLong").value = position.coords.longitude;
         document.getElementById("InsertRecordLat").value = position.coords.latitude;
     }
initGeolocation(); 
});
 </script>   

[ahmedramadan]

@GoCubbies

i get message that onload is not supported 

what can i do 

and also can i use it with url deployment

 

[Kurumi]

Hi @ahmedramadan - you may need to update the script. See this article: https://howto.caspio.com/datapages/ajax-loading/

In addition, I would like to add an update on this. When Responsive is Enabled in the DataPage, you may need to change the code from this article:
https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-nerating-geolocation-coordinates-from-web-form-submissions/

Instead of:

$('#' + wrapper_id +' form').submit();

change it to

$('#caspioform').submit();