Jump to content

Generate Geolocation Coordinates from Update/Details Forms


Recommended Posts

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>

 

Link to comment
Share on other sites

  • 3 years later...

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!

Link to comment
Share on other sites

  • 4 months later...

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
Reply to this topic...

×   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...
 Share

×
×
  • Create New...