Custom Marker + Marker Clustering

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Marker</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        #map {
        height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
        height: 100%;
        margin: 0;
        padding: 0;
        }
    </style>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2" async></script>

    <script>

  function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: { lat: -28.024, lng: 140.887 },
    });

    var infowindow = new google.maps.InfoWindow();

    const markers = locations.map((location, i) => {
      var marker= new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][3]
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
        return marker;
    });


    // Add a marker clusterer to manage the markers.
    new MarkerClusterer(map, markers, {
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
    });
  }

  const locations = [
    ['Headquarter',-31.56391,147.154312,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
    ['Branch Store',-33.718234,150.363181,'http://labs.google.com/ridefinder/images/mm_20_yellow.png' ],
    ['Branch Store',-33.727111,150.371124,'http://labs.google.com/ridefinder/images/mm_20_yellow.png' ],
    ['Branch Store',-33.848588,151.209834,'http://labs.google.com/ridefinder/images/mm_20_yellow.png' ],
    ['Branch Store',-33.851702,151.216968,'http://labs.google.com/ridefinder/images/mm_20_yellow.png' ],
    ['Branch Store',-34.671264,150.863657,'http://labs.google.com/ridefinder/images/mm_20_yellow.png' ],
    ['Branch Store',-35.304724,148.662905,'http://labs.google.com/ridefinder/images/mm_20_green.png' ],
    ['Branch Store',-36.817685,175.699196,'http://labs.google.com/ridefinder/images/mm_20_green.png' ],
    ['Branch Store',-36.828611,175.790222,'http://labs.google.com/ridefinder/images/mm_20_green.png' ],
    ['Branch Store',-37.75,145.116667,'http://labs.google.com/ridefinder/images/mm_20_green.png' ],
    ['Branch Store',-37.759859,145.128708,'http://labs.google.com/ridefinder/images/mm_20_green.png' ],
    ['Branch Store',-37.765015,145.133858,'http://labs.google.com/ridefinder/images/mm_20_blue.png' ],
    ['Branch Store',-37.770104,145.143299,'http://labs.google.com/ridefinder/images/mm_20_blue.png' ],
    ['Branch Store',-37.7737,145.145187,'http://labs.google.com/ridefinder/images/mm_20_blue.png' ],
    ['Branch Store',-37.774785,145.137978,'http://labs.google.com/ridefinder/images/mm_20_blue.png' ],
    ['Branch Store',-37.819616,144.968119,'http://labs.google.com/ridefinder/images/mm_20_blue.png' ],
    ['Branch Store',-38.330766,144.695692,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-39.927193,175.053218,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-41.330162,174.865694,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-42.734358,147.439506,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-42.734358,147.501315,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-42.735258,147.438,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
    ['Branch Store',-43.999792,170.463352,'http://labs.google.com/ridefinder/images/mm_20_purple.png' ],
  ];
    </script>
  </body>
</html>