Here is a code snippet that generates two TRACER points and displays them on a map, as well as shows the union between the two points.
<?php
$latitudInicio = $_GET['latitudInicio'];
$longitudInicio = $_GET['longitudInicio'];
$latitudFin = $_GET['latitudFin'];
$longitudFin = $_GET['longitudFin'];
?>
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width: 100%; height: 700px;"></div>
<script>
function initMap() {
var inicio = {lat: <?php echo $latitudInicio ?>, lng: <?php echo $longitudInicio ?>};
var fin = {lat: <?php echo $latitudFin ?>, lng: <?php echo $longitudFin ?>};
var map = new google.maps.Map(document.getElementById('map'), {
center: inicio,
zoom: 7
});
var inicioMarker = new google.maps.Marker({
position: inicio,
map: map,
title: '<?php echo $latitudInicio ?> <?php echo $longitudInicio ?>'
});
var finMarker = new google.maps.Marker({
position: fin,
map: map,
title: '<?php echo $latitudFin ?> <?php echo $longitudFin ?>'
});
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
suppressMarkers: true
});
var request = {
destination: fin,
origin: inicio,
travelMode: 'DRIVING'
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == 'OK') {
// Display the route on the map.
directionsDisplay.setDirections(response);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"
async defer></script>
</body>
</html>
I am looking to calculate the distance and time between both TRACER points and display it in an input or label field.
I found information in the documentation at this link:
https://developers.google.com/maps/documentation/distance-matrix/start?hl=es
I have managed to fetch a JSON response with distance and duration data, but I am unsure how to incorporate this into my HTML for display purposes.
{
"destination_addresses" : [ "New York, NY, USA" ],
"origin_addresses" : [ "Washington, DC, USA" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "225 mi",
"value" : 361715
},
"duration" : {
"text" : "3 hours 49 mins",
"value" : 13725
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}
If you know how to implement this JSON data to display it in a label, your help would be greatly appreciated!