google maps style clusters code example

Example: google map group markers

function initMap() {
    // create the required map object.
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 3,
        center: { lat: -28.024, lng: 140.887 },
    });

    // create the required label for the markers.
    const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
    // create the required locations. 
    const locations = [
        { lat: -31.56391, 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 },
    ];

    // create the required markers.
    const markers = locations.map((location, i) => {
        return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length],
        });
    });

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