can't find center to zoom into for google maps markerclusterer-CodePudding

This may have a very simple solution, but I am having trouble with it. I have a simple markerclusterer. It clusters two points:

proof of concept fiddle

code snippet:

var markers = [];
$(document).ready(function() {
  console.log("$(document).ready")

  var myOptions = {
    center: new google.maps.LatLng(40.69484947367398, -80.30684540632623), //40.445235,-80.00594
    zoom: 12
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log(map.getZoom());
  })
  var myPoints = [
    [40.67241473672653, -80.30913200196709],
    [40.67244572478815, -80.30880637497815]
  ];

  for (var i = 0; i < myPoints.length; i  ) {
    var lat = parseFloat(myPoints[i][0]);
    var lng = parseFloat(myPoints[i][1]);
    var point = new google.maps.LatLng(lat, lng);

    var marker = createMarker(point, map);
  } //end for

  var markerClusterer = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    gridSize: 50,
    maxZoom: 15,
    zoomOnClick: false // turn off the default clusterclick behavior
  });

  google.maps.event.addListener(markerClusterer, 'clusterclick', function(cluster) {
    var bounds = cluster.getBounds();
    google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
      if (map.getZoom() > 18)
        map.setZoom(18);
    });
    map.fitBounds(bounds);
  });
}); 

function createMarker(point, map) {
  // Create the HTML text based on the values passed in from XML

  var icon = {
    path: "M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z", //SVG path of awesomefont marker
    fillColor: '#BF3604', //color of the marker
    fillOpacity: 1,
    strokeWeight: 0.4,
    strokeColor: '#000000',
    scale: 0.07, //size of the marker, careful! this scale also affects anchor and labelOrigin
    anchor: new google.maps.Point(200, 510), //position of the icon, careful! this is affected by scale
    labelOrigin: new google.maps.Point(205, 190) //position of the label, careful! this is affected by scale
  }

  var marker = new google.maps.Marker({
    // id: marker_id,
    position: point,
    map: map,
    icon: icon
  });
  markers.push(marker); //add this marker to an array of all markers
}

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

#map_canvas {
  width: 100%;
  max-width: none;
  height: 100%;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>MarkerClusterer example</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>

<body>
  <div id="map_canvas"></div>
</body>

</html>