Calculating the distance between 2 addresses can be done using the Google Distance Matrix API. This customization will require using the PHP scripts called on form display and the Javascript section (found in the Form Properties).
1st step
Create a new form and create a normal button (for this example i named it search);
Create 2 googlemaps (for this example i named them gmap1 & gmap2)
2nd step
Create a PHP Script called on form process to calculate the distance, this can be done like so (read comments)
$action = JRequest::getWord('action'); // we will need a parameter to run the script
if ($action == "ajax") { // if condition is met, run the script
$origin = $_POST['origin']; // get the origin
$destination = $_POST['destination']; // get the destination
$distance = file_get_contents("https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$origin."&destinations=".$destination); // build the URL according to the API
$distance = json_decode($distance); // decode the response from JSON
print_r($distance->rows[0]->elements[0]->distance->text);die(); // print the result so we can catch it in the AJAX call
}
3rd. step
Head over to the Javascript section found in the Form Properties and we need to request the calculation from google. Insert the following snippet (read the comments)
<script>
jQuery(document).ready(function(){ // we wait until DOM is ready
jQuery('#search').click(function(){ // we bind a function when clicking the button we added earlier
origin = jQuery('#gmap1').val(); // we grab the value from the first googlemap
origin = origin.replace(/\s+/g, '+'); // remove white spaces
origin = origin.replace(/,/g , ""); // remove commas
destination = jQuery('#gmap2').val(); // we grab the value from the second googlemap
destination = destination.replace(/\s+/g, '+'); // remove white spaces
destination = destination.replace(/,/g , ""); // remove commas
jQuery.ajax({ // we build the AJAX request
type:"POST",
url:"index.php?option=com_rsform&formId=3&action=ajax", // Due to Cross Origin Request Blocks we need to call it sever side (this is the reason why we created the PHP script called on form display ) please make sure you use the correct formId (the ID of this form)
data: {origin, destination}, // we send the origin and destination information to the script we already crated
success: function(results) {
alert(results); // on success we alert the distance
}
});
});
})
</script>
Please note that this is only an example on how you can perform some basic operations with the Google Maps, it should be treated as an example and not a solution. PS: You can find the sample form attached (simply restore it through the Back-up Restore Functionality).
Map Distance Calculation Form