title: Add Markers to Google Maps that will go into a Marker Cluster
body: <p>I have added 4 locations that, when the page loads and you zoom out, will cluster into a group of 4.</p>
  
  <p>I have added a click event to add markers to the map. I cannot get those added markers to become a marker cluster like the 4 locations I have put into my script.</p>
  
  <p>How do I do that?</p>
  
  <pre><code>&lt;div id="mapContainer"&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"&gt;&lt;/script&gt;
  &lt;script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"&gt;&lt;/script&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbdYz0sVFHyKAMVP051D_UI1PsbxQ92n8&amp;callback=initMap"&gt;&lt;/script&gt;
  &lt;script&gt;
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 33.034405, lng: -117.292928}
      });
      // Create an array of alphabetical characters used to label the markers.
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      // Add some markers to the map.
      // Note: The code uses the JavaScript Array.prototype.map() method to
      // create an array of markers based on a given "locations" array.
      // The map() method here has nothing to do with the Google Maps API.
      var markers = locations.map(function(location, i) {
        return new google.maps.Marker({
          position: location,
          label: labels[i % labels.length]
        });
      });
  
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        marker.push({event: latLng});
      }
      //Add Marker click function
      map.addListener('click', function(event) {
        addMarker(event.latLng);
        console.log(locations);
      });
      // Add a marker cluster to manage the markers.
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
    }
    var locations = [
      {lat: 33.034405, lng: -117.292300},
      {lat: 33.020933, lng: -117.285465},
      {lat: 33.047011, lng: -117.298916},
      {lat: 33.045600, lng: -117.298309},
    ];
  &lt;/script&gt;
  </code></pre>