Total Mileage Calculation

API & Customization Ask Developers
1

We have built a Knack App for a transportation company. There is field for (A) the "Pick Up Address" and field for (B) the "Drop Off Address". Is there any way I could automate how many miles are from A-B?

2

Thanks Alejandro,

Now, I am studying your code and modified it a bit to come up with a minimalistic version of it in my Javascript pane (nothing else but this) :

const MY_GOOGLE_API_KEY = 'xxxxxxxxxxxxxx-yyyyyyyyyyyyyyyyyyyy';
const WORKSITE_EDIT = 'scene_145';

var googleMapsLoaded = $.Deferred();

window.googleMapsCallback = function () {
    googleMapsLoaded.resolve();
};

$.extend({
    loadGoogleMaps: function () {
        $.ajax({
            url: "https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback" + '&key=' + MY_GOOGLE_API_KEY,
            dataType: "script"
        }).fail(googleMapsLoaded.reject);
        return googleMapsLoaded.promise();
    }
});

$(document).on('knack-scene-render.' + WORKSITE_EDIT, function (event, scene) {
    $.loadGoogleMaps().done(function () {
        console.log('loadGoogleMaps DONE!');
    });
});

But I always get this annoying error:

"You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors."

I think is has to do with the ajax call.

Anybody have an idea on how to solve this? I searched for hours all over the net and found nothing.

3

Great! Thanks! Where do I input this code?

4

Hi Alex, this is how I did it with JavaScript. The code has some app specific code, but all that is need to get the lat and long from Google Maps it's there.

Hope it helps!

var googleMapsLoaded = $.Deferred();

window.googleMapsCallback = function () {

googleMapsLoaded.resolve();

};

$.extend({

loadGoogleMaps: function () {

$.ajax({

url: "https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false",

dataType: "script"

}).fail(googleMapsLoaded.reject);

return googleMapsLoaded.promise();

}

});


//AZ: Time Sheets

$(document).on('knack-page-render.scene_29', function(event, view, record) {

var usrName = Knack.getUserAttributes().name;

var isClocked = false;

var filters = [{field: 'field_80', operator: 'is', value: 'Yes'}];

var sortField = "field_76";

var sortOrder = "desc";

var objectId = "object_9";

//Make sure to get the GPS Location details mandatory to save in the database.

$.loadGoogleMaps().done(function () {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(LocationFoundSuccessCallback);

$.when(GetRecord(filters, sortField, sortOrder, objectId))

.done(function(tbldata){

var cRcd;

$.each(tbldata.records, function(i, krcd) {

//Check if the logged-in user is currently clocked-in

if(krcd.field_74_raw.length > 0 &&

krcd.field_74_raw[0].identifier == usrName){

isClocked = true;

cRcd = krcd;

return false;

}

});

});

}

else {

alert("Geolocation is not supported by this browser.\rIt is not possible to Clock In or Out.");

}

});

});

5

how do you call the google maps api from knack?

6

Hi Josh,

Have you tried doing this by calling the Google Maps API from Knack?

This could be a way.

7

Would love to know how to do this.