JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<button id='remove-markers'>Clear map</button>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
}

JavaScript

var markers = [];
    
// Initialize Object Array
var Calls = [{
  lat: 42,
  lng: -72
}, {
  lat: 40.7127837,
  lng: -74.0059413
}, {
  lat: 40.735657,
  lng: -74.1723667
}];

// Initialize Map
function initMap()
{
    map = new google.maps.Map(document.getElementById('map'),
    {
        center: Calls[0],
        zoom: 5,
        scaleControl: true
    })
}

// Add Markers
function initMarkers()
{
    for (var i = 0; i < Calls.length; i++)
    {
        var marker = new google.maps.Marker({
            position: Calls[i],
            map: map
        });
        markers.push(marker);
    }
}

// Start on Load
window.onload = function()
{
    initMap();
    initMarkers();
}

//Clear Markers
function clearOverlays()
{
    initMarkers(null);
}

// Run Clear Markers Function every 3 seconds
setInterval(function()
{
    clearOverlays();
    Calls = [];
}, 3000)

function clearMap() {
    for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
    }
}

$(function(){
    $('#remove-markers').on('click', function(){
         clearMap();
    })
})