Google Maps Custom Tile Layer input onclick adds same layer as twice

I added gebco tiles on my google map with custom input control.

it looks like it works fine but i noticed that layer is added twice. I created a sample fiddle showing that when you click the input it adds the gebco layer twice on console.

I also added a snippet if it is better. So I couldn't figure out why it adds the layer as twice.

Any ideas how to prevent it adding the gebco layer twice?

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,
  maxZoom: 8,
  minZoom: 1,
  center: {
    lat: 0,
    lng: -0
  },
  disableDefaultUI: false,
  zoomControl: true,
  mapTypeControl: false,
  streetViewControl: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

function CenterControl(controlDiv, map) {

  // Bulut Custom Map Control
  var controlUI = document.createElement('div');
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Please Select a Weather Layer';
  controlDiv.appendChild(controlUI);

  var controlText = document.createElement('div');
  controlText.innerHTML = '<table id="otherlayers"><tbody><tr><td><input type="checkbox" id="gebco" data-opacity="1"><label for="gebco">Wind Stream</label></td></tr></tbody></table>';
  controlUI.appendChild(controlText);

$("div").on("click", "#otherlayers input[id='gebco']", function (e) {        
        setgebcolayer(this);
    });

}

var gebcoLayer =
            new google.maps.ImageMapType(
                {
                    getTileUrl: function (coord, zoom) {
                        var tilesPerGlobe = 1 << zoom;
                        var x = coord.x % tilesPerGlobe;
                        if (x < 0) {
                            x = tilesPerGlobe + x;
                        }

                        var bbox2 = tileCoordsToBBox(map, coord, zoom, 256, 256);
                        var url = "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?request=getmap&service=wms&BBOX=" + bbox2 + "&crs=EPSG:4326&format=image/png&layers=gebco_latest&width=256&height=256&version=1.3.0"
                        return url;
                    },
                    tileSize: new google.maps.Size(256, 256),
                    name: "Gebco",
                    isPng: true,
                    maxZoom: 18,
                    opacity: 0.3,
                });
                
                function setgebcolayer(control) {
        var checked = control.checked;
        if (checked == false) {
            var layername = "Gebco";
            for (_layer in map.overlayMapTypes.getArray()) {
                if (map.overlayMapTypes.getAt(_layer).name == layername) {
                    if (checked == false) {
                        map.overlayMapTypes.removeAt(_layer);
                        return;
                    }
                }
            }
        }
        map.overlayMapTypes.insertAt(0, gebcoLayer);
    }
                
                function tileCoordsToBBox(map, coord, zoom, tileWidth, tileHeight) {
    var proj = map.getProjection();
    var scale = Math.pow(2, zoom);
    var ne = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileWidth / scale, coord.y * tileHeight / scale));
    var sw = proj.fromPointToLatLng(new google.maps.Point(coord.x * tileWidth / scale, (coord.y + 1) * tileHeight / scale));

    return [
        sw.lat(),
        sw.lng(),
        ne.lat(),
        ne.lng()
    ];
};

var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);

centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);

        google.maps.event.addListener(map, "zoom_changed", function () {
            var z = map.getZoom();
            var layerArray = map.overlayMapTypes.getArray();
            console.log(layerArray);
        });

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map"></div>

from Google Maps Custom Tile Layer input onclick adds same layer as twice