How to show and hide bookmarks in Google Maps with Mysql?

Question

I made a site with Google Maps that used each position of an array for each marker...

      var map;
      var markers = [];

      function initMap() {
        var uluru = {lat: -23.9651447, lng: -46.3838347};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: uluru
        });

      var locations = [
      {title:'1', location: {lat: -23.967282, lng:-46.383489}},
      {title:'2', location: {lat: -23.965176, lng:-46.383606}},
      {title:'3', location: {lat: -23.968734, lng:-46.387660}},
      {title:'4', location: {lat: -23.967054, lng:-46.383229}},
      {title:'5', location: {lat: -23.967462, lng:-46.377247}},
      {title:'6', location: {lat: -23.964940, lng:-46.384603}}
      ];

      var largeInfowindow = new google.maps.InfoWindow();

      for (var i = 0; i < locations.length; i++) {
        var position = locations[i].location;
        var title = locations[i].title;
        var marker = new google.maps.Marker({
          position: position,
          title: title,
          animation: google.maps.Animation.DROP,
          icon: defaultIcon,
          id: i
        });

        markers.push(marker);       

        marker.addListener('click', function(){
          populateInfoWindow(this, largeInfowindow);
        });
       }

       document.getElementById('show-listings').addEventListener('click', showListings);
       document.getElementById('hide-listings').addEventListener('click', hideListings);
     }

       function populateInfoWindow(marker, infowindow){
        if(infowindow.marker != marker){
          infowindow.setContent('');
          infowindow.marker = marker;

          infowindow.addListener('closeclick', function(){
            infowindow.marker = null;
          });
          infowindow.open(map, marker);
        }
       }

       function showListings(){
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
          bounds.extend(markers[i].position);
        }
        map.fitBounds(bounds);
       }

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

However, later I had to connect to the database using xml, the markers are displayed normally but the display and hide functions no longer work, because there is no more array of markers to be "scanned" and I could not fix the problem, I’d really appreciate a little help!

      var map;
      var markers = [];

      function initMap() {
        var uluru = {lat: -23.9651447, lng: -46.3838347};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: uluru
        });

      var largeInfowindow = new google.maps.InfoWindow();
      
          downloadUrl('xml/map_xml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var title = markerElem.getAttribute('nome');
              var position = new google.maps.LatLng(
                parseFloat(markerElem.getAttribute('lat')),
                parseFloat(markerElem.getAttribute('lng')));

              var marker = new google.maps.Marker({
                map: map,
                position: position,
                title: title,
                animation: google.maps.Animation.DROP,
                icon: defaultIcon
              });
        marker.addListener('click', function(){
          populateInfoWindow(this, largeInfowindow);
        });

            });
          });
        }

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

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}

function populateInfoWindow(marker, infowindow){
            if(infowindow.marker != marker){
              infowindow.setContent('');
              infowindow.marker = marker;

              infowindow.addListener('closeclick', function(){
                infowindow.marker = null;
              });
              infowindow.open(map, marker);
            }
           }

       function showListings(){
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
          bounds.extend(markers[i].position);
        }
        map.fitBounds(bounds);
       }