From fbb8fa854a01f8144f4c003aad0c789d347cafc0 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Tue, 6 Jun 2023 09:29:35 -0700
Subject: [PATCH] fix(renderer): fix marker position (#667)

---
 src/renderer.ts | 42 +++++++++++-------------------------------
 1 file changed, 11 insertions(+), 31 deletions(-)

diff --git a/src/renderer.ts b/src/renderer.ts
index 515c8b9c..1b56ac3a 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -113,12 +113,13 @@ export class DefaultRenderer implements Renderer {
     const color =
       count > Math.max(10, stats.clusters.markers.mean) ? "#ff0000" : "#0000ff";
 
-    // create svg url with fill color
-    const svg = `<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
-                  <circle cx="120" cy="120" opacity=".6" r="70" />
-                  <circle cx="120" cy="120" opacity=".3" r="90" />
-                  <circle cx="120" cy="120" opacity=".2" r="110" />
-                </svg>`;
+    // create svg literal with fill color
+    const svg = `<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50">
+<circle cx="120" cy="120" opacity=".6" r="70" />
+<circle cx="120" cy="120" opacity=".3" r="90" />
+<circle cx="120" cy="120" opacity=".2" r="110" />
+<text x="50%" y="50%" style="fill:#fff" text-anchor="middle" font-size="50" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${count}</text>
+</svg>`;
 
     const title = `Cluster of ${count} markers`,
       // adjust zIndex to be above other markers
@@ -128,33 +129,17 @@ export class DefaultRenderer implements Renderer {
       google.maps.marker &&
       map.getMapCapabilities().isAdvancedMarkersAvailable
     ) {
-      // create cluster SVG element
       const div = document.createElement("div");
       div.innerHTML = svg;
       const svgEl = div.firstElementChild;
-      svgEl.setAttribute("width", "50");
-      svgEl.setAttribute("height", "50");
-
-      // create and append marker label to SVG
-      const label = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text"
-      );
-      label.setAttribute("x", "50%");
-      label.setAttribute("y", "50%");
-      label.setAttribute("style", "fill: #FFF");
-      label.setAttribute("text-anchor", "middle");
-      label.setAttribute("font-size", "50");
-      label.setAttribute("dominant-baseline", "middle");
-      label.appendChild(document.createTextNode(`${count}`));
-      svgEl.appendChild(label);
+      svgEl.setAttribute("transform", "translate(0 25)");
 
       const clusterOptions: google.maps.marker.AdvancedMarkerElementOptions = {
         map,
         position,
         zIndex,
         title,
-        content: div.firstElementChild,
+        content: svgEl,
       };
       return new google.maps.marker.AdvancedMarkerElement(clusterOptions);
     }
@@ -164,13 +149,8 @@ export class DefaultRenderer implements Renderer {
       zIndex,
       title,
       icon: {
-        url: `data:image/svg+xml;base64,${window.btoa(svg)}`,
-        scaledSize: new google.maps.Size(45, 45),
-      },
-      label: {
-        text: String(count),
-        color: "rgba(255,255,255,0.9)",
-        fontSize: "12px",
+        url: `data:image/svg+xml;base64,${btoa(svg)}`,
+        anchor: new google.maps.Point(25, 25),
       },
     };
     return new google.maps.Marker(clusterOptions);