With the proliferation of online maps and GPS-enabled smart devices, it’s almost a requirement for all apps to plot addresses on maps, provide search by distance functionality, or let users get driving directions to a location. To do all this, you need to have the address geocoded. If the data is added to your database through form submissions, this Tech Tip helps you integrate it with the Google API so that latitude and longitude of the address is appended to the form submission automatically and behind the scenes. With this enhancement, the data in your table will be geocoded and in good shape for use in all sorts of location-aware apps.

By the way, if you have existing data that needs to be enhanced with geolocation data, we offer geocoding service. You may also be interested in our map-mashup and Store Locator ready-made app.

This tutorial shows just how easy it is to generate individual geocoded locations with Caspio submission forms.

  1. First, simply create a Submission Form in Caspio Bridge with the following fields (Note: fields are case sensitive).
    • Address
    • City
    • State [Dropdown, value could be StateCode or StateName]
    • Zip [Limit to 5 characters]
    • lat [Hidden]
    • lng [Hidden]

    Your form would appear as follows (notice lat and lng fields are hidden):

  1. Next, add a Header & Footer to the DataPage you plan on using. Disable the HTML editor in the Advanced tab and insert the following code to the Header:
    <div id="cbwrapper">
Submission Form, screenshot
  1. In the Footer, disable the HTML editor in the Advanced tab and insert the following code. If your field names are not the same as the above, then you should change them in the code below where we have InsertRecord. Example: InsertRecordlat should be changed to InsertRecordLatitude if your field name is Latitude.
    <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) {
    			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){
    				var full = add +','+city+','+state+' '+zip;
    				cb_geocoder.geocode({address: full}, cbCallBack);
    		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);
    			$('#'+wrapper_id+' form').submit();
  2. When you’re ready, deploy the Submission Form in your web page using embed deployment method and place the following code above the deploy code.
    <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=<Google Maps API Key>"></script>

    Please replace the part with your Google Maps API Key.

  3. Click Finish.

Now your incoming records will automatically be geocoded in the database so you can utilize location-based features in your apps.