Google Maps API Markerclusterer Plus set icon

Question

I'm making a google maps where the user can have an unlimited number of different categories on the map. I want to cluster each category in a differently colored cluster.

So far I'm using the google maps symbol for the individual markers, and I want to create a symbol for the marker clusters as well. From checking the reference of the marker clusterer plus. I see that it asks for image url - is there any way to use symbols instead?

thanks!

Answer 1

A symbol(in the meaning of the maps-API), basically is defined by a SVG-path.

The MarkerClusterer draws the Cluster-Icons via <img/>.

A image-src may also be a data-URI, so it's possible to draw such an symbol(SVG-document) as <img/> .

Simple implementation:

function initialize() {
        var Symbol=function(id,width,height,fill){
          var s={ 
            heart:  {
                      p:'M340.8,83C307,83,276,98.8,256,124.8c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6 L245.1,418l10.9,11l10.9-11l148.3-149.8c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z',
                      v:'0 0 512 512'
                    },
            gear:   {
                      p:'M462,280.72v-49.44l-46.414-16.48c-3.903-15.098-9.922-29.343-17.675-42.447l0.063-0.064l21.168-44.473l-34.96-34.96 l-44.471,21.167l-0.064,0.064c-13.104-7.753-27.352-13.772-42.447-17.673L280.72,50h-49.44L214.8,96.415 c-15.096,3.9-29.343,9.919-42.447,17.675l-0.064-0.066l-44.473-21.167l-34.96,34.96l21.167,44.473l0.066,0.064 c-7.755,13.104-13.774,27.352-17.675,42.447L50,231.28v49.44l46.415,16.48c3.9,15.096,9.921,29.343,17.675,42.447l-0.066,0.064 l-21.167,44.471l34.96,34.96l44.473-21.168l0.064-0.063c13.104,7.753,27.352,13.771,42.447,17.675L231.28,462h49.44l16.48-46.414 c15.096-3.903,29.343-9.922,42.447-17.675l0.064,0.063l44.471,21.168l34.96-34.96l-21.168-44.471l-0.063-0.064 c7.753-13.104,13.771-27.352,17.675-42.447L462,280.72z M256,338.4c-45.509,0-82.4-36.892-82.4-82.4c0-45.509,36.891-82.4,82.4-82.4 c45.509,0,82.4,36.891,82.4,82.4C338.4,301.509,301.509,338.4,256,338.4z',
                      v:'0 0 512 512'
                    },
            vader:  {
                      p:'M 454.5779,419.82295 328.03631,394.69439 282.01503,515.21933 210.30518,407.97233 92.539234,460.65437 117.66778,334.11278 -2.8571457,288.09151 104.38984,216.38165 51.707798,98.615703 178.2494,123.74425 224.27067,3.2193247 295.98052,110.46631 413.74648,57.784277 388.61793,184.32587 509.14286,230.34714 401.89587,302.057 z',
                      v:'0 0 512 512'
                    }
            }
          return ('data:image/svg+xml;base64,'+window.btoa('<svg xmlns="http://www.w3.org/2000/svg" height="'+height+'" viewBox="0 0 512 512" width="'+width+'" ><g><path fill="'+fill+'" d="'+s[id].p+'" /></g></svg>'));
        }
        
        
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 1,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 500; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers,{styles:[
                                                                        {width:50,height:50,url:Symbol('heart',50,50,'red')},
                                                                        {width:75,height:75,url:Symbol('gear',75,75,'green')},
                                                                        {textColor:'tomato',textSize:'18',width:100,height:100,url:Symbol('vader',100,100,'blue')}
                                                                     ]});
      }
      google.maps.event.addDomListener(window, 'load', initialize);

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

<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/src/data.json"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

The properties of the symbols are:

• p (the path)
• v (the viewBox)

Note: window.btoa is not supported by IE<10 , you'll need to implement it on your own when you need to support older IEs

Answer 2

In the past I had to deal with this.

To solve it what I did was to extend the class Cluster to add a new Google Marker as an attribute. This marker, attached at the same position as the cluster object, is the one that will show the symbol.

Remember that to avoid the overlap of your symbol and the cluster image you will have to set the opacity to 0 in the style of the clusters.

Hope it works for you.