title: Google maps - Change cluster size dynamically
body: <p>In a <strong>Google maps</strong> i have <a href="https://developers.google.com/maps/documentation/javascript/marker-clustering" rel="nofollow noreferrer"><strong>markerCluster</strong></a>. In this map i try hover on a spot list and change cluster size depend if this spot exist in this cluster or not. The code looks similar to</p>
  <pre><code>clusters: null as MarkerClusterer | null,
  
      markerClusters(hoveredId?: string) { hoveredId -&gt; Is a id of hovered element
              if (this.clusters) {
                  this.clusters.clearMarkers()
              }
              const renderer = {
                  render: ({
                      count,
                      position,
                  }: {
                      count: number
                      position: google.maps.LatLng
                  }) =&gt; {
                      if (hoveredId) {
                          this.clusters?.clusters.forEach((element) =&gt; { -&gt; Return Property 'clusters' is protected and only accessible within class 'MarkerClusterer' and its subclasses, but works
                              element.markers?.forEach((element) =&gt; {
                                  if (element.id === hoveredId) {
                                      console.log(element)
                                  }
                              })
                          })
                      }
                      const svg = window.btoa(`
                      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                          &lt;g filter=&quot;url(#filter0_d_1267_6114)&quot;&gt;
                          &lt;path d=&quot;M38 20C38 28.3144 31.4784 35 23.5 35C15.5216 35 9 28.3144 9 20C9 11.6856 15.5216 5 23.5 5C31.4784 5 38 11.6856 38 20Z&quot; fill=&quot;#343434&quot; stroke=&quot;white&quot; stroke-width=&quot;2&quot;/&gt;
                          &lt;/g&gt;
                          &lt;defs&gt;
                          &lt;filter id=&quot;filter0_d_1267_6114&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;47&quot; height=&quot;48&quot; filterUnits=&quot;userSpaceOnUse&quot; color-interpolation-filters=&quot;sRGB&quot;&gt;
                          &lt;feFlood flood-opacity=&quot;0&quot; result=&quot;BackgroundImageFix&quot;/&gt;
                          &lt;feColorMatrix in=&quot;SourceAlpha&quot; type=&quot;matrix&quot; values=&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0&quot; result=&quot;hardAlpha&quot;/&gt;
                          &lt;feOffset dy=&quot;4&quot;/&gt;
                          &lt;feGaussianBlur stdDeviation=&quot;4&quot;/&gt;
                          &lt;feComposite in2=&quot;hardAlpha&quot; operator=&quot;out&quot;/&gt;
                          &lt;feColorMatrix type=&quot;matrix&quot; values=&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0&quot;/&gt;
                          &lt;feBlend mode=&quot;normal&quot; in2=&quot;BackgroundImageFix&quot; result=&quot;effect1_dropShadow_1267_6114&quot;/&gt;
                          &lt;feBlend mode=&quot;normal&quot; in=&quot;SourceGraphic&quot; in2=&quot;effect1_dropShadow_1267_6114&quot; result=&quot;shape&quot;/&gt;
                          &lt;/filter&gt;
                          &lt;/defs&gt;
                      &lt;/svg&gt;`)
                      return new google.maps.Marker({
                          position,
      
                          icon: {
                              url: `data:image/svg+xml;base64,${svg}`,
                              anchor: new google.maps.Point(23, 20),
                              labelOrigin: new google.maps.Point(23, 20),
                          },
                          label: {
                              text: count &gt; 9 ? '9+' : String(count),
                              color: '#FFF',
                              fontSize: '14px',
                              fontWeight: '600',
                          },
                          zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                      })
                  },
              }
      
              this.clusters = new MarkerClusterer({
                  renderer,
                  markers: this.clusterMarkers,
                  map: this.map,
              })
          },
  </code></pre>
  <p>So, the question is: How can i make that i want to? I think one approach is iterate all cluster values and markers id to check it. If has same id push different icons in array and and iterate, but don´t know will be work</p>