fix(examples): use advanced markers when available (#668)

Author: vicb

examples/algorithms.ts

@@ -21,7 +21,7 @@ import {
   NoopAlgorithm,
   SuperClusterAlgorithm,
 } from "../src";
-import { MAP_ID, getLoaderOptions, sync } from "./config";
+import { MAP_ID, createMarker, getLoaderOptions, sync } from "./config";
 
 import { Loader } from "@googlemaps/js-api-loader";
 import trees from "./trees.json";
@@ -63,15 +63,8 @@ new Loader(getLoaderOptions()).load().then(() => {
 
     map.controls[google.maps.ControlPosition.LEFT_TOP].push(textElement);
 
-    const markers = trees.map(
-      ({ geometry }) =>
-        new google.maps.Marker({
-          position: {
-            lat: geometry.coordinates[1],
-            lng: geometry.coordinates[0],
-          },
-          map,
-        })
+    const markers = trees.map(({ geometry }) =>
+      createMarker(map, geometry.coordinates[1], geometry.coordinates[0])
     );
 
     new MarkerClusterer({

examples/config.ts

@@ -15,6 +15,7 @@
  */
 
 import { LoaderOptions } from "@googlemaps/js-api-loader";
+import { MarkerUtils } from "../src/marker-utils";
 
 export const MAP_ID = "DEMO_MAP_ID";
 
@@ -55,3 +56,20 @@ export const sync = (...maps: google.maps.Map[]): void => {
     });
   });
 };
+
+// Creates a marker.
+//
+// Prefers advanced markers when they are available.
+export function createMarker(map: google.maps.Map, lat: number, lng: number) {
+  if (MarkerUtils.isAdvancedMarkerAvailable(map)) {
+    return new google.maps.marker.AdvancedMarkerElement({
+      map,
+      position: { lat, lng },
+    });
+  }
+
+  return new google.maps.Marker({
+    position: { lat, lng },
+    map,
+  });
+}

examples/defaults.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { MAP_ID, getLoaderOptions } from "./config";
+import { MAP_ID, createMarker, getLoaderOptions } from "./config";
 import { Loader } from "@googlemaps/js-api-loader";
 import { MarkerClusterer } from "../src";
 import trees from "./trees.json";
@@ -30,15 +30,8 @@ new Loader(getLoaderOptions()).load().then(() => {
 
   const map = new google.maps.Map(element, mapOptions);
 
-  const markers = trees.map(
-    ({ geometry }) =>
-      new google.maps.Marker({
-        position: {
-          lat: geometry.coordinates[1],
-          lng: geometry.coordinates[0],
-        },
-        map,
-      })
+  const markers = trees.map(({ geometry }) =>
+    createMarker(map, geometry.coordinates[1], geometry.coordinates[0])
   );
 
   const markerCluster = new MarkerClusterer({

examples/renderers.ts

@@ -21,7 +21,7 @@ import {
   MarkerClusterer,
   Renderer,
 } from "../src";
-import { MAP_ID, getLoaderOptions, sync } from "./config";
+import { MAP_ID, createMarker, getLoaderOptions, sync } from "./config";
 
 import { Loader } from "@googlemaps/js-api-loader";
 import { interpolateRgb } from "d3-interpolate";
@@ -108,15 +108,8 @@ new Loader(getLoaderOptions()).load().then(() => {
 
     map.controls[google.maps.ControlPosition.LEFT_TOP].push(textElement);
 
-    const markers = trees.map(
-      ({ geometry }) =>
-        new google.maps.Marker({
-          position: {
-            lat: geometry.coordinates[1],
-            lng: geometry.coordinates[0],
-          },
-          map,
-        })
+    const markers = trees.map(({ geometry }) =>
+      createMarker(map, geometry.coordinates[1], geometry.coordinates[0])
     );
 
     new MarkerClusterer({

examples/updates.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { MAP_ID, getLoaderOptions } from "./config";
+import { MAP_ID, createMarker, getLoaderOptions } from "./config";
 import { Loader } from "@googlemaps/js-api-loader";
 import { MarkerClusterer } from "../src";
 import trees from "./trees.json";
@@ -30,14 +30,8 @@ new Loader(getLoaderOptions()).load().then(async () => {
 
   const map = new google.maps.Map(element, mapOptions);
 
-  const markers = trees.map(
-    ({ geometry }) =>
-      new google.maps.Marker({
-        position: {
-          lat: geometry.coordinates[1],
-          lng: geometry.coordinates[0],
-        },
-      })
+  const markers = trees.map(({ geometry }) =>
+    createMarker(map, geometry.coordinates[1], geometry.coordinates[0])
   );
 
   const markerCluster = new MarkerClusterer({

src/marker-utils.ts

@@ -24,6 +24,13 @@ export type Marker =
   | google.maps.marker.AdvancedMarkerElement;
 
 export class MarkerUtils {
+  public static isAdvancedMarkerAvailable(map: google.maps.Map): boolean {
+    return (
+      google.maps.marker &&
+      map.getMapCapabilities().isAdvancedMarkersAvailable === true
+    );
+  }
+
   public static isAdvancedMarker(
     marker: Marker
   ): marker is google.maps.marker.AdvancedMarkerElement {

src/renderer.ts

@@ -15,7 +15,7 @@
  */
 
 import { Cluster } from "./cluster";
-import { Marker } from "./marker-utils";
+import { Marker, MarkerUtils } from "./marker-utils";
 
 /**
  * Provides statistics on all clusters in the current render cycle for use in {@link Renderer.render}.
@@ -51,7 +51,7 @@ export class ClusterStats {
 
 export interface Renderer {
   /**
-   * Turn a {@link Cluster} into a `google.maps.Marker`.
+   * Turn a {@link Cluster} into a `Marker`.
    *
    * Below is a simple example to create a marker with the number of markers in the cluster as a label.
    *
@@ -125,10 +125,8 @@ export class DefaultRenderer implements Renderer {
       // adjust zIndex to be above other markers
       zIndex: number = Number(google.maps.Marker.MAX_ZINDEX) + count;
 
-    if (
-      google.maps.marker &&
-      map.getMapCapabilities().isAdvancedMarkersAvailable
-    ) {
+    if (MarkerUtils.isAdvancedMarkerAvailable(map)) {
+      // create cluster SVG element
       const div = document.createElement("div");
       div.innerHTML = svg;
       const svgEl = div.firstElementChild;