How to display and hide bookmarks in Google Maps with MySql?

      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);
        }
       }   

      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);
       }