map in oracle apex distance and duration by mapbox
MapTool using MapBox SDK
Mapbox Tutorial
$(function () {
// add input listeners
google.maps.event.addDomListener(window, 'load', function () {
var from_places = new google.maps.places.Autocomplete(document.getElementById('P21_FROM_PLACES'));
var to_places = new google.maps.places.Autocomplete(document.getElementById('P21_TO_PLACES'));
google.maps.event.addListener(from_places, 'place_changed', function () {
var from_place = from_places.getPlace();
var from_address = from_place.formatted_address;
$('#origin').val(from_address);
});
google.maps.event.addListener(to_places, 'place_changed', function () {
var to_place = to_places.getPlace();
var to_address = to_place.formatted_address;
$('#destination').val(to_address);
});
});
// calculate distance
function calculateDistance() {
debugger
var origin = $('#P21_FROMLATLNG').val();
var destination = $('#P21_FROMLATLNG_1').val();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
//unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
avoidHighways: false,
avoidTolls: false
}, callback);
}
// get distance results
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$('#result').html(err);
} else {
var origin = response.originAddresses[0];
var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
$('#result').html("Better get on a plane. There are no roads between " + origin + " and " + destination);
} else {
var distance = response.rows[0].elements[0].distance;
var duration = response.rows[0].elements[0].duration;
console.log(response.rows[0].elements[0].distance);
var distance_in_kilo = distance.value / 1000; // the kilom
var distance_in_mile = distance.value / 1609.34; // the mile
var duration_text = duration.text;
var duration_value = duration.value;
$('#in_mile').text(distance_in_mile.toFixed(2));
$('#in_kilo').text(distance_in_kilo.toFixed(2));
$('#duration_text').text(duration_text);
$('#duration_value').text(duration_value);
$('#from').text(origin);
$('#to').text(destination);
$("#P21_KM").val(distance_in_kilo.toFixed(2));
$("#P21_TIME").val(duration_text);
$("#P21_FROM").val(origin);
$("#P21_TO").val(destination);
}
}
}
// print results on submit the form
$('#MA1').click(function (e) {
e.preventDefault();
calculateDistance();
});
});
JavaScript in oracle apex
#oracle_apex
#javascript
#googlemaps