Autozoom and autocenter for Google maps Clustermap

Question

What is the best way to add auto-zoom and auto-center a google cluster maps? Currently the center and zoom is hard-coded with conflicts with dynamically generated markers.

<<div id="map"></div>
<script>

  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: -28.024, lng: 140.887}
    });

    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
    {lat: -31.563910, lng: 147.154312},
    {lat: -33.718234, lng: 150.363181},
    {lat: -33.727111, lng: 150.371124},
    {lat: -33.848588, lng: 151.209834},
    {lat: -33.851702, lng: 151.216968},
    {lat: -34.671264, lng: 150.863657},
    {lat: -35.304724, lng: 148.662905},
    {lat: -36.817685, lng: 175.699196},
    {lat: -36.828611, lng: 175.790222},
    {lat: -37.750000, lng: 145.116667},
    {lat: -37.759859, lng: 145.128708},
    {lat: -37.765015, lng: 145.133858},
    {lat: -43.999792, lng: 170.463352}
  ]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Answer 1

Add the marker locations to a google.maps.LatLngBounds object, then call map.fitBounds() on with the resulting bounds.

var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
  bounds.extend(location);
  map.fitBounds(bounds);
  //  ...

proof of concept fiddle

code snippet:

function initMap() {

   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 3,
     center: {
       lat: -28.024,
       lng: 140.887
     }
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
   var bounds = new google.maps.LatLngBounds();
   var markers = locations.map(function(location, i) {
     bounds.extend(location);
     map.fitBounds(bounds);
     return new google.maps.Marker({
       position: location,
       label: labels[i % labels.length]
     });
   });

   // Add a marker clusterer to manage the markers.
   var markerCluster = new MarkerClusterer(map, markers, {
     imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m' 
     // was  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
   });
 }
 var locations = [{
   lat: -31.563910,
   lng: 147.154312
 }, {
   lat: -33.718234,
   lng: 150.363181
 }, {
   lat: -33.727111,
   lng: 150.371124
 }, {
   lat: -33.848588,
   lng: 151.209834
 }, {
   lat: -33.851702,
   lng: 151.216968
 }, {
   lat: -34.671264,
   lng: 150.863657
 }, {
   lat: -35.304724,
   lng: 148.662905
 }, {
   lat: -36.817685,
   lng: 175.699196
 }, {
   lat: -36.828611,
   lng: 175.790222
 }, {
   lat: -37.750000,
   lng: 145.116667
 }, {
   lat: -37.759859,
   lng: 145.128708
 }, {
   lat: -37.765015,
   lng: 145.133858
 }, {
   lat: -43.999792,
   lng: 170.463352
 }]
 google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<div id="map"></div>