Generate geolocation from input fields

[TroubleShooter]

Hello,

 

I've wanted to generate geocodes from the input felds in my Web Form and I'm following this HowTo TechTip here. However, it is not working. I've rechecked it many times and I still can't make this work.

 

I tried to inspect my webpage from the browser and saw some messages from the console.

 

I hope someone can help.

 

Many Thanks in advance,

[DefinitelyNot31337]

Hello,

 

Fret not, @TroubleShooter. The Caspio Documentation you have provided seems to be outdated.

 

I've tested this in my end and found out that Google has updated their Maps API.

Just to let you know, generating geocodes out of input fields is made possible by a 3rd Party Integration, which is Google Maps API. There are other features of Caspio that rely on 3rd Party Services. As for Google Maps API, Map Mashup on it too.

 

Now to get this to work, we would only need to do a few modifications:

1.) Firstly, get Google Maps API Key in here. (Spoiler. It's not 100% free. It will ask you for a credit card number but won't charge you until you hit a certain usage threshold)

Notes: After getting a key, make sure you add your website domain and/or Caspio URL for testing purposes.

This AppKey can be used in MapMashup and vice-versa. Meaning, if you have an API Key from Map Mashup, you can use that as well.

 

2.) Next, you may place the scripts in the Header tag instead. Just a few modifications. Copy-paste this code and replace 7h1sIs4S4mpl3k3y to your API Key.

<script type="text/javascript" src="https://lib.caspio.com/pub/jquery/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=7h1sIs4S4mpl3k3y"></script>

<div id="cbwrapper">

Notes: Make sure to disable the HTML Editor in the advanced tab of both Header and Footer. This is really important to prevent Caspio from processing our custom markup.

 

3.) Lastly, disable AJAX  Loading.

It's a bit complex to explain why but having it enabled causes the Submit button to have dynamic ID, and replaces the standard POST request to a custom XHR function which I cannot find a way to defer.
 

After all these, you should be able to make it work.

 

Please feel free to mention me for feedback about this.

Good luck and happy hacking.

 

Cheers,

DN31337

[DefinitelyNot31337]

I'm so excited. I found a way to make it work even if AJAX Loading is enabled.

Luckily, I came across Caspio 13 Impacted Areas and kudos to good guy Caspio making this AJAX Implementation customizable.

 

previous post TL:DR? Follow this instead.

 

To make this work:

1.) Gey an API key here. Enable access to your domains (Website, Caspio URL and Integration URL) (You can see the last two in your Caspio Bridge > Account > Account Settings).

2.) Create/Edit your Submission Form DataPage

3.) Make sure 'Disable AJAX loading' remains UNCHECKED in the DataPage Data Source Section. (If you want otherwise, refer to my previous post instead.  This is not cross-compatible as of the moment).

4.) In the Configure Fields section, Add a Header and Footer.

4.1) Select your header, disable the HTML Editor, paste the code block below, replace y0uR_4P1_k3y_H3r3 with your API Key.

<script type="text/javascript" src="https://lib.caspio.com/pub/jquery/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=y0uR_4P1_k3y_H3r3"></script>

<div id="cbwrapper">

 

4.2) Select your footer, disable the HTML Editor, paste the code block below, edit the variables to correspond to your table fields.

</div>
<span id="error_message"> </span> 
<script type='text/javascript'>

 var lat_id = 'InsertRecordlat';
 var lng_id = 'InsertRecordlng';
 var address_id = 'InsertRecordAddress';
 var city_id = 'InsertRecordCity';
 var state_id = 'InsertRecordState';
 var zip_id = 'InsertRecordZip';
 var wrapper_id = 'cbwrapper';
 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);
   $('#'+lat_id).val(lat1);
   $('#'+lng_id).val(lng1);
   $('#'+wrapper_id+' form').submit();
  }else{
   alert(msg1);
 }
}
</script>

 

5.) After saving this, you should be able to make this work.

 

Basic Troubleshooting:

> Check your Console by doing a Right-Click > Inspect in your browser.

• NoApiKeys: You forgot to add your key in the script tag. Google documentation here
• ReferrerNotAllowed: Check if the domain of your webpage is listed in your Maps API Console (Maps JavaScript API > Credentials > (Key) > Details)
• There's a bunch of other warnings/errors but I think the first two are the most common and critical.

> Feel free to reply to this thread if you encounter problems.

 

Note: This is not a full-fledged fix. I know I skipped adding the WebForm AppKey.  Let's just wait for the official Caspio documentation updates.

 

Regards,

DN31337

[Kurumi]

Hi All - 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();

[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!