Как сделать зум и смещение карты к маркеру по клике на кнопку за ее пределами?

На карту добавлены кастомные html маркеры. Есть блок с кнопкой по нажатию на которую должно произойти смещение карты и зум к маркеру, или что то из этого.

Карта:

var overlay;
function initMap() {
  var mapCenter = new google.maps.LatLng(53.469521, -2.23);

  // Styles a map in night mode.
  var map = new google.maps.Map(document.getElementById("map"), {
    center: mapCenter,
    zoom: 16,
    fullscreenControl: false,
    mapTypeControl: false,
    styles: [
      { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
      {
        featureType: "administrative.locality",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "poi",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "poi.park",
        elementType: "geometry",
        stylers: [{ color: "#263c3f" }],
      },
      {
        featureType: "poi.park",
        elementType: "labels.text.fill",
        stylers: [{ color: "#6b9a76" }],
      },
      {
        featureType: "road",
        elementType: "geometry",
        stylers: [{ color: "#38414e" }],
      },
      {
        featureType: "road",
        elementType: "geometry.stroke",
        stylers: [{ color: "#212a37" }],
      },
      {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{ color: "#9ca5b3" }],
      },
      {
        featureType: "road.highway",
        elementType: "geometry",
        stylers: [{ color: "#746855" }],
      },
      {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [{ color: "#1f2835" }],
      },
      {
        featureType: "road.highway",
        elementType: "labels.text.fill",
        stylers: [{ color: "#f3d19c" }],
      },
      {
        featureType: "transit",
        elementType: "geometry",
        stylers: [{ color: "#2f3948" }],
      },
      {
        featureType: "transit.station",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "water",
        elementType: "geometry",
        stylers: [{ color: "#17263c" }],
      },
      {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [{ color: "#515c6d" }],
      },
      {
        featureType: "water",
        elementType: "labels.text.stroke",
        stylers: [{ color: "#17263c" }],
      },
    ],
  });

  // Markers constructor
  const createHTMLMapMarker = ({ OverlayView = google.maps.OverlayView, ...args }) => {
    class HTMLMapMarker extends OverlayView {
      constructor() {
        super();
        this.latlng = args.latlng;
        this.html = args.html;
        this.setMap(args.map);
      }

      createDiv() {
        this.div = document.createElement("div");
        this.div.style.position = "absolute";
        if (this.html) {
          this.div.innerHTML = this.html;
        }
        google.maps.event.addDomListener(this.div, "click", (event) => {
          google.maps.event.trigger(this, "click");
        });
      }

      appendDivToOverlay() {
        const panes = this.getPanes();
        panes.overlayImage.appendChild(this.div);
      }

      positionDiv() {
        const point = this.getProjection().fromLatLngToDivPixel(this.latlng);
        let offset = 25;
        if (point) {
          this.div.style.left = `${point.x - offset}px`;
          this.div.style.top = `${point.y - offset}px`;
        }
      }

      draw() {
        if (!this.div) {
          this.createDiv();
          this.appendDivToOverlay();
        }
        this.positionDiv();
      }

      remove() {
        if (this.div) {
          this.div.parentNode.removeChild(this.div);
          this.div = null;
        }
      }

      getPosition() {
        return this.latlng;
      }

      getDraggable() {
        return false;
      }
    }

    return new HTMLMapMarker();
  };

  // Markers
  let marker = createHTMLMapMarker({
    latlng: new google.maps.LatLng(53.4695521, -2.2241781),
    map: map,
    html: `<a href="/event-details.html" class="get-ticket-btn">$20</a>`,
  });

  let marker2 = createHTMLMapMarker({
    latlng: new google.maps.LatLng(53.4695521, -2.2211781),
    map: map,
    html: `<a id="marker2" href="/index.html" class="get-ticket-btn">$30</a>`,
  });
  let marker3 = createHTMLMapMarker({
    latlng: new google.maps.LatLng(53.4685, -2.223),
    map: map,
    html: `<a href="/artist.html" class="get-ticket-btn">$35</a>`,
  });


  // Markers END
}