Marker animations with <code>setTimeout()</code>

HTML

<div id="floating-panel">
  <button id="button" onclick="set1()">Set 1</button>
  <button id="button" onclick="set2()">Set 2</button>
  <button id="button" onclick="clearMarkers()">Clear</button>



</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5DBzHn6lBmYubOpXdfLgQ4h9LcdlkNsk&callback=initMap">


</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 50px;
  left: 10px;
  margin-right: 10px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#button,
#button2 {
  background-color: #2a5db0;
  color: white;
  border: none;
  padding: 5px;
}

#button2 {
  background-color: #f44336;
}

#eventName {
  font-weight: bold;
  color: #2a5db0;
}

#mapBox a,
#mapBox a:visited,
#mapBox a:hover {
  color: #c7db4a;
  text-decoration: none;
}

JavaScript

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 51.507,
      lng: 0.123,
    }
      })};
      
      
/////////////////


var locs1 = [
['Name', 51.2, 0, 'Info'],
['Name', 52, 0.3, 'Info']
];

var locs2 = [
['Name', 53, -1.93, ' Info'], ['Name', 51, -1.8979, 'Info']
];

/////////////////////

function set1() {
//  clearMarkers(); //
  var marker, i;
  var markers = [];
  for (var i = 0; i < locs1.length; i++) {

    var event = locs1[i][0]
    var lat = locs1[i][1]
    var long = locs1[i][2]
    var desc = locs1[i][3]

    latlngset = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker({
      position: latlngset,
      map: map,
      title: event
    });

    markers.push(marker);
    
   
    
    marker.addListener('click', function(e) {
      var index = markers.indexOf(this);
      var contentString = '<div id="mapBox">' + locs1[index][0] + locs1[index][3] + '</div>';
      infowindow.setContent(contentString);
      infowindow.open(map, markers[index]);
    });
    
   
    var infowindow = new google.maps.InfoWindow({

    });
    
    
}};

 function set2() {
//  clearMarkers(); //
  var marker, i;
  var markers = [];
  for (var i = 0; i < locs2.length; i++) {

    var event = locs2[i][0]
    var lat = locs2[i][1]
    var long = locs2[i][2]
    var desc = locs2[i][3]

    latlngset = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker({
      position: latlngset,
      map: map,
      title: event
    });

    markers.push(marker);
    
   
    
    marker.addListener('click', function(e) {
      var index = markers.indexOf(this);
      var contentString = '<div id="mapBox">' + locs2[index][0] + locs2[index][3] + '</div>';
      infowindow.setContent(contentString);
      infowindow.open(map, markers[index]);
    });
    
   
    var infowindow = new google.maps.InfoWindow({

    });
    
    
    
    
}};


function clearMarkers()...