# Total Mileage Calculation

**URL:** <https://forums.knack.com/t/total-mileage-calculation/7951>\
**Category:** Ask Developers\
**Created:** [March 20, 2015, 3:03pm UTC](https://forums.knack.com/t/total-mileage-calculation/7951 "2015-03-20T15:03:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoshCamero93783](https://avatars.discourse-cdn.com/v4/letter/j/8baadc/32.png) [@JoshCamero93783](https://forums.knack.com/u/JoshCamero93783)\
**Post date:** [March 20, 2015, 3:03pm UTC](https://forums.knack.com/t/total-mileage-calculation/7951/1 "2015-03-20T15:03:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [January 8, 2020, 5:49pm UTC](https://forums.knack.com/t/total-mileage-calculation/7951/2 "2020-01-08T17:49:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AlexLevy98049](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@AlexLevy98049](https://forums.knack.com/u/AlexLevy98049)\
**Post date:** [August 24, 2016, 8:25am UTC](https://forums.knack.com/t/total-mileage-calculation/7951/3 "2016-08-24T08:25:39Z")

</div>

Great! Thanks! Where do I input this code?

---

<div class="post-metadata">

**Author:** ![Soluntech](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/soluntech/32/780_2.png) [@Soluntech](https://forums.knack.com/u/Soluntech)\
**Post date:** [August 24, 2016, 2:16am UTC](https://forums.knack.com/t/total-mileage-calculation/7951/4 "2016-08-24T02:16:37Z")

</div>

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](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.");

}

});

});

---

<div class="post-metadata">

**Author:** ![AlexLevy98049](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@AlexLevy98049](https://forums.knack.com/u/AlexLevy98049)\
**Post date:** [August 23, 2016, 3:52am UTC](https://forums.knack.com/t/total-mileage-calculation/7951/5 "2016-08-23T03:52:20Z")

</div>

how do you call the google maps api from knack?

---

<div class="post-metadata">

**Author:** ![Soluntech](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/soluntech/32/780_2.png) [@Soluntech](https://forums.knack.com/u/Soluntech)\
**Post date:** [October 8, 2015, 5:40am UTC](https://forums.knack.com/t/total-mileage-calculation/7951/6 "2015-10-08T05:40:05Z")

</div>

Hi Josh,

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

This could be a way.

---

<div class="post-metadata">

**Author:** ![Brockmassi65785](https://avatars.discourse-cdn.com/v4/letter/b/3d9bf3/32.png) [@Brockmassi65785](https://forums.knack.com/u/Brockmassi65785)\
**Post date:** [October 7, 2015, 1:47pm UTC](https://forums.knack.com/t/total-mileage-calculation/7951/7 "2015-10-07T13:47:20Z")

</div>

Would love to know how to do this.