Generate Geolocation

[Corey]

Hello, 

I have been trying to generate geolocation on a submission form or update form.  With no luck.  

I tried duplicating that exact exercise and copy and pasting the fields to create a table.  https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-generating-geolocation-coordinates-from-web-form-submissions/ And still Nothing happens.  I even tried switching out the code in that example and replacing it with this https://forums.caspio.com/topic/6815-generate-geolocation-coordinates-from-updatedetails-forms/?tab=comments#comment-21088

Still nothing…. am I  missing something? I am a newbie at this.  Maybe my table field types?   editor is disabled and code is exactly as written in example.  This has been driving me crazy! lol Has anyone actually got that example to work?  The one thing not discussed is table structure perhaps I am doing something wrong there?  Any help in getting this to work would be appreciated. 

 

[thirdcharm]

Hi Corey,

You can try doing Map Mashup, here's the link to the how-to article: https://howto.caspio.com/integration/map-mashup/map-mashup-guide/

Also, try using coordinates for latitude and longitude.

Let me know your results after you tried this.

[Corey]

Thanks.. I tried that without luck.  :-( 

 

[Franchiser]

On 2/18/2018 at 10:29 PM, Corey said:

Hello, 

I have been trying to generate geolocation on a submission form or update form.  With no luck.  

I tried duplicating that exact exercise and copy and pasting the fields to create a table.  https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-generating-geolocation-coordinates-from-web-form-submissions/ And still Nothing happens.  I even tried switching out the code in that example and replacing it with this https://forums.caspio.com/topic/6815-generate-geolocation-coordinates-from-updatedetails-forms/?tab=comments#comment-21088

Still nothing…. am I  missing something? I am a newbie at this.  Maybe my table field types?   editor is disabled and code is exactly as written in example.  This has been driving me crazy! lol Has anyone actually got that example to work?  The one thing not discussed is table structure perhaps I am doing something wrong there?  Any help in getting this to work would be appreciated. 

 

 

Hi Corey,

Did you not missed placing the JQuery & Google Maps libraries above the Datapage embed code? It is in step 4 of this article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-generating-geolocation-coordinates-from-web-form-submissions/

 

-Franchiser-

[GoCubbies]

Hello Corey,

Could you possibly provide the URL of the page with the submission form so that I can take a look at it?  I'm wondering if any errors are appearing in the console.  Also, if you are using the Google Map API integration for the first time, you may need to adjust the code placed in page above the deploy code. You may need to try the code with the API key included.

For example:

<script type="text/javascript" src="http://lib.caspio.com/pub/jquery/jquery.js"></script>

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=<API KEY HERE>" async="" defer="defer" type="text/javascript"></script>

 

You can get a Google API key by going to this page:  https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

[NailDyanC]

Hi, also just to add an additional information, Google now restricts the rate which non-geocoded addresses can be plotted on a map (approximately 10 addresses per second). And, Google API key needs to have a billing enabled (though you will not be charged) to fully access the Geocoding API that you will place in the map. You also need to enable this two:

1. Geocoding API 

2. Maps Javascript API

[GoodBoy]

Hello! You can just use this article to generate latitude and longitude for your existing records. Just modify the 'InsertRecordFieldName' lines into 'EditRecordFieldName'. Also, please make sure that the field name you used in the table is the same with the inputted in the code. If it is Zip in the table, then it should be Zip in the code as well.

[GoodBoy]

Just to add, this workflow works well in standalone Details and Single Record Update DataPages. If you are using it in the Details page from a Results page, I'm afraid the code won't work. However, as a workaround, you may just need to separate the Results Page and Details page and create an HTML block inside the results page that includes the details page URL with the ID parameter on it to pass the data.

[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-tip-generating-geolocation-coordinates-from-web-form-submissions/

Instead of:

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

change it to

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

Hope it helps!

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

[Aether]

Hi All - You can check this updated map mashup instruction to apply Google map feature on your application:
https://howto.caspio.com/tech-tips-and-articles/google-map-mashup-integration/