список маркеров, видимых в области просмотра при изменении масштаба

Question

Я не вижу список маркеров внутри коробки, что я делаю не так?Я все еще новичок.Функция для просмотра неправильного списка, чтобы вспомнить его?Маркеры, которые я вижу на карте, но не их имя в списке, почему?

function MarkupGoogleMap() {

    this.map = null;
    this.markers = [];
    this.numMarkers = 0;
    this.icon = '';
    this.iconHover = '';
    this.shadow = '';

    this.hoverBox = null;
    this.hoverBoxOffsetTop = 0;
    this.hoverBoxOffsetLeft = 0;

    this.options = {
        zoom: 10, 
        center: null, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        scrollwheel: false, 
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU    
        }, 
        scaleControl: false,


  this._currentURL = '';

    this.init = function(mapID, lat, lng, q, geo) {
        if(lat != 0) this.options.center = new google.maps.LatLng(lat, lng); 
        this.map = new google.maps.Map(document.getElementById(mapID), this.options); 

        if (q.length) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': q }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) { 
                    this.map.setCenter(results[0].geometry.location);
                    if (results[0].geometry.viewport) {
                        this.map.fitBounds(results[0].geometry.viewport);
                        this.map.setZoom(this.map.getZoom()-1);
                    }
                }
            }.bind(this));
        } else {
            if (geo) {
                this.infoWindow = new google.maps.InfoWindow;
                var _me = this;

            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };


                _me.map.setCenter(pos);
                _me.map.setZoom(10);
              }, function() {
                _me.handleLocationError(true, _me.map.getCenter());
              });
            } else {

              _me.handleLocationError(false, _me.map.getCenter());
            }
          }
      } 
        var map = new google.maps.Map(document.getElementById("markers-list"), this.options);
        console.log(map)

        google.maps.event.addListener(map, 'tilesloaded', function () {
        this.loadCorrentBounds(map);
        }); 
    }


  this.handleLocationError = function(browserHasGeolocation, pos) {
    this.infoWindow.setPosition(pos);
    this.infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
    this.infoWindow.open(this.map);
  }

    this.setOption = function(key, value) {
        this.options[key] = value; 
    }

    this.setIcon = function(url) {
        this.icon = url;
    }

    this.setIconHover = function(url) {
        this.iconHover = url;
    }

    this.setShadow = function(url) {
        this.shadow = url;
    }

    this.setHoverBox = function(markup) {

        if(!markup.length) {
            this.hoverBox = null;
            return;
        }

        this.hoverBox = $(markup);
        var $hoverBox = this.hoverBox;

        this.hoverBoxOffsetTop = parseInt($hoverBox.attr('data-top')); 
        this.hoverBoxOffsetLeft = parseInt($hoverBox.attr('data-left')); 

        $("body").append($hoverBox);

        $hoverBox.css({
            position: 'absolute',
            left: 0,
            top: '-100px'
        });

        $hoverBox.mouseout(function() {
            $hoverBox.hide();
        }).click(function() {
            if(this._currentURL.length > 0) window.location.href = this._currentURL;
        });
    }

    this.addMarker = function(lat, lng, url, title, icon, shadow, infobox) {
        if(lat == 0.0) return;

        var latLng = new google.maps.LatLng(lat, lng); 
        var zIndex = 99999 + this.numMarkers;

        var markerOptions = {
            position: latLng, 
            map: this.map,
            linkURL: '',
            zIndex: zIndex
    }; 
        if(typeof icon !== "undefined" && icon.length > 0) markerOptions.icon = icon;
            else if(this.icon) markerOptions.icon = this.icon;


        if(typeof shadow !== "undefined" && shadow.length > 0) markerOptions.shadow = shadow; 
            else if(this.shadow.length > 0) markerOptions.shadow = this.shadow; 

    var marker = new google.maps.Marker(markerOptions);
    console.log(marker)
        var infowindow = new google.maps.InfoWindow({
            content: `<div class="gmaps-box" style="width: 100%;">${title}</div>`
        }); 

        if(url.length > 0) marker.linkURL = url;
        if(this.hoverBox) marker.hoverBoxTitle = title; 
            else marker.setTitle(title); 

        this.markers[this.numMarkers] = marker;
        this.numMarkers++;

        if(marker.linkURL.length > 0) {
            google.maps.event.addListener(marker, 'click', function(e) {

                infowindow.open(this.map, marker);

            }); 
        }

        if(markerOptions.icon !== "undefined" && this.iconHover) {
            var iconHover = this.iconHover; 
            google.maps.event.addListener(marker, 'mouseover', function(e) {
                marker.setIcon(iconHover); 
            });
            google.maps.event.addListener(marker, 'mouseout', function(e) {
                marker.setIcon(markerOptions.icon); 
            }); 
        }

        if(this.hoverBox) {

            var $hoverBox = this.hoverBox; 
            var offsetTop = this.hoverBoxOffsetTop;
            var offsetLeft = this.hoverBoxOffsetLeft; 

            var mouseMove = function(e) {
                $hoverBox.css({
                    'top': e.pageY + offsetTop,
                    'left': e.pageX + offsetLeft
                    });
            }; 
            google.maps.event.addListener(marker, 'mouseover', function(e) {
                this._currentURL = url;
                $hoverBox.html("<span>" + marker.hoverBoxTitle + "</span>")
                    .css('top', '0px')
                    .css('left', '0px')
                    .css('display', 'block')
                    .css('width', 'auto')
                    .css('z-index', 9999); 
                $hoverBox.show();

                $(document).mousemove(mouseMove); 
            }); 

            google.maps.event.addListener(marker, 'mouseout', function(e) {
                $hoverBox.hide();
                $(document).unbind("mousemove", mouseMove);
      });
        }
    }
    this.fitToMarkers = function() {

        var bounds = new google.maps.LatLngBounds();
        var map = this.map;

        for(var i = 0; i < this.numMarkers; i++) {  
            var latLng = this.markers[i].position; 
      bounds.extend(latLng);
    } 
        var listener = google.maps.event.addListener(map, "idle", function() { 
            if(map.getZoom() < 2) map.setZoom(2); 
            google.maps.event.removeListener(listener);
        });
  }
    this.loadCorrectBounds = function (map){
        var bounds = this.map.getBounds();
        count = 0;

        for (var i = 0; i < this.markers.length; i++) {
            var marker = this.marker[i]
            var name = this.markers[i].getAttribute("title");

            if(bounds.contains(marker.getPosition())===true) {
                count++;
                var html = `<br>${name}`
                let place = document.getElementById('markers-list')
                console.log(place)
                place.innerHTML = name
            }

        }    bindInfoWindow(marker, map, html);
    }
}

конечный результат должен быть примерно таким (https://jsfiddle.net/uv4Las28/1/), где динамический список обновляется каждый разкарта перемещена и увеличена. Я надеюсь, что вы можете мне помочь, потому что я не могу найти решение и знаю, что теряюсь в стакане воды.