Jump to content
  • 0

Geo Coordinates From Phone


Hearnie

Question

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 1

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

Link to comment
Share on other sites

  • 0

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>   
 

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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! 

Link to comment
Share on other sites

  • 0

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>   

Link to comment
Share on other sites

  • 0

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:

image.png

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

change it to

$('#caspioform').submit();
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...