Home > Software engineering >  How to specify custom cluster marker for a Google map
How to specify custom cluster marker for a Google map

Time:02-16

I have a Google map with markers placed, with clustering.

I'm able to easily change the marker icon with code like this:

marker = new google.maps.Marker({
    position: {
        lat: location_data.lat,
        lng: location_data.lng
    },
    map: map,
    icon: img_url   'map-marker.svg',
});

However, I'm stuck on changing the cluster icon. This code works well to do the actual clustering:

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers
});

I've found code out there suggesting this:

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers,
    renderer: {
        imagePath: img_url   'map-cluster'
    }
});

Where map-cluster is the prefix for a bunch of files e.g. map-cluster1.svg. This gives me the error: 'Uncaught TypeError: e.renderer.render is not a function'.

I've also tried this:

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers,
    renderer: {
        styles: [{
            url: img_url   'map-cluster1.svg',
        }]
    }
});

I get the same error again for this.

There are other code examples which don't seem to bear any relation to the code I'm already working with, heaps of custom objects (e.g. picture of refdocs

  • Related