Cannot remove markers from google maps api

Question

The markers in my program just wont remove with the deleteMarkers() function

CSS:

 #map-canvas {
   margin: 0;
   padding: 0;
   height: 100%;
 }

HTML:

<div style="height:500px; width:750px;">
    <div id="map-canvas"></div>
</div>
<select class="form-control" name="dateSelect" id="dateSelect" onchange="dateSelect_Event();"></select>

Javascript:

var map; <--- global variables
var locations = [];
var lat_get = '';
var long_get = '';
var marker=[];
var infowindow;

function initMap() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: {lat: 7.072617, lng: 125.599494},
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 13,
      });
};

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

function dateSelect_Event() {
      deleteMarkers();
      infowindow = new google.maps.InfoWindow({});

      var locationsRef = firebase.database().ref("location");
           locationsRef.on('child_added', function(snapshot) {
                 var data = snapshot.val();
                 marker = new google.maps.Marker({
                      position: {
                        lat: parseFloat(data.latitude),
                        lng: parseFloat(data.longitude)
                      },
                      map: map
            });
            marker.addListener('click', (function(data) {
                  return function(e) {
                  infowindow.setContent(this.getPosition().toUrlValue(6)); 
                  infowindow.open(map, this);
                  }
            }(data)));
                  marker.setMap(map);

      });

 }

Firebase:

-databaseName
    --location
        ---latitude
        ---longitude

I just use firebase to get the lat and long on every change of the html select option and it work perfectly. The problem this time is it can't delete the markers. Should I do the deleteMarkers differently?

Answer 1

Thanks to @StackSlave's answer. I was able to successfully remove it by creating and pushing the google_marker to the global marker variable.

function dateSelect_Event() {
      deleteMarkers();
      infowindow = new google.maps.InfoWindow({});

      var locationsRef = firebase.database().ref("location");
           locationsRef.on('child_added', function(snapshot) {
                 var data = snapshot.val();
                 var google_marker = new google.maps.Marker({
                      position: {
                        lat: parseFloat(data.latitude),
                        lng: parseFloat(data.longitude)
                      },
                      map: map
            });
            google_marker.addListener('click', (function(data) {
                  return function(e) {
                  infowindow.setContent(this.getPosition().toUrlValue(6)); 
                  infowindow.open(map, this);
                  }
            }(data)));
                  marker.push(google_marker);
      });
      marker.setMap(map);
 }