I’m having a difficult time understanding how to use Axios instead of Fetch. For some reason, my code works well with Fetch but not with Axios. Below is my code. Note: You will need your personal API keys to run the code.
<!DOCTYPE html>
<html>
<!-- add your Google Maps API to line 4 after the = -->
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=ADDYOURKEYHERE"></script>
<style>
body { margin: 0; padding: 0; }
/* #map { position: absolute; top: 0; bottom: 0; width: 100%; } */
/* .map-overlay {
position: absolute;
left: 0;
padding: 10px;
} */
</style>
</head>
<body>
<div id="map" style="width:1024px; height:768px"></div>
<!-- <div class="map-overlay top">
<button onclick="addMarker()">SHOW ROUTE FROM MIT TO HARVARD - BUS ONE</button>
</div> -->
<script>
var map;
var markers = [];
// load map
function init(){
var myOptions = {
zoom : 14,
center : { lat:42.353350,lng:-71.091525},
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var element = document.getElementById('map');
map = new google.maps.Map(element, myOptions);
addMarkers();
}
init();
//
// Add bus markers to map
async function addMarkers(){
// get bus data
var locations = await getBusLocations();
// loop through data, add bus markers
locations.forEach(function(bus){
var marker = getMarker(bus.id);
if (marker){
moveMarker(marker,bus);
}
else{
addMarker(bus);
}
});
// timer
console.log(new Date());
setTimeout(addMarkers,15000);
}
// Request bus data from MBTA
async function getBusLocations(){
var url = 'https://api-v3.mbta.com/vehicles?api_key=ADDYOURKEYHERE&filter[route]=1&include=trip';
var response = await fetch(url);
var json = await response.json();
return json.data;
}
function addMarker(bus){
var icon = getIcon(bus);
var marker = new google.maps.Marker({
position: {
lat: bus.attributes.latitude,
lng: bus.attributes.longitude
},
map: map,
icon: icon,
id: bus.id
});
markers.push(marker);
}
function getIcon(bus){
// select icon based on bus direction
if (bus.attributes.direction_id === 0) {
return 'red.png';
}
return 'blue.png';
}
function moveMarker(marker,bus) {
// change icon if bus has changed direction
var icon = getIcon(bus);
marker.setIcon(icon);
// move icon to new lat/lon
marker.setPosition( {
lat: bus.attributes.latitude,
lng: bus.attributes.longitude
});
}
function getMarker(id){
var marker = markers.find(function(item){
return item.id === id;
});
return marker;
}
</script>
</body>
</html>
So, the code works well with Fetch; however, when I used Axios (using the Axios library), it doesn’t work. (See code below)
<!DOCTYPE html>
<html>
<!-- add your Google Maps API to line 4 after the = -->
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=ADDYOURKEYHERE"></script>
<style>
body { margin: 0; padding: 0; }
/* #map { position: absolute; top: 0; bottom: 0; width: 100%; } */
/* .map-overlay {
position: absolute;
left: 0;
padding: 10px;
} */
</style>
</head>
<body>
<div id="map" style="width:1024px; height:768px"></div>
<!-- <div class="map-overlay top">
<button onclick="addMarker()">SHOW ROUTE FROM MIT TO HARVARD - BUS ONE</button>
</div> -->
<script>
var map;
var markers = [];
// load map
function init(){
var myOptions = {
zoom : 14,
center : { lat:42.353350,lng:-71.091525},
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var element = document.getElementById('map');
map = new google.maps.Map(element, myOptions);
addMarkers();
}
init();
//
// Add bus markers to map
async function addMarkers(){
// get bus data
var locations = await getBusLocations();
// loop through data, add bus markers
locations.forEach(function(bus){
var marker = getMarker(bus.id);
if (marker){
moveMarker(marker,bus);
}
else{
addMarker(bus);
}
});
// timer
console.log(new Date());
setTimeout(addMarkers,15000);
}
//Request bus data from MBTA with axios instead fecth
async function getBusLocations(){
var url = 'https://api-v3.mbta.com/vehicles?api_key=ADDYOURKEYHERE&filter[route]=1&include=trip';
var response = await axios(url);
return await response.data;
}
function addMarker(bus){
var icon = getIcon(bus);
var marker = new google.maps.Marker({
position: {
lat: bus.attributes.latitude,
lng: bus.attributes.longitude
},
map: map,
icon: icon,
id: bus.id
});
markers.push(marker);
}
function getIcon(bus){
// select icon based on bus direction
if (bus.attributes.direction_id === 0) {
return 'red.png';
}
return 'blue.png';
}
function moveMarker(marker,bus) {
// change icon if bus has changed direction
var icon = getIcon(bus);
marker.setIcon(icon);
// move icon to new lat/lon
marker.setPosition( {
lat: bus.attributes.latitude,
lng: bus.attributes.longitude
});
}
function getMarker(id){
var marker = markers.find(function(item){
return item.id === id;
});
return marker;
}
</script>
</body>
</html>
I tried to integrate Axios with the React app, but for some reason, it didn’t work. However, I’m wondering if there’s a way to use Axios without relying on React or npm. Additionally, I’ve already downloaded the Axios library before my code, but it doesn’t seem to have helped.
