Generate Geolocation Coordinates from Update/Details Forms

[Vitalikssssss]

Hi Everyone,

I would like to share a solution on how to generate geolocation coordinates on Update/Details datapages.

My solution based on following HowTo article:

http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-generating-geolocation-coordinates-from-web-form-submissions/

Please use this JS instead of the one from step #3 of above article:

</div><script type='text/javascript'>
var lat_id = 'EditRecordlat';
var lng_id = 'EditRecordlng';
var address_id = 'EditRecordAddress';
var city_id = 'EditRecordCity';
var state_id = 'EditRecordState';
var zip_id = 'EditRecordZip';
var wrapper_id = 'cbwrapper';
var msg1 = 'Please input a valid address';
if(typeof jQuery != 'undefined'){
var cb_geocoder = cb_geocoder = new google.maps.Geocoder();
$('#'+wrapper_id+' input[id=Mod0EditRecord]').click(function(e){
e.preventDefault();
var add = $('#'+address_id).val();
var city = $('#'+city_id).val();
var state = $('#'+state_id).val();
var zip = $('#'+zip_id).val();
if(!add || !city || !state || !zip){
alert(msg1);
}else{
var full = add +','+city+','+state+' '+zip;
cb_geocoder.geocode({address: full}, cbCallBack);
}
});
}else{
document.write('This Datapage require Standard Caspio Deployment for full functionality.');
}
function cbCallBack(locResult){
if(locResult != "" && locResult.length>0){
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
lat1 = Number(lat1);
lng1 = Number(lng1);
$('#'+lat_id).val(lat1);
$('#'+lng_id).val(lng1);
$('#'+wrapper_id+' form').submit();
}else{
alert(msg1);
}
}
</script>

 

[Kurumi]

Hi Everyone,

I would like to add an update on this. This workflow does not work when Responsive is Enabled in the DataPage.  The workaround to keep the DataPage responsive is by changing

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

to 

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

On this, you may now remove the

<div id=”wrapper”>

and  

</div>

in Header and Footer. 

 

I hope it helps!

[GoodBoy]

Hi! Just want to share this workflow that might work. 

 

[GoodBoy]

This might help as well.

 

[autonumber]

Hi! I just want to update this post for generating geolocation. The code also works even if you remove this IF condition 

if (event.detail.appKey == 'DATAPAGEAPPKEY') {
   } //end of if AppKey

and you can use this updated code:

<span id="error_message"> </span>
<script>

document.addEventListener('DataPageReady', function (event) {
                                var Latitude_id = 'InsertRecordLatitude';
                                var Longitude_id = 'InsertRecordLongitude';
                                var address_id = 'InsertRecordAddress';
                                var city_id = 'InsertRecordCity';
                                var state_id = 'InsertRecordState';
                                var zip_id = 'InsertRecordZIP';

                                var msg1 = 'Please input a valid address';

                                if(typeof jQuery != 'undefined'){
                                                var cb_geocoder = cb_geocoder = new google.maps.Geocoder();
                                                document.addEventListener('BeforeFormSubmit', function (event) {
                                                                event.preventDefault();
                                                                var add = $('#'+address_id).val();
                                                                var city = $('#'+city_id).val();
                                                                var state = $('#'+state_id).val();
                                                                var zip = $('#'+zip_id).val();
                                                                if(!add || !city || !state || !zip){
                                                                                alert(msg1);
                                                                }else{
                                                                                var full = add +','+city+','+state+' '+zip;
                                                                                cb_geocoder.geocode({address: full}, cbCallBack);
                                                                }
                                                });
                                }else{
                                                document.getElementById("error_message").innerHTML = "This Datapage require Standard Caspio Deployment for full functionality." ;
                                }

                                function cbCallBack(locResult){
                                                if(locResult != "" && locResult.length>0){
                                                                var lat1 = locResult[0].geometry.location.lat();
                                                                var lng1 = locResult[0].geometry.location.lng();
                                                                lat1 = Number(lat1);
                                                                lng1 = Number(lng1);
                                                                $('#'+Latitude_id).val(lat1);
                                                                $('#'+Longitude_id).val(lng1);
                                                                $('#caspioform').submit();
                                                }else{
                                                                alert(msg1);
                                                }
                                }
}); //end of eventlistener
</script>

Hope this helps!