Google Maps (v3) “MarkerClusterer”: Add Circle to visible markers only

Question

I am trying to draw a "circle" around "visible markers only" when using the MarkerClusterer library for Google Maps v3.

The library "clusters" (groups) markers which can be used to improve performance and load time.

"MarkerClusterer" example:

I do not want to draw the circle around every marker as it takes to long and negates the benefits of the library.

I can bind a circles to markers with the javascript below.

My question is : how to bind the circle to the marker but only when the MarkerClusterer library "decides" to draw an individual marker on the map (as opposed to when it displays a cluster group instead).

    // Add circle overlay and bind to marker
    var circle = new google.maps.Circle({
        map: map,
        radius: 30.48,    // 150 feet in metres
        fillColor: '#FACC2E',
        strokeColor: '#FACC2E',
        strokeOpacity: 0.75
    });
    circle.bindTo('center', marker, 'position');

Answer 1

A Circle will not be drawn unless you set the map -property to a google.maps.Map .

So don't set the map -property and bind the map -property of circle to the map -property of marker instead:

 function init() { var randLatLng = function() { return new google.maps.LatLng(((Math.random() * 17000 - 8500) / 100), ((Math.random() * 36000 - 18000) / 100)); }, map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: { lat: 0, lng: 0 } }), markers = [], markerCluster; for (var i = 0; i < 100; i++) { (function() { var marker = new google.maps.Marker({ position: randLatLng() }), circle = new google.maps.Circle({ radius: 30.48, fillColor: '#FACC2E', strokeColor: '#000000', strokeOpacity: 0.75, strokeWeight: 20 }); circle.bindTo('center', marker, 'position'); circle.bindTo('map', marker, 'map'); markers.push(marker); })(); } markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m' }); } 

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

 <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init" async defer></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js"></script> 

Answer 2

To maintain a fast load time:

I added a zoom_changed event listener and am only drawing the circles when zoomed in further than a desired level (zoom level of 15 in my example here based on the small radius size of my circles).

I then look for markers in the current viewport and bind a circle object to each of those markers only instead of the entire dataset.

// Draw circles when zoomed in close enough - only on markers in viewport.
map.addListener('zoom_changed', function() {

    if (map.getZoom() > 15){

        for (var i=0; i<markers.length; i++){
                if( map.getBounds().contains(markers[i].getPosition()) ){

                    circle = new google.maps.Circle({
                        map: map,
                        radius: 30.48,    // 150 feet in metres
                        fillColor: '#FACC2E',
                        fillOpacity: 0.15,
                        strokeColor: '#FACC2E',
                        strokeOpacity: 0.75
                    });
                    circle.bindTo('center', markers[i], 'position');
                    circle.bindTo('map', markers[i], 'map');
                }
        }
    }
});