Reputation: 297
I've been trying to calculate the total travel time between several places using the Google Maps API. But when trying to access the variable total_duration
with the above information does not show me anything on the console.
const responses = [];
let total_duration = 0;
for(let i = 0 ; i < origins.length ; i++){
const matrix = new google.maps.DistanceMatrixService();
matrix.getDistanceMatrix({
origins: origins[i],
destinations: destinations[i],
travelMode: google.maps.TravelMode.DRIVING,
},
function(response, status){
responses.push(response);
});
}
console.log(responses);
for(let i = 0 ; i < responses.length ; i++){
total_duration += responses[i].rows[0].elements[0].duration.value;
console.log(responses[i])
}
console.log(total_duration);
The first console log shows me all the results for every couple of places.
[
{
"rows": [
{
"elements": [
{
"distance": {
"text": "1.2 km",
"value": 1161
},
"duration": {
"text": "3 mins",
"value": 169
},
"status": "OK"
}
]
}
],
"originAddresses": [
"3670 SW 3rd St, Miami, FL 33135, USA"
],
"destinationAddresses": [
"3911 SW 2nd Terrace, Coral Gables, FL 33134, USA"
]
},
{
"rows": [
{
"elements": [
{
"distance": {
"text": "1.5 km",
"value": 1473
},
"duration": {
"text": "4 mins",
"value": 226
},
"status": "OK"
}
]
}
],
"originAddresses": [
"3911 SW 2nd Terrace, Coral Gables, FL 33134, USA"
],
"destinationAddresses": [
"4490 SW 5th Terrace, Coral Gables, FL 33134, USA"
]
}
]
But the other console logs do not show me the info I need. Can you help me with this error? Thank you in advance.
Now, when I try to update state
in getTimes
function, my state don't update. Time is always 0
.
import React, {Component} from 'react';
class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
time: 0,
places: [
{latitude: some_data, longitude: some_data},
{latitude: some_data, longitude: some_data}
]
};
}
componentDidMount(){}
getTimes = () => {
const origins = [], destinations = [];
for(let i = 0 ; i < this.state.places.length - 1 ; i++){
origins.push([new google.maps.LatLng(this.state.places[i].latitude,
this.state.places[i].longitude)]);
destinations.push([new google.maps.LatLng(this.state.places[i + 1].latitude,
this.state.places[i + 1].longitude)]);
}
let total_duration = 0;
for(let i = 0 ; i < origins.length ; i++){
const matrix = new google.maps.DistanceMatrixService();
matrix.getDistanceMatrix({
origins: origins[i],
destinations: destinations[i],
travelMode: google.maps.TravelMode.DRIVING,
},
(response, status) => {
total_duration += response.rows[0].elements[0].duration.value;
console.log(total_duration);
this.setState({time: total_duration});
});
}
console.log(this.state.time);
}
render() {
const {time} = this.state;
return (
<h1>{time}</h1>
);
}
}
Upvotes: 0
Views: 388
Reputation: 547
this.setState(state => {
const newTime = state.time + total_duration
return { count: newTime }
}, () => {
console.log(this.state.time);
})
Upvotes: 1