From d61965bcbd81e0c05da132db9e9b5e91099dca31 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Thu, 24 Sep 2026 13:26:32 +0200
Subject: [PATCH 01/16] Add configurable SDK host, wmp-map sizing, and the
 loader shim

The loader shim is opt-in per sample (loaderShim flag): it replaces
callback=initMap rather than extending it.
---
 samples/samples.11tydata.js |  3 ++-
 shared/scss/_default.scss   |  8 ++++++--
 src/_includes/layout.njk    | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/samples/samples.11tydata.js b/samples/samples.11tydata.js
index 69fac1c1..4a8835c1 100644
--- a/samples/samples.11tydata.js
+++ b/samples/samples.11tydata.js
@@ -4,9 +4,10 @@ const data = {
   ..._.pick(
     {
       WOOSMAP_PUBLIC_API_KEY: "woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f",
+      WOOSMAP_SDK_HOST: "https://sdk.woosmap.com",
       ...process.env,
     },
-    ["WOOSMAP_PUBLIC_API_KEY"],
+    ["WOOSMAP_PUBLIC_API_KEY", "WOOSMAP_SDK_HOST"],
   ),
   libraries: [],
   mode: ["jsfiddle", "docs", "app", "highlight"],
diff --git a/shared/scss/_default.scss b/shared/scss/_default.scss
index 7279665b..aa3a6665 100644
--- a/shared/scss/_default.scss
+++ b/shared/scss/_default.scss
@@ -1,8 +1,12 @@
 /*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
+ * Always set the map height explicitly to define the size of the element
+ * that contains the map. `display: block` is required for <wmp-map>/<gmp-map>,
+ * which default to inline like any other custom element outside a flex/grid
+ * container (no-op for a plain <div>).
  */
 #map {
+  display: block;
+  width: 100%;
   height: 100%;
 }
 
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
index 3e8b25d8..3bf3142f 100644
--- a/src/_includes/layout.njk
+++ b/src/_includes/layout.njk
@@ -21,8 +21,38 @@
 <body>
 {% block html %}{% endblock %}
 {% block api %}
-    <script src="https://sdk.woosmap.com/map/map.js?key={{ WOOSMAP_PUBLIC_API_KEY }}&callback={{ callback }}{% if libraries|length %}&libraries={{ libraries }}{% endif %}{% if language %}&language={{ language }}{% endif %}"
+    {% if loaderShim %}
+    <script>
+    ((g) => {
+      let p;
+      const w = window, d = document;
+      const L = "importLibrary", CB = "__ib__";
+      const E = "The Woosmap Maps JavaScript API";
+      const woosmap = w.woosmap || (w.woosmap = {});
+      const maps = woosmap.map || (woosmap.map = {});
+      const libs = new Set(), params = new URLSearchParams();
+      const load = () => p || (p = new Promise((res, rej) => {
+        const s = d.createElement("script");
+        params.set("libraries", [...libs].join(","));
+        for (const k in g) params.set(k, g[k]);
+        params.set("callback", "woosmap.map." + CB);
+        s.src = "{{ WOOSMAP_SDK_HOST }}/map/map.js?" + params;
+        maps[CB] = res;
+        s.onerror = () => rej(Error(E + " could not load."));
+        s.nonce = d.querySelector("script[nonce]")?.nonce || "";
+        d.head.append(s);
+      }));
+      if (maps[L]) { console.warn(E + " only loads once. Ignoring:", g); }
+      else {
+        maps[L] = (name, ...args) =>
+          libs.add(name) && load().then(() => maps[L](name, ...args));
+      }
+    })({ key: "{{ WOOSMAP_PUBLIC_API_KEY }}" });
+    </script>
+    {% else %}
+    <script src="{{ WOOSMAP_SDK_HOST }}/map/map.js?key={{ WOOSMAP_PUBLIC_API_KEY }}&callback={{ callback }}{% if libraries|length %}&libraries={{ libraries }}{% endif %}{% if language %}&language={{ language }}{% endif %}"
             defer></script>
+    {% endif %}
 {% endblock %}
 </body>
 </html>

From a3fe5ea16f5b0811b3c4bb6d8befa7d18a983737 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Thu, 24 Sep 2026 13:26:53 +0200
Subject: [PATCH 02/16] Migrate maps-js samples to the latest API surface

InfoWindow object form, moveCamera, AdvancedMarkerElement, <wmp-map>,
and the importLibrary preload shim. Localities/multisearch/store-locator
widget samples load separate SDKs, out of scope.
---
 samples/add-map/add-map.json                  |   3 +-
 samples/add-map/index.njk                     |   2 +-
 samples/add-map/index.ts                      |  14 +--
 samples/datasets-api/datasets-api.json        |   3 +-
 samples/datasets-api/index.njk                |   2 +-
 samples/datasets-api/index.ts                 |  17 ++-
 .../directions-advanced.json                  |   4 +-
 samples/directions-advanced/index.njk         |   2 +-
 samples/directions-advanced/index.ts          |  74 ++++++-----
 .../directions-simple/directions-simple.json  |   3 +-
 samples/directions-simple/index.njk           |   2 +-
 samples/directions-simple/index.ts            |  14 +--
 .../distance-isochrone.json                   |   4 +-
 samples/distance-isochrone/index.njk          |   2 +-
 samples/distance-isochrone/index.ts           |  51 ++++----
 .../distance-matrix-advanced.json             |   4 +-
 samples/distance-matrix-advanced/index.njk    |   2 +-
 samples/distance-matrix-advanced/index.ts     |  60 +++++----
 samples/distance-matrix/distance-matrix.json  |   4 +-
 samples/distance-matrix/index.njk             |   2 +-
 samples/distance-matrix/index.ts              |  60 +++++----
 .../draw-shapes-events.json                   |   3 +-
 samples/draw-shapes-events/index.njk          |   2 +-
 samples/draw-shapes-events/index.ts           |  24 ++--
 samples/draw-shapes/draw-shapes.json          |   3 +-
 samples/draw-shapes/index.njk                 |   2 +-
 samples/draw-shapes/index.ts                  |  24 ++--
 samples/event-simple/event-simple.json        |   5 +-
 samples/event-simple/index.njk                |   2 +-
 samples/event-simple/index.ts                 |  52 ++++----
 samples/geolocation-api/geolocation-api.json  |   4 +-
 samples/geolocation-api/index.njk             |   2 +-
 samples/geolocation-api/index.ts              |  24 ++--
 samples/indoor-directions-service/index.njk   |   2 +-
 samples/indoor-directions-service/index.ts    |  21 ++--
 .../indoor-directions-service.json            |   3 +-
 samples/indoor-map-advanced/index.njk         |   2 +-
 samples/indoor-map-advanced/index.ts          |  19 ++-
 .../indoor-map-advanced.json                  |   3 +-
 samples/indoor-map-simple/index.njk           |   2 +-
 samples/indoor-map-simple/index.ts            |  19 ++-
 .../indoor-map-simple/indoor-map-simple.json  |   3 +-
 samples/indoor-navigation-widget/index.njk    |   2 +-
 samples/indoor-navigation-widget/index.ts     |  25 ++--
 .../indoor-navigation-widget.json             |   3 +-
 samples/indoor-widget-advanced/index.njk      |   2 +-
 samples/indoor-widget-advanced/index.ts       |  19 ++-
 .../indoor-widget-advanced.json               |   3 +-
 samples/indoor-widget-simple/index.njk        |   2 +-
 samples/indoor-widget-simple/index.ts         |  17 +--
 .../indoor-widget-simple.json                 |   3 +-
 samples/infowindow-simple/index.njk           |   2 +-
 samples/infowindow-simple/index.ts            |  40 +++---
 .../infowindow-simple/infowindow-simple.json  |   4 +-
 .../index.njk                                 |   2 +-
 .../index.ts                                  |  35 +++---
 .../localities-api-details-postalcodes.json   |   4 +-
 samples/localities-api-details/index.njk      |   2 +-
 samples/localities-api-details/index.ts       |  35 +++---
 .../localities-api-details.json               |   4 +-
 samples/localities-api-shape/index.njk        |   2 +-
 samples/localities-api-shape/index.ts         |  35 +++---
 .../localities-api-shape.json                 |   4 +-
 samples/localities-autocomplete/index.njk     |   2 +-
 samples/localities-autocomplete/index.ts      |  41 +++---
 .../localities-autocomplete.json              |   4 +-
 samples/localities-geocode/index.njk          |   2 +-
 samples/localities-geocode/index.ts           |  39 +++---
 .../localities-geocode.json                   |   4 +-
 samples/localities-nearby-poi/index.njk       |   2 +-
 samples/localities-nearby-poi/index.ts        |  37 +++---
 .../localities-nearby-poi.json                |   4 +-
 samples/map-clustering-geojson/index.njk      |   2 +-
 samples/map-clustering-geojson/index.ts       |  83 ++++++------
 .../map-clustering-geojson.json               |   4 +-
 samples/map-clustering-stores/index.njk       |   2 +-
 samples/map-clustering-stores/index.ts        |  83 ++++++------
 .../map-clustering-stores.json                |   4 +-
 samples/map-events/index.njk                  |   2 +-
 samples/map-events/index.ts                   |  19 ++-
 samples/map-events/map-events.json            |   3 +-
 samples/map-external-layer/index.njk          |   2 +-
 samples/map-external-layer/index.ts           |  22 ++--
 .../map-external-layer.json                   |   5 +-
 samples/map-style-lightgrey/index.njk         |   2 +-
 samples/map-style-lightgrey/index.ts          |  19 ++-
 .../map-style-lightgrey.json                  |   3 +-
 samples/map-style-night/index.njk             |   2 +-
 samples/map-style-night/index.ts              |  19 ++-
 samples/map-style-night/map-style-night.json  |   3 +-
 samples/map-style-pois/index.njk              |   2 +-
 samples/map-style-pois/index.ts               |  19 ++-
 samples/map-style-pois/map-style-pois.json    |   3 +-
 samples/map-style-retro/index.njk             |   2 +-
 samples/map-style-retro/index.ts              |  19 ++-
 samples/map-style-retro/map-style-retro.json  |   3 +-
 samples/map-type-hybrid/index.njk             |   2 +-
 samples/map-type-hybrid/index.ts              |  14 +--
 samples/map-type-hybrid/map-type-hybrid.json  |   3 +-
 samples/marker-click-event/index.njk          |   2 +-
 samples/marker-click-event/index.ts           |  57 +++++----
 .../marker-click-event.json                   |   5 +-
 samples/marker-html-css/index.njk             |   2 +-
 samples/marker-html-css/index.ts              | 119 ++++--------------
 samples/marker-html-css/marker-html-css.json  |   5 +-
 samples/marker-label/index.njk                |   2 +-
 samples/marker-label/index.ts                 |  65 +++++-----
 samples/marker-label/marker-label.json        |   5 +-
 samples/marker-simple/index.njk               |   2 +-
 samples/marker-simple/index.ts                |  40 +++---
 samples/marker-simple/marker-simple.json      |   5 +-
 samples/multisearch-map-advanced/index.njk    |   2 +-
 samples/multisearch-map-advanced/index.ts     |  44 +++----
 .../multisearch-map-advanced.json             |   4 +-
 samples/multisearch-map-simple/index.njk      |   2 +-
 samples/multisearch-map-simple/index.ts       |  39 +++---
 .../multisearch-map-simple.json               |   4 +-
 samples/react-map-basic/index.tsx             |  46 +++++--
 .../react-map-with-custom-overlay/index.tsx   |  44 ++++++-
 samples/react-map-with-localities/index.tsx   |  71 ++++++++---
 samples/render-shapes-circles/index.njk       |   2 +-
 samples/render-shapes-circles/index.ts        |   9 +-
 .../render-shapes-circles.json                |   3 +-
 samples/render-shapes-data-events/index.njk   |   2 +-
 samples/render-shapes-data-events/index.ts    |  19 ++-
 .../render-shapes-data-events.json            |   3 +-
 samples/render-shapes-data/index.njk          |   2 +-
 samples/render-shapes-data/index.ts           |  21 ++--
 .../render-shapes-data.json                   |   3 +-
 samples/render-shapes-geojson/index.njk       |   2 +-
 samples/render-shapes-geojson/index.ts        |  19 ++-
 .../render-shapes-geojson.json                |   3 +-
 samples/render-shapes-polygons/index.njk      |   2 +-
 samples/render-shapes-polygons/index.ts       |  19 ++-
 .../render-shapes-polygons.json               |   3 +-
 samples/render-shapes-polylines/index.njk     |   2 +-
 samples/render-shapes-polylines/index.ts      |  14 +--
 .../render-shapes-polylines.json              |   3 +-
 samples/stores-list-sync-map/index.njk        |   2 +-
 samples/stores-list-sync-map/index.ts         |  42 +++----
 .../stores-list-sync-map.json                 |   4 +-
 samples/stores-overlay-click-event/index.njk  |   2 +-
 samples/stores-overlay-click-event/index.ts   |  21 ++--
 .../stores-overlay-click-event.json           |   3 +-
 .../stores-overlay-query-advanced/index.njk   |   2 +-
 .../stores-overlay-query-advanced/index.ts    |  19 ++-
 .../stores-overlay-query-advanced.json        |   3 +-
 samples/stores-overlay-query/index.njk        |   2 +-
 samples/stores-overlay-query/index.ts         |  19 ++-
 .../stores-overlay-query.json                 |   3 +-
 samples/stores-overlay/index.njk              |   2 +-
 samples/stores-overlay/index.ts               |  19 ++-
 samples/stores-overlay/stores-overlay.json    |   3 +-
 samples/stores-search/index.njk               |   2 +-
 samples/stores-search/index.ts                |  35 +++---
 samples/stores-search/stores-search.json      |   4 +-
 samples/transit-advanced/index.njk            |   2 +-
 samples/transit-advanced/index.ts             |  70 ++++++-----
 .../transit-advanced/transit-advanced.json    |   4 +-
 samples/transit-roadbook/index.njk            |   2 +-
 samples/transit-roadbook/index.ts             |  70 ++++++-----
 .../transit-roadbook/transit-roadbook.json    |   4 +-
 samples/vector-map/index.njk                  |   2 +-
 samples/vector-map/index.ts                   |  14 +--
 samples/vector-map/vector-map.json            |   3 +-
 samples/w3w-autocomplete/index.njk            |   2 +-
 samples/w3w-autocomplete/index.ts             |  35 +++---
 .../w3w-autocomplete/w3w-autocomplete.json    |   4 +-
 168 files changed, 1198 insertions(+), 1173 deletions(-)

diff --git a/samples/add-map/add-map.json b/samples/add-map/add-map.json
index 89a92bbd..b9093899 100644
--- a/samples/add-map/add-map.json
+++ b/samples/add-map/add-map.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/add-map/index.njk b/samples/add-map/index.njk
index 8e3f95a0..a9b6bb9a 100644
--- a/samples/add-map/index.njk
+++ b/samples/add-map/index.njk
@@ -2,6 +2,6 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/add-map/index.ts b/samples/add-map/index.ts
index 64d12dc7..4a0ac59b 100644
--- a/samples/add-map/index.ts
+++ b/samples/add-map/index.ts
@@ -2,7 +2,9 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   // [START woosmap_add_map_instantiate_map]
   // The location of London
   const position: woosmap.map.LatLngLiteral = {
@@ -11,19 +13,15 @@ function initMap(): void {
   };
 
   // The map, centered at London
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     zoom: 13,
     center: position,
   });
   // [END woosmap_add_map_instantiate_map]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_add_map]
 
 export {};
diff --git a/samples/datasets-api/datasets-api.json b/samples/datasets-api/datasets-api.json
index 99116756..128002bf 100644
--- a/samples/datasets-api/datasets-api.json
+++ b/samples/datasets-api/datasets-api.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/datasets-api/index.njk b/samples/datasets-api/index.njk
index 7581601e..b4fac2c5 100644
--- a/samples/datasets-api/index.njk
+++ b/samples/datasets-api/index.njk
@@ -38,7 +38,7 @@
             </div>
         </div>
         <div id="mapContainer">
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="autocomplete-container">
                 {% svgIcon 'search.svg' %}
                 <input
diff --git a/samples/datasets-api/index.ts b/samples/datasets-api/index.ts
index 6c6bd0d8..476c1094 100644
--- a/samples/datasets-api/index.ts
+++ b/samples/datasets-api/index.ts
@@ -17,10 +17,14 @@ let resetButton: HTMLButtonElement;
 
 const datasetId = "a01df3d6-fe7d-42df-8fee-9f31726a2641"; //US - Seismic Hazard Map
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("drawing");
+
   // [START woosmap_datasets_api_instantiate_map]
 
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     gestureHandling: "auto",
     defaultStyle: "streets",
   });
@@ -41,7 +45,7 @@ function initServices(): void {
   datasetsService = new woosmap.map.DatasetsService(datasetId);
   datasetsOverlay.setMap(map);
 
-  localitiesService = new window.woosmap.map.LocalitiesService();
+  localitiesService = new woosmap.map.LocalitiesService();
   request = {
     input: "",
     types: ["locality", "address", "postal_code"],
@@ -332,12 +336,7 @@ function debouncePromise<T, Args extends any[]>(
 // [END woosmap_localities_autocomplete_debounce_promise] */
 PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_datasets_api]
 
 export {};
diff --git a/samples/directions-advanced/directions-advanced.json b/samples/directions-advanced/directions-advanced.json
index 6edde3f9..11c877f1 100644
--- a/samples/directions-advanced/directions-advanced.json
+++ b/samples/directions-advanced/directions-advanced.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/directions-advanced/index.njk b/samples/directions-advanced/index.njk
index abc6d73f..28884b06 100644
--- a/samples/directions-advanced/index.njk
+++ b/samples/directions-advanced/index.njk
@@ -200,7 +200,7 @@
             <div class="linear-progress hide">
                 <div class="progress"></div>
             </div>
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="infoMessage">Drag markers to update route</div>
             <div class="tableContainer">
             </div>
diff --git a/samples/directions-advanced/index.ts b/samples/directions-advanced/index.ts
index 9495c0d9..b03c8caa 100644
--- a/samples/directions-advanced/index.ts
+++ b/samples/directions-advanced/index.ts
@@ -3,7 +3,7 @@ let map: woosmap.map.Map;
 let bounds: woosmap.map.LatLngBounds;
 let directionsService: woosmap.map.DirectionsService;
 let directionsRequest: woosmap.map.DirectionRequest;
-let markersArray: woosmap.map.Marker[] = [];
+let markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 let waypointsList: HTMLElement;
 let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
@@ -15,27 +15,42 @@ const travelModeIcons = {
   CYCLING: "https://images.woosmap.com/directions/bicycle_black.png",
 };
 
+function createMarkerContent(label: string, url: string): HTMLElement {
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = "26px";
+  container.style.height = "38px";
+
+  const icon = document.createElement("img");
+  icon.src = url;
+  icon.style.width = "26px";
+  icon.style.height = "38px";
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = label;
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "13px";
+  labelSpan.style.top = "15px";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  return container;
+}
+
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
   url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+): woosmap.map.marker.AdvancedMarkerElement {
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    draggable: true,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(13, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    gmpDraggable: true,
+    content: createMarkerContent(label, url),
   });
 }
 
@@ -54,8 +69,8 @@ function displayDirectionsMarkers(): void {
     "https://images.woosmap.com/marker-blue.svg",
   );
   originMarker.addListener("dragend", () => {
-    directionsRequest.origin = originMarker.getPosition();
-    setLatLngToContainer(originContainer, originMarker.getPosition().toJSON());
+    directionsRequest.origin = originMarker.position!;
+    setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateDirections();
   });
   const destinationMarker = createMarker(
@@ -64,10 +79,10 @@ function displayDirectionsMarkers(): void {
     "https://images.woosmap.com/marker-red.svg",
   );
   destinationMarker.addListener("dragend", () => {
-    directionsRequest.destination = destinationMarker.getPosition();
+    directionsRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
       destinationContainer,
-      destinationMarker.getPosition().toJSON(),
+      destinationMarker.position!.toJSON(),
     );
     calculateDirections();
   });
@@ -83,9 +98,9 @@ function displayDirectionsMarkers(): void {
       "https://images.woosmap.com/marker-green.svg",
     );
     waypointMarker.addListener("dragend", () => {
-      waypoints[index].location = waypointMarker.getPosition().toJSON();
+      waypoints[index].location = waypointMarker.position!.toJSON();
       waypointsList.querySelectorAll("li")[index].innerHTML =
-        `<span>lat: ${waypointMarker.getPosition().lat().toFixed(4)}, lng: ${waypointMarker.getPosition().lng().toFixed(4)}<span>`;
+        `<span>lat: ${waypointMarker.position!.lat().toFixed(4)}, lng: ${waypointMarker.position!.lng().toFixed(4)}<span>`;
       calculateDirections();
     });
     markersArray.push(waypointMarker);
@@ -522,8 +537,12 @@ function initUI(): void {
   );
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: { lat: 51.5074, lng: -0.1478 },
     zoom: 10,
   });
@@ -539,12 +558,7 @@ function initMap(): void {
   calculateDirections();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_directions_advanced]
 
 export {};
diff --git a/samples/directions-simple/directions-simple.json b/samples/directions-simple/directions-simple.json
index f49c2d03..13f648bb 100644
--- a/samples/directions-simple/directions-simple.json
+++ b/samples/directions-simple/directions-simple.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/directions-simple/index.njk b/samples/directions-simple/index.njk
index 9acc3844..de2829b0 100644
--- a/samples/directions-simple/index.njk
+++ b/samples/directions-simple/index.njk
@@ -81,5 +81,5 @@
         </div>
     </div>
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/directions-simple/index.ts b/samples/directions-simple/index.ts
index d4f47aa6..2cae5741 100644
--- a/samples/directions-simple/index.ts
+++ b/samples/directions-simple/index.ts
@@ -3,10 +3,13 @@ let map: woosmap.map.Map;
 let fromSelect: HTMLSelectElement;
 let toSelect: HTMLSelectElement;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const directionsService = new woosmap.map.DirectionsService();
   const directionsRenderer = new woosmap.map.DirectionsRenderer({});
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     zoom: 7,
     center: {
       lat: 43.5,
@@ -76,12 +79,7 @@ function getSelectedLatLng(
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_directions_simple]
 
 export {};
diff --git a/samples/distance-isochrone/distance-isochrone.json b/samples/distance-isochrone/distance-isochrone.json
index 8f9c29db..c115b9d3 100644
--- a/samples/distance-isochrone/distance-isochrone.json
+++ b/samples/distance-isochrone/distance-isochrone.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/distance-isochrone/index.njk b/samples/distance-isochrone/index.njk
index 8a5da851..2c1a9df9 100644
--- a/samples/distance-isochrone/index.njk
+++ b/samples/distance-isochrone/index.njk
@@ -34,7 +34,7 @@
           >
         </div>
       </div>
-      <div id="map"></div>
+      <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/distance-isochrone/index.ts b/samples/distance-isochrone/index.ts
index ee512c1d..161d42d0 100644
--- a/samples/distance-isochrone/index.ts
+++ b/samples/distance-isochrone/index.ts
@@ -2,51 +2,51 @@
 let map: woosmap.map.Map;
 let methodSelect, modeSelect: HTMLSelectElement;
 let distanceInput: HTMLInputElement;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let polyline: woosmap.map.Polyline;
 let distanceService: woosmap.map.DistanceService;
 
-const markerIcon: woosmap.map.Icon = {
-  url: "https://images.woosmap.com/icons/pin-red.png",
-  scaledSize: {
-    height: 38,
-    width: 26,
-  },
-};
 const centerLatLng: woosmap.map.LatLngLiteral = {
   lat: 51.5,
   lng: -0.234,
 };
+function createMarkerContent(): HTMLImageElement {
+  const img = document.createElement("img");
+  img.src = "https://images.woosmap.com/icons/pin-red.png";
+  img.style.width = "26px";
+  img.style.height = "38px";
+  return img;
+}
 function createMarker(
   position: woosmap.map.LatLngLiteral,
-  icon: woosmap.map.Icon,
   map: woosmap.map.Map,
 ) {
-  const marker = new window.woosmap.map.Marker({
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position,
-    icon,
+    content: createMarkerContent(),
   });
   marker.setMap(map);
   return marker;
 }
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      zoom: 9,
-      center: centerLatLng,
-    },
-  );
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
+    zoom: 9,
+    center: centerLatLng,
+  });
   distanceService = new woosmap.map.DistanceService();
-  marker = createMarker(centerLatLng, markerIcon, map);
+  marker = createMarker(centerLatLng, map);
   map.addListener("click", (e) => {
     marker.setMap(null);
-    marker = createMarker(e.latlng, markerIcon, map);
+    marker = createMarker(e.latlng, map);
     computeIsochrone(e.latlng);
   });
   const onChangeHandler = () => {
-    computeIsochrone(marker.getPosition().toJSON());
+    computeIsochrone(marker.position!.toJSON());
   };
   methodSelect = document.getElementById(
     "isochrone-method-select",
@@ -116,12 +116,7 @@ function fitToCoordinates(
   }
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_distance_isochrone]
 
 export {};
diff --git a/samples/distance-matrix-advanced/distance-matrix-advanced.json b/samples/distance-matrix-advanced/distance-matrix-advanced.json
index c02a8e79..29b5ff95 100644
--- a/samples/distance-matrix-advanced/distance-matrix-advanced.json
+++ b/samples/distance-matrix-advanced/distance-matrix-advanced.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/distance-matrix-advanced/index.njk b/samples/distance-matrix-advanced/index.njk
index 6b63ffda..c6571f6e 100644
--- a/samples/distance-matrix-advanced/index.njk
+++ b/samples/distance-matrix-advanced/index.njk
@@ -168,7 +168,7 @@
             <div class="linear-progress hide">
                 <div class="progress"></div>
             </div>
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="errorMessage"></div>
             <div class="tableContainer">
             </div>
diff --git a/samples/distance-matrix-advanced/index.ts b/samples/distance-matrix-advanced/index.ts
index f1ae83c9..1c1eddf5 100644
--- a/samples/distance-matrix-advanced/index.ts
+++ b/samples/distance-matrix-advanced/index.ts
@@ -3,33 +3,48 @@ let map: woosmap.map.Map;
 let bounds: woosmap.map.LatLngBounds;
 let distanceService: woosmap.map.DistanceService;
 let distanceRequest: woosmap.map.distance.DistanceMatrixRequest;
-let markersArray: woosmap.map.Marker[] = [];
+let markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 let originsList: HTMLElement;
 let destinationsList: HTMLElement;
 const origins: woosmap.map.LatLngLiteral[] = [];
 const destinations: woosmap.map.LatLngLiteral[] = [];
 let line: woosmap.map.Polyline | null = null;
 
+function createMarkerContent(label: string, url: string): HTMLElement {
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = "26px";
+  container.style.height = "38px";
+
+  const icon = document.createElement("img");
+  icon.src = url;
+  icon.style.width = "26px";
+  icon.style.height = "38px";
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = label;
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "13px";
+  labelSpan.style.top = "15px";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  return container;
+}
+
 function createMarker(
   position: woosmap.map.LatLngLiteral,
   label: string,
   url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+): woosmap.map.marker.AdvancedMarkerElement {
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(13, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    content: createMarkerContent(label, url),
   });
 }
 
@@ -407,8 +422,12 @@ function initUI(): void {
   registerAddButton(".addLocation__origins", originsList, origins);
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: { lat: 51.4855, lng: -0.3179 },
     zoom: 6,
   });
@@ -419,12 +438,7 @@ function initMap(): void {
   calculateDistances();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_distance_matrix_advanced]
 
 export {};
diff --git a/samples/distance-matrix/distance-matrix.json b/samples/distance-matrix/distance-matrix.json
index 724a92f0..91eb2350 100644
--- a/samples/distance-matrix/distance-matrix.json
+++ b/samples/distance-matrix/distance-matrix.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/distance-matrix/index.njk b/samples/distance-matrix/index.njk
index e114c117..ab8eed77 100644
--- a/samples/distance-matrix/index.njk
+++ b/samples/distance-matrix/index.njk
@@ -2,7 +2,7 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-      <div id="map"></div>
+      <wmp-map id="map"></wmp-map>
       <div id="service-info">
        <div style="width: 50%;margin: 5px;">
           <h4>Request</h4>
diff --git a/samples/distance-matrix/index.ts b/samples/distance-matrix/index.ts
index f18c265c..1dc94c57 100644
--- a/samples/distance-matrix/index.ts
+++ b/samples/distance-matrix/index.ts
@@ -3,28 +3,43 @@ let map: woosmap.map.Map;
 let bounds: woosmap.map.LatLngBounds;
 let distanceService: woosmap.map.DistanceService;
 let distanceRequest: woosmap.map.distance.DistanceMatrixRequest;
-const markersArray: woosmap.map.Marker[] = [];
+const markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
+
+function createMarkerContent(label: string, url: string): HTMLElement {
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = "26px";
+  container.style.height = "38px";
+
+  const icon = document.createElement("img");
+  icon.src = url;
+  icon.style.width = "26px";
+  icon.style.height = "38px";
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = label;
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "14px";
+  labelSpan.style.top = "15px";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  return container;
+}
 
 function createMarker(
   position: woosmap.map.LatLng,
   label: string,
   url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+): woosmap.map.marker.AdvancedMarkerElement {
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(14, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    content: createMarkerContent(label, url),
   });
 }
 
@@ -91,8 +106,12 @@ function calculateDistances(): void {
   }
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: { lat: 45.53, lng: 2.4 },
     zoom: 10,
   });
@@ -101,12 +120,7 @@ function initMap(): void {
   calculateDistances();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_distance_matrix]
 
 export {};
diff --git a/samples/draw-shapes-events/draw-shapes-events.json b/samples/draw-shapes-events/draw-shapes-events.json
index 721ab647..8b239aed 100644
--- a/samples/draw-shapes-events/draw-shapes-events.json
+++ b/samples/draw-shapes-events/draw-shapes-events.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/draw-shapes-events/index.njk b/samples/draw-shapes-events/index.njk
index 0fc3a07e..51b536e4 100644
--- a/samples/draw-shapes-events/index.njk
+++ b/samples/draw-shapes-events/index.njk
@@ -1,7 +1,7 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="container">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div class="events" id="sidebar"></div>
     </div>
 {% endblock %}
diff --git a/samples/draw-shapes-events/index.ts b/samples/draw-shapes-events/index.ts
index 4d813e28..2d5c859b 100644
--- a/samples/draw-shapes-events/index.ts
+++ b/samples/draw-shapes-events/index.ts
@@ -77,19 +77,20 @@ function setupListener(name) {
   }
 }
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("drawing");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 31.54350013250679, lng: -97.13238669872247 },
       zoom: 6.5,
-    },
-  );
+    });
 
-  const draw = new window.woosmap.map.Drawing({});
+  const draw = new woosmap.map.Drawing({});
   draw.addControl(map);
 
-  window.woosmap.map.event.addListenerOnce(map, "idle", () => {
+  woosmap.map.event.addListenerOnce(map, "idle", () => {
     draw.add(data);
   });
 
@@ -103,12 +104,7 @@ function initMap() {
   }
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_draw_shapes_events]
 
 export {};
diff --git a/samples/draw-shapes/draw-shapes.json b/samples/draw-shapes/draw-shapes.json
index 2ad563f4..f076b39d 100644
--- a/samples/draw-shapes/draw-shapes.json
+++ b/samples/draw-shapes/draw-shapes.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/draw-shapes/index.njk b/samples/draw-shapes/index.njk
index cf2aa425..f1217c33 100644
--- a/samples/draw-shapes/index.njk
+++ b/samples/draw-shapes/index.njk
@@ -6,7 +6,7 @@
         </button>
     </div>
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <div class="modal-overlay closed" id="modal-overlay"></div>
     <div class="modal closed"  id="modal">
         <!-- Modal content -->
diff --git a/samples/draw-shapes/index.ts b/samples/draw-shapes/index.ts
index 8efc8e62..5068a015 100644
--- a/samples/draw-shapes/index.ts
+++ b/samples/draw-shapes/index.ts
@@ -5,17 +5,18 @@ const modal = document.getElementById("modal") as HTMLElement;
 const modalOverlay = document.getElementById("modal-overlay") as HTMLElement;
 const modalContent = document.getElementById("modal-content") as HTMLElement;
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("drawing");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       gestureHandling: "greedy",
       center: { lng: 3.878, lat: 43.611 },
       zoom: 15,
-    },
-  );
+    });
 
-  const draw = new window.woosmap.map.Drawing({});
+  const draw = new woosmap.map.Drawing({});
 
   draw.addControl(map);
 
@@ -35,7 +36,7 @@ function initMap() {
   };
 
   // Once map is loaded, load features and update them
-  window.woosmap.map.event.addListenerOnce(map, "idle", () => {
+  woosmap.map.event.addListenerOnce(map, "idle", () => {
     const data: woosmap.map.GeoJSONFeatureCollection = {
       type: "FeatureCollection",
       features: [
@@ -504,12 +505,7 @@ function initMap() {
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_draw_shapes]
 
 export {};
diff --git a/samples/event-simple/event-simple.json b/samples/event-simple/event-simple.json
index 70674f7d..ba8cf0be 100644
--- a/samples/event-simple/event-simple.json
+++ b/samples/event-simple/event-simple.json
@@ -3,7 +3,7 @@
   "description": "Sample combining map events with marker events",
   "category": "Events",
   "callback": "initMap",
-  "libraries": [],
+  "libraries": "marker",
   "tag": "event_simple",
   "name": "event-simple",
   "pagination": {
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/event-simple/index.njk b/samples/event-simple/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/event-simple/index.njk
+++ b/samples/event-simple/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/event-simple/index.ts b/samples/event-simple/index.ts
index 4688892a..682f3813 100644
--- a/samples/event-simple/index.ts
+++ b/samples/event-simple/index.ts
@@ -1,25 +1,28 @@
 // [START woosmap_event_simple]
-function initMap() {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   const position: woosmap.map.LatLngLiteral = {
     lat: 51.50940214,
     lng: -0.133012,
   };
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      zoom: 13,
-      center: position,
-    },
-  );
-  const marker = new woosmap.map.Marker({
+  const map = (document.getElementById("map") as woosmap.map.MapElement)
+    .innerMap;
+  map.setOptions({
+    zoom: 13,
+    center: position,
+  });
+
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker.png";
+  markerContent.style.width = "32px";
+  markerContent.style.height = "50px";
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: map.getCenter(),
-    icon: {
-      url: "https://images.woosmap.com/marker.png",
-      scaledSize: {
-        height: 50,
-        width: 32,
-      },
-    },
+    content: markerContent,
+    gmpClickable: true,
   });
   marker.setMap(map);
   map.addListener("click", ({ latlng }) => {
@@ -29,21 +32,12 @@ function initMap() {
     marker.setPosition(map.getCenter());
   });
   marker.addListener("click", () => {
-    marker.setIcon({
-      url: "https://images.woosmap.com/icons/pin-green.png",
-      scaledSize: {
-        height: 42,
-        width: 28,
-      },
-    });
+    markerContent.src = "https://images.woosmap.com/icons/pin-green.png";
+    markerContent.style.width = "28px";
+    markerContent.style.height = "42px";
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_event_simple]
 export {};
diff --git a/samples/geolocation-api/geolocation-api.json b/samples/geolocation-api/geolocation-api.json
index 1b3ebeb8..339bc4f7 100644
--- a/samples/geolocation-api/geolocation-api.json
+++ b/samples/geolocation-api/geolocation-api.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/geolocation-api/index.njk b/samples/geolocation-api/index.njk
index a26fa8d3..aad829a4 100644
--- a/samples/geolocation-api/index.njk
+++ b/samples/geolocation-api/index.njk
@@ -7,7 +7,7 @@
             <strong>Geolocation API Response</strong>
             <pre id="response"></pre>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/geolocation-api/index.ts b/samples/geolocation-api/index.ts
index 6bdcfd10..bd02d404 100644
--- a/samples/geolocation-api/index.ts
+++ b/samples/geolocation-api/index.ts
@@ -21,7 +21,10 @@ interface Bounds {
   southwest: woosmap.map.LatLngLiteral;
 }
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   fetch(`https://api.woosmap.com/geolocation/position/?key=${woosmap_key}`)
     .then((result) => {
       return result.json();
@@ -51,7 +54,8 @@ function renderUserLocationOnMap({ latitude, accuracy, longitude, viewport }) {
   } else if (accuracy > 1) {
     zoom = 11;
   }
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: userPosition,
     zoom,
   });
@@ -65,11 +69,12 @@ function renderUserLocationOnMap({ latitude, accuracy, longitude, viewport }) {
     map.fitBounds(bounds);
     plotBoundary(bounds);
   }
-  const marker = new woosmap.map.Marker({
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/user-position-small.png";
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: userPosition,
-    icon: {
-      url: "https://images.woosmap.com/user-position-small.png",
-    },
+    content: markerContent,
   });
   marker.setMap(map);
 }
@@ -124,12 +129,7 @@ function plotBoundary(bounds: woosmap.map.LatLngBoundsLiteral): void {
   rectangle.setMap(map);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_geolocation_api]
 
 export {};
diff --git a/samples/indoor-directions-service/index.njk b/samples/indoor-directions-service/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-directions-service/index.njk
+++ b/samples/indoor-directions-service/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-directions-service/index.ts b/samples/indoor-directions-service/index.ts
index a3566ed0..8ab3b2d3 100644
--- a/samples/indoor-directions-service/index.ts
+++ b/samples/indoor-directions-service/index.ts
@@ -4,22 +4,22 @@ let indoorDirectionsRequest: woosmap.map.IndoorDirectionRequest;
 let indoorRenderer: woosmap.map.IndoorRenderer;
 let venue: string;
 
-function initMap() {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
   venue = "gdn_doc";
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
-    },
-  );
+    });
 
   indoorRenderer = new woosmap.map.IndoorRenderer({
     venue: venue,
   });
 
   const indoorService: woosmap.map.IndoorService =
-    new window.woosmap.map.IndoorService();
+    new woosmap.map.IndoorService();
   // Indoor event that is triggered when the indoor venue is loaded.
   indoorRenderer.addListener(
     "indoor_venue_loaded",
@@ -56,12 +56,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_directions_service]
 
 export {};
diff --git a/samples/indoor-directions-service/indoor-directions-service.json b/samples/indoor-directions-service/indoor-directions-service.json
index 1fa40200..1fa6719c 100644
--- a/samples/indoor-directions-service/indoor-directions-service.json
+++ b/samples/indoor-directions-service/indoor-directions-service.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/indoor-map-advanced/index.njk b/samples/indoor-map-advanced/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-map-advanced/index.njk
+++ b/samples/indoor-map-advanced/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-map-advanced/index.ts b/samples/indoor-map-advanced/index.ts
index 69ee79b4..687f5bdc 100644
--- a/samples/indoor-map-advanced/index.ts
+++ b/samples/indoor-map-advanced/index.ts
@@ -1,14 +1,14 @@
 // [START woosmap_indoor_map_advanced]
 let map: woosmap.map.Map;
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
-    },
-  );
+    });
 
   const indoorRenderer = new woosmap.map.IndoorRenderer({
     venue: "wgs_doc",
@@ -32,12 +32,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_map_advanced]
 
 export {};
diff --git a/samples/indoor-map-advanced/indoor-map-advanced.json b/samples/indoor-map-advanced/indoor-map-advanced.json
index d418830a..3d6896fd 100644
--- a/samples/indoor-map-advanced/indoor-map-advanced.json
+++ b/samples/indoor-map-advanced/indoor-map-advanced.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/indoor-map-simple/index.njk b/samples/indoor-map-simple/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-map-simple/index.njk
+++ b/samples/indoor-map-simple/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-map-simple/index.ts b/samples/indoor-map-simple/index.ts
index 7493235c..32e07e7b 100644
--- a/samples/indoor-map-simple/index.ts
+++ b/samples/indoor-map-simple/index.ts
@@ -1,14 +1,14 @@
 // [START woosmap_indoor_map_simple]
 let map: woosmap.map.Map;
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
-    },
-  );
+    });
 
   const indoorRenderer = new woosmap.map.IndoorRenderer({
     venue: "wgs_doc",
@@ -30,12 +30,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_map_simple]
 
 export {};
diff --git a/samples/indoor-map-simple/indoor-map-simple.json b/samples/indoor-map-simple/indoor-map-simple.json
index 538ca712..d89d5bc3 100644
--- a/samples/indoor-map-simple/indoor-map-simple.json
+++ b/samples/indoor-map-simple/indoor-map-simple.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/indoor-navigation-widget/index.njk b/samples/indoor-navigation-widget/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-navigation-widget/index.njk
+++ b/samples/indoor-navigation-widget/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-navigation-widget/index.ts b/samples/indoor-navigation-widget/index.ts
index 84a78952..73dda712 100644
--- a/samples/indoor-navigation-widget/index.ts
+++ b/samples/indoor-navigation-widget/index.ts
@@ -5,12 +5,12 @@ let indoorNavigation: woosmap.map.NavigationWidget;
 let indoorService: woosmap.map.IndoorService;
 let venue: string;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   venue = "gdn_doc";
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    { center: { lat: 43.6066, lng: 3.9218 } },
-  );
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({ visualRefresh: true, center: { lat: 43.6066, lng: 3.9218 } });
 
   const conf: woosmap.map.IndoorRendererOptions = {
     venue: venue,
@@ -23,13 +23,13 @@ function initMap(): void {
 
   // Indoor event that is triggered when the indoor venue is loaded.
   indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
-    indoorService = new window.woosmap.map.IndoorService();
+    indoorService = new woosmap.map.IndoorService();
 
     const request: woosmap.map.IndoorDirectionRequest = {
       venueId: "gdn_doc",
-      origin: new window.woosmap.map.LatLng(48.8801287, 2.3548678),
+      origin: new woosmap.map.LatLng(48.8801287, 2.3548678),
       originLevel: 0,
-      destination: new window.woosmap.map.LatLng(48.8799341, 2.3563779),
+      destination: new woosmap.map.LatLng(48.8799341, 2.3563779),
       destinationLevel: 0,
       units: "metric",
       originId: null,
@@ -38,7 +38,7 @@ function initMap(): void {
     indoorService.directions(request, (response) => {
       if (response) {
         indoorRenderer.setDirections(response);
-        indoorNavigation = new window.woosmap.map.NavigationWidget(
+        indoorNavigation = new woosmap.map.NavigationWidget(
           indoorRenderer,
           exitNavigation,
         );
@@ -58,12 +58,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_navigation_widget]
 
 export {};
diff --git a/samples/indoor-navigation-widget/indoor-navigation-widget.json b/samples/indoor-navigation-widget/indoor-navigation-widget.json
index 2bbd777c..d1d7cadd 100644
--- a/samples/indoor-navigation-widget/indoor-navigation-widget.json
+++ b/samples/indoor-navigation-widget/indoor-navigation-widget.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/indoor-widget-advanced/index.njk b/samples/indoor-widget-advanced/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-widget-advanced/index.njk
+++ b/samples/indoor-widget-advanced/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-widget-advanced/index.ts b/samples/indoor-widget-advanced/index.ts
index 05ac8754..cd2a29ac 100644
--- a/samples/indoor-widget-advanced/index.ts
+++ b/samples/indoor-widget-advanced/index.ts
@@ -1,14 +1,14 @@
 // [START woosmap_indoor_widget_advanced]
 let map: woosmap.map.Map;
 
-function initMap(): void {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 5,
-    },
-  );
+    });
 
   const conf: woosmap.map.IndoorRendererOptions = {
     centerMap: false,
@@ -48,12 +48,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_widget_advanced]
 
 export {};
diff --git a/samples/indoor-widget-advanced/indoor-widget-advanced.json b/samples/indoor-widget-advanced/indoor-widget-advanced.json
index 8fbbdacd..7fae9dc7 100644
--- a/samples/indoor-widget-advanced/indoor-widget-advanced.json
+++ b/samples/indoor-widget-advanced/indoor-widget-advanced.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/indoor-widget-simple/index.njk b/samples/indoor-widget-simple/index.njk
index d261b50e..a99bcaec 100644
--- a/samples/indoor-widget-simple/index.njk
+++ b/samples/indoor-widget-simple/index.njk
@@ -6,7 +6,7 @@
             <div class="spinner"></div>
         </div>
         <!--The div element for the map -->
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/indoor-widget-simple/index.ts b/samples/indoor-widget-simple/index.ts
index 48419588..c5a6ea65 100644
--- a/samples/indoor-widget-simple/index.ts
+++ b/samples/indoor-widget-simple/index.ts
@@ -1,12 +1,12 @@
 // [START woosmap_indoor_widget_simple]
 let map: woosmap.map.Map;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   console.log("init map");
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {},
-  );
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({ visualRefresh: true });
 
   const conf: woosmap.map.IndoorRendererOptions = {
     defaultFloor: 0, //Render map with default floor
@@ -51,12 +51,7 @@ const hideLoader = () => {
   (document.querySelector(".progress") as HTMLElement).remove();
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_indoor_widget_simple]
 
 export {};
diff --git a/samples/indoor-widget-simple/indoor-widget-simple.json b/samples/indoor-widget-simple/indoor-widget-simple.json
index 502eb70b..b9edec73 100644
--- a/samples/indoor-widget-simple/indoor-widget-simple.json
+++ b/samples/indoor-widget-simple/indoor-widget-simple.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/infowindow-simple/index.njk b/samples/infowindow-simple/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/infowindow-simple/index.njk
+++ b/samples/infowindow-simple/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts
index 9f17b284..147033f4 100644
--- a/samples/infowindow-simple/index.ts
+++ b/samples/infowindow-simple/index.ts
@@ -2,18 +2,19 @@
 // This example displays a marker at the center of London.
 // When the user clicks the marker, an info window opens.
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   // The map, centered at London
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 10,
       center: {
         lat: 51.57,
         lng: -0.13,
       },
-    },
-  );
+    });
 
   const londonInfoWindowHTML =
     "<div class='info-content'>" +
@@ -22,35 +23,30 @@ function initMap(): void {
     "<p>London is the capital and largest city of England and the United Kingdom. <a href='https://en.wikipedia.org/wiki/London'>Wikipedia →</a></p>" +
     "</div>";
 
-  const marker = new window.woosmap.map.Marker({
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker.png";
+  markerContent.style.width = "32px";
+  markerContent.style.height = "50px";
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: {
       lat: 51.515,
       lng: -0.13,
     },
-    icon: {
-      url: "https://images.woosmap.com/marker.png",
-      scaledSize: {
-        height: 50,
-        width: 32,
-      },
-    },
+    content: markerContent,
+    gmpClickable: true,
     map,
   });
   const infoWindow = new woosmap.map.InfoWindow({});
   infoWindow.setOffset(new woosmap.map.Point(0, -50));
   infoWindow.setContent(londonInfoWindowHTML);
-  infoWindow.open(map, marker.position);
+  infoWindow.open({map, anchor: marker.position});
   marker.addListener("click", () => {
-    infoWindow.open(map, marker.getPosition());
+    infoWindow.open({map, anchor: marker.position});
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_infowindow_simple]
 
 export {};
diff --git a/samples/infowindow-simple/infowindow-simple.json b/samples/infowindow-simple/infowindow-simple.json
index 57b6c7f2..157e6da6 100644
--- a/samples/infowindow-simple/infowindow-simple.json
+++ b/samples/infowindow-simple/infowindow-simple.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-api-details-postalcodes/index.njk b/samples/localities-api-details-postalcodes/index.njk
index 92d43045..b478bb69 100644
--- a/samples/localities-api-details-postalcodes/index.njk
+++ b/samples/localities-api-details-postalcodes/index.njk
@@ -2,7 +2,7 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div id="autocomplete-container">
             {% svgIcon 'search.svg' %}
             <input
diff --git a/samples/localities-api-details-postalcodes/index.ts b/samples/localities-api-details-postalcodes/index.ts
index 9b6b11fe..5d80c286 100644
--- a/samples/localities-api-details-postalcodes/index.ts
+++ b/samples/localities-api-details-postalcodes/index.ts
@@ -9,7 +9,7 @@ let debouncedAutocomplete: (
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
-let markerAddress: woosmap.map.Marker;
+let markerAddress: woosmap.map.marker.AdvancedMarkerElement;
 
 function init(): void {
   if (inputElement && suggestionsList) {
@@ -34,8 +34,12 @@ function init(): void {
   debouncedAutocomplete = debouncePromise(autocompleteAddress, 0);
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: {
       lat: 48.8534,
       lng: 2.3488,
@@ -172,15 +176,14 @@ function createAddressMarker(
     markerAddress.setMap(null);
   }
   if (addressDetail && addressDetail.geometry) {
-    markerAddress = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "37px";
+    markerContent.style.height = "59px";
+
+    markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: addressDetail.geometry.location,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 59,
-          width: 37,
-        },
-      },
+      content: markerContent,
     });
     markerAddress.setMap(map);
     panMap(addressDetail);
@@ -211,8 +214,7 @@ function panMap(addressDetail: woosmap.map.localities.LocalitiesDetailsResult) {
     if (addressDetail.types[0] === "address") {
       zoom = 18;
     }
-    map.setZoom(zoom);
-    map.panTo(geometry.location);
+    map.moveCamera({ zoom, center: geometry.location });
   }
 }
 
@@ -309,12 +311,7 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_localities_api_details_postalcodes]
 
 export {};
diff --git a/samples/localities-api-details-postalcodes/localities-api-details-postalcodes.json b/samples/localities-api-details-postalcodes/localities-api-details-postalcodes.json
index 6ea08756..f656821f 100644
--- a/samples/localities-api-details-postalcodes/localities-api-details-postalcodes.json
+++ b/samples/localities-api-details-postalcodes/localities-api-details-postalcodes.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-api-details/index.njk b/samples/localities-api-details/index.njk
index a8e5c97a..0e58dba7 100644
--- a/samples/localities-api-details/index.njk
+++ b/samples/localities-api-details/index.njk
@@ -10,7 +10,7 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div class="addressDetails">
             <div class="addressOptions"></div>
         </div>
diff --git a/samples/localities-api-details/index.ts b/samples/localities-api-details/index.ts
index d099d552..54bf89fb 100644
--- a/samples/localities-api-details/index.ts
+++ b/samples/localities-api-details/index.ts
@@ -9,12 +9,16 @@ let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
-let markerAddress: woosmap.map.Marker;
+let markerAddress: woosmap.map.marker.AdvancedMarkerElement;
 let detailsHTML: HTMLElement;
 let addressDetailsContainer: HTMLElement;
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: {
       lat: 48.8534,
       lng: 2.3488,
@@ -40,15 +44,14 @@ function createAddressMarker(
     markerAddress.setMap(null);
   }
   if (addressDetail && addressDetail.geometry) {
-    markerAddress = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "37px";
+    markerContent.style.height = "59px";
+
+    markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: addressDetail.geometry.location,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 59,
-          width: 37,
-        },
-      },
+      content: markerContent,
     });
     markerAddress.setMap(map);
     panMap(addressDetail);
@@ -425,8 +428,7 @@ function panMap(addressDetail: woosmap.map.localities.LocalitiesDetailsResult) {
     if (addressDetail.types[0] === "address") {
       zoom = 18;
     }
-    map.setZoom(zoom);
-    map.panTo(geometry.location);
+    map.moveCamera({ zoom, center: geometry.location });
   }
 }
 
@@ -442,12 +444,7 @@ function getLocalitiesDetails(
   ).then((response) => response.json());
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 
 // [END woosmap_localities_api_details]
 
diff --git a/samples/localities-api-details/localities-api-details.json b/samples/localities-api-details/localities-api-details.json
index a68ed41a..de1d80b8 100644
--- a/samples/localities-api-details/localities-api-details.json
+++ b/samples/localities-api-details/localities-api-details.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-api-shape/index.njk b/samples/localities-api-shape/index.njk
index 8b2f31e0..c1be78f8 100644
--- a/samples/localities-api-shape/index.njk
+++ b/samples/localities-api-shape/index.njk
@@ -12,7 +12,7 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div class="addressDetails">
             <div class="addressOptions"></div>
         </div>
diff --git a/samples/localities-api-shape/index.ts b/samples/localities-api-shape/index.ts
index e4833126..d3c5d0dc 100644
--- a/samples/localities-api-shape/index.ts
+++ b/samples/localities-api-shape/index.ts
@@ -9,13 +9,17 @@ let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
-let markerAddress: woosmap.map.Marker;
+let markerAddress: woosmap.map.marker.AdvancedMarkerElement;
 let detailsHTML: HTMLElement;
 let addressDetailsContainer: HTMLElement;
 let hasShape = false;
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: {
       lat: 48.8534,
       lng: 2.3488,
@@ -58,15 +62,14 @@ function createAddressMarker(addressDetail) {
   }
   if (addressDetail?.geometry) {
     const position = addressDetail.geometry.location;
-    markerAddress = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "37px";
+    markerContent.style.height = "59px";
+
+    markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: position,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 59,
-          width: 37,
-        },
-      },
+      content: markerContent,
     });
     markerAddress.setMap(map);
 
@@ -448,8 +451,7 @@ function panMap(addressDetail: woosmap.map.localities.LocalitiesDetailsResult) {
     if (addressDetail.types[0] === "address") {
       zoom = 18;
     }
-    map.setZoom(zoom);
-    map.panTo(geometry.location);
+    map.moveCamera({ zoom, center: geometry.location });
   }
 }
 
@@ -466,12 +468,7 @@ function getLocalitiesDetails(
   ).then((response) => response.json());
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 
 // [END woosmap_localities_api_shape]
 
diff --git a/samples/localities-api-shape/localities-api-shape.json b/samples/localities-api-shape/localities-api-shape.json
index 7aba6240..80478a4d 100644
--- a/samples/localities-api-shape/localities-api-shape.json
+++ b/samples/localities-api-shape/localities-api-shape.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-autocomplete/index.njk b/samples/localities-autocomplete/index.njk
index b71ca6e9..ba60a75d 100644
--- a/samples/localities-autocomplete/index.njk
+++ b/samples/localities-autocomplete/index.njk
@@ -16,7 +16,7 @@
             <ul id="suggestions-list"></ul>
         </div>
 
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/localities-autocomplete/index.ts b/samples/localities-autocomplete/index.ts
index 311bb479..d2a2a4ab 100644
--- a/samples/localities-autocomplete/index.ts
+++ b/samples/localities-autocomplete/index.ts
@@ -1,21 +1,22 @@
 // [START woosmap_localities_autocomplete]
 let map: woosmap.map.Map;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let infoWindow: woosmap.map.InfoWindow;
 let localitiesService: woosmap.map.LocalitiesService;
 let request: woosmap.map.localities.LocalitiesAutocompleteRequest;
 let debouncedLocalitiesAutocomplete: (...args: any[]) => Promise<any>;
 
-function initMap(): void {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
-    },
-  );
+    });
   infoWindow = new woosmap.map.InfoWindow({});
-  localitiesService = new window.woosmap.map.LocalitiesService();
+  localitiesService = new woosmap.map.LocalitiesService();
 
   request = {
     input: "",
@@ -90,19 +91,18 @@ function displayLocality(
     infoWindow.close();
   }
   if (locality?.geometry) {
-    marker = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "32px";
+    markerContent.style.height = "50px";
+
+    marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: locality.geometry.location,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 50,
-          width: 32,
-        },
-      },
+      content: markerContent,
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
-    infoWindow.open(map, marker);
+    infoWindow.open({map, anchor: marker.position});
     map.flyTo({ center: locality.geometry.location, zoom: 14 });
   }
 }
@@ -184,12 +184,7 @@ function debouncePromise<T, Args extends any[]>(
 // [END woosmap_localities_autocomplete_debounce_promise] */
 PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_localities_autocomplete]
 
 export {};
diff --git a/samples/localities-autocomplete/localities-autocomplete.json b/samples/localities-autocomplete/localities-autocomplete.json
index 0085c6e6..45ca3225 100644
--- a/samples/localities-autocomplete/localities-autocomplete.json
+++ b/samples/localities-autocomplete/localities-autocomplete.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-geocode/index.njk b/samples/localities-geocode/index.njk
index 917d06e4..c93154e3 100644
--- a/samples/localities-geocode/index.njk
+++ b/samples/localities-geocode/index.njk
@@ -39,7 +39,7 @@
             </details>
         </aside>
 
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/localities-geocode/index.ts b/samples/localities-geocode/index.ts
index 1a1c4f0a..4f44f88c 100644
--- a/samples/localities-geocode/index.ts
+++ b/samples/localities-geocode/index.ts
@@ -1,19 +1,20 @@
 // [START woosmap_localities_geocode]
 // Initialize and add the map
 let map: woosmap.map.Map;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let infoWindow: woosmap.map.InfoWindow;
 let localitiesService: woosmap.map.LocalitiesService;
 const request: woosmap.map.localities.LocalitiesGeocodeRequest = {};
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 12,
-    },
-  );
+    });
   infoWindow = new woosmap.map.InfoWindow({});
   localitiesService = new woosmap.map.LocalitiesService();
   map.addListener("click", (e) => {
@@ -79,19 +80,18 @@ function displayLocality(
   }
 
   if (locality?.geometry) {
-    marker = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "32px";
+    markerContent.style.height = "50px";
+
+    marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: locality.geometry.location,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 50,
-          width: 32,
-        },
-      },
+      content: markerContent,
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
-    infoWindow.open(map, marker);
+    infoWindow.open({map, anchor: marker.position});
     map.setCenter(locality.geometry.location);
     renderResponse(locality);
   }
@@ -211,12 +211,7 @@ function clearResponse() {
   if (rawEl) rawEl.textContent = "";
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_localities_geocode]
 
 export {};
diff --git a/samples/localities-geocode/localities-geocode.json b/samples/localities-geocode/localities-geocode.json
index bb180d0c..314e3e12 100644
--- a/samples/localities-geocode/localities-geocode.json
+++ b/samples/localities-geocode/localities-geocode.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/localities-nearby-poi/index.njk b/samples/localities-nearby-poi/index.njk
index 02476f91..7a36c1d0 100644
--- a/samples/localities-nearby-poi/index.njk
+++ b/samples/localities-nearby-poi/index.njk
@@ -34,7 +34,7 @@
                 <ul id="suggestions-list"></ul>
             </div>
 
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
         </div>
     </div>
 
diff --git a/samples/localities-nearby-poi/index.ts b/samples/localities-nearby-poi/index.ts
index 09c65e9b..39c129d7 100644
--- a/samples/localities-nearby-poi/index.ts
+++ b/samples/localities-nearby-poi/index.ts
@@ -66,7 +66,7 @@ const types: Set<string> = new Set();
 let map: woosmap.map.Map;
 let results: HTMLOListElement;
 let nearbyCircle: woosmap.map.Circle;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let localitiesService: woosmap.map.LocalitiesService;
 let autocompleteRequest: woosmap.map.localities.LocalitiesAutocompleteRequest;
 let nearbyRequest: woosmap.map.localities.LocalitiesNearbyRequest;
@@ -113,10 +113,12 @@ const createList = (node: any, prefix = "") => {
   return ul.childElementCount ? ul : null;
 };
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 40.71399, lng: -74.00499 },
       zoom: 14,
       styles: [
@@ -130,8 +132,7 @@ function initMap() {
           ],
         },
       ],
-    },
-  );
+    });
   localitiesService = new woosmap.map.LocalitiesService();
 
   map.addListener("click", (e) => {
@@ -149,15 +150,14 @@ function initMap() {
     page: 1,
     limit: 10,
   };
-  marker = new woosmap.map.Marker({
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker.png";
+  markerContent.style.width = "32px";
+  markerContent.style.height = "50px";
+
+  marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: { lat: 0, lng: 0 },
-    icon: {
-      url: "https://images.woosmap.com/marker.png",
-      scaledSize: {
-        height: 50,
-        width: 32,
-      },
-    },
+    content: markerContent,
   });
 
   initUI();
@@ -521,12 +521,7 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_localities_nearby_poi]
 
 export {};
diff --git a/samples/localities-nearby-poi/localities-nearby-poi.json b/samples/localities-nearby-poi/localities-nearby-poi.json
index 4ffe9e67..1a3afb5f 100644
--- a/samples/localities-nearby-poi/localities-nearby-poi.json
+++ b/samples/localities-nearby-poi/localities-nearby-poi.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/map-clustering-geojson/index.njk b/samples/map-clustering-geojson/index.njk
index 8e3f95a0..a9b6bb9a 100644
--- a/samples/map-clustering-geojson/index.njk
+++ b/samples/map-clustering-geojson/index.njk
@@ -2,6 +2,6 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/map-clustering-geojson/index.ts b/samples/map-clustering-geojson/index.ts
index fb6ba595..df80c308 100644
--- a/samples/map-clustering-geojson/index.ts
+++ b/samples/map-clustering-geojson/index.ts
@@ -5,7 +5,7 @@ import Supercluster from "supercluster";
 let map: woosmap.map.Map;
 let infoWindow: woosmap.map.InfoWindow;
 let index: Supercluster;
-let markers: woosmap.map.Marker[] = [];
+let markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
 const GEOJSON_URL = "https://demo.woosmap.com/misc/data/uk-all-pubs.geojson";
 const ICON_URL = "https://images.woosmap.com/dot-green.svg"; //
 const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
@@ -15,11 +15,13 @@ const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
   minPoints: 5,
 };
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   infoWindow = new woosmap.map.InfoWindow({});
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: {
         lat: 55.5,
         lng: -4,
@@ -93,8 +95,7 @@ function initMap(): void {
           stylers: [{ color: "#9e9e9e" }],
         },
       ],
-    },
-  );
+    });
 
   fetchGeoJsonData(GEOJSON_URL).then((data) => {
     const geojsonFeatures = data["features"];
@@ -144,7 +145,7 @@ function clearMarkers(): void {
 function createClusterIcon(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
+): woosmap.map.marker.AdvancedMarkerElement {
   if (!feature.properties.cluster) {
     return createMarker(feature, latlng);
   }
@@ -154,7 +155,7 @@ function createClusterIcon(
 function createCluster(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
+): woosmap.map.marker.AdvancedMarkerElement {
   const count = feature.properties.point_count;
   const color = count < 80 ? "#0B9D58" : count < 500 ? "#F5B300" : "#DA0A40";
 
@@ -167,16 +168,32 @@ function createCluster(
   <circle cx="120" cy="120" opacity=".2" r="110" />
 </svg>`);
 
-  const marker = new window.woosmap.map.Marker({
-    label: {
-      text: feature.properties["point_count_abbreviated"],
-      color: "white",
-    },
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = `${size}px`;
+  container.style.height = `${size}px`;
+
+  const icon = document.createElement("img");
+  icon.src = `data:image/svg+xml;base64,${svg}`;
+  icon.style.width = `${size}px`;
+  icon.style.height = `${size}px`;
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = feature.properties["point_count_abbreviated"];
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "50%";
+  labelSpan.style.top = "50%";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: latlng,
-    icon: {
-      url: `data:image/svg+xml;base64,${svg}`,
-      scaledSize: new window.woosmap.map.Size(size, size),
-    },
+    content: container,
+    gmpClickable: true,
     map: map,
   });
   marker.addListener("click", (e) => {
@@ -184,8 +201,7 @@ function createCluster(
     const expansionZoom = index.getClusterExpansionZoom(
       feature.properties["cluster_id"],
     );
-    map.setCenter(marker.getPosition());
-    map.setZoom(expansionZoom);
+    map.moveCamera({ center: marker.position!, zoom: expansionZoom });
   });
   return marker;
 }
@@ -193,21 +209,21 @@ function createCluster(
 function createMarker(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
-  const marker = new window.woosmap.map.Marker({
-    icon: {
-      url: ICON_URL,
-      scaledSize: {
-        height: 20,
-        width: 20,
-      },
-    },
+): woosmap.map.marker.AdvancedMarkerElement {
+  const markerContent = document.createElement("img");
+  markerContent.src = ICON_URL;
+  markerContent.style.width = "20px";
+  markerContent.style.height = "20px";
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: latlng,
+    content: markerContent,
+    gmpClickable: true,
     map: map,
   });
   marker.addListener("click", () => {
     infoWindow.setContent(`<h3>${feature.properties.name}</h3>`);
-    infoWindow.open(map, marker);
+    infoWindow.open({map, anchor: marker.position});
   });
   return marker;
 }
@@ -226,12 +242,7 @@ function debounce<T extends (...args: any[]) => ReturnType<T>>(
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_clustering_geojson]
 
 export {};
diff --git a/samples/map-clustering-geojson/map-clustering-geojson.json b/samples/map-clustering-geojson/map-clustering-geojson.json
index fea98971..71631027 100644
--- a/samples/map-clustering-geojson/map-clustering-geojson.json
+++ b/samples/map-clustering-geojson/map-clustering-geojson.json
@@ -15,5 +15,7 @@
     "supercluster",
     "@types/supercluster",
     "@types/geojson"
-  ]
+  ],
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/map-clustering-stores/index.njk b/samples/map-clustering-stores/index.njk
index 8e3f95a0..a9b6bb9a 100644
--- a/samples/map-clustering-stores/index.njk
+++ b/samples/map-clustering-stores/index.njk
@@ -2,6 +2,6 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/map-clustering-stores/index.ts b/samples/map-clustering-stores/index.ts
index 520ddf7d..dda057f5 100644
--- a/samples/map-clustering-stores/index.ts
+++ b/samples/map-clustering-stores/index.ts
@@ -5,7 +5,7 @@ import Supercluster from "supercluster";
 let map: woosmap.map.Map;
 let infoWindow: woosmap.map.InfoWindow;
 let index: Supercluster;
-let markers: woosmap.map.Marker[] = [];
+let markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
 const ICON_URL = "https://images.woosmap.com/dot-green.svg"; //
 const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
   radius: 30,
@@ -14,11 +14,13 @@ const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
   minPoints: 2,
 };
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   infoWindow = new woosmap.map.InfoWindow({});
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 53.3485, lng: -6.257 },
       zoom: 12,
       styles: [
@@ -89,8 +91,7 @@ function initMap(): void {
           stylers: [{ color: "#9e9e9e" }],
         },
       ],
-    },
-  );
+    });
 
   getAllStores().then((stores) => {
     index = new Supercluster(SUPERCLUSTER_OPTIONS).load(stores);
@@ -165,7 +166,7 @@ function clearMarkers(): void {
 function createClusterIcon(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
+): woosmap.map.marker.AdvancedMarkerElement {
   if (!feature.properties.cluster) {
     return createMarker(feature, latlng);
   }
@@ -175,7 +176,7 @@ function createClusterIcon(
 function createCluster(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
+): woosmap.map.marker.AdvancedMarkerElement {
   const count = feature.properties.point_count;
   const color = count < 5 ? "#0B9D58" : count < 12 ? "#F5B300" : "#DA0A40";
 
@@ -188,16 +189,32 @@ function createCluster(
   <circle cx="120" cy="120" opacity=".2" r="110" />
 </svg>`);
 
-  const marker = new window.woosmap.map.Marker({
-    label: {
-      text: feature.properties["point_count_abbreviated"],
-      color: "white",
-    },
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = `${size}px`;
+  container.style.height = `${size}px`;
+
+  const icon = document.createElement("img");
+  icon.src = `data:image/svg+xml;base64,${svg}`;
+  icon.style.width = `${size}px`;
+  icon.style.height = `${size}px`;
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = feature.properties["point_count_abbreviated"];
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "50%";
+  labelSpan.style.top = "50%";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: latlng,
-    icon: {
-      url: `data:image/svg+xml;base64,${svg}`,
-      scaledSize: new window.woosmap.map.Size(size, size),
-    },
+    content: container,
+    gmpClickable: true,
     map: map,
   });
   marker.addListener("click", (e) => {
@@ -205,8 +222,7 @@ function createCluster(
     const expansionZoom = index.getClusterExpansionZoom(
       feature.properties["cluster_id"],
     );
-    map.setCenter(marker.getPosition());
-    map.setZoom(expansionZoom);
+    map.moveCamera({ center: marker.position!, zoom: expansionZoom });
   });
   return marker;
 }
@@ -214,21 +230,21 @@ function createCluster(
 function createMarker(
   feature: any,
   latlng: woosmap.map.LatLngLiteral,
-): woosmap.map.Marker {
-  const marker = new window.woosmap.map.Marker({
-    icon: {
-      url: ICON_URL,
-      scaledSize: {
-        height: 20,
-        width: 20,
-      },
-    },
+): woosmap.map.marker.AdvancedMarkerElement {
+  const markerContent = document.createElement("img");
+  markerContent.src = ICON_URL;
+  markerContent.style.width = "20px";
+  markerContent.style.height = "20px";
+
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: latlng,
+    content: markerContent,
+    gmpClickable: true,
     map: map,
   });
   marker.addListener("click", () => {
     infoWindow.setContent(`<h3>${feature.properties.name}</h3>`);
-    infoWindow.open(map, marker);
+    infoWindow.open({map, anchor: marker.position});
   });
   return marker;
 }
@@ -247,12 +263,7 @@ function debounce<T extends (...args: any[]) => ReturnType<T>>(
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_clustering_stores]
 
 export {};
diff --git a/samples/map-clustering-stores/map-clustering-stores.json b/samples/map-clustering-stores/map-clustering-stores.json
index 96ad8684..44b2c803 100644
--- a/samples/map-clustering-stores/map-clustering-stores.json
+++ b/samples/map-clustering-stores/map-clustering-stores.json
@@ -16,5 +16,7 @@
     "supercluster",
     "@types/supercluster",
     "@types/geojson"
-  ]
+  ],
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/map-events/index.njk b/samples/map-events/index.njk
index 0fc3a07e..51b536e4 100644
--- a/samples/map-events/index.njk
+++ b/samples/map-events/index.njk
@@ -1,7 +1,7 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="container">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div class="events" id="sidebar"></div>
     </div>
 {% endblock %}
diff --git a/samples/map-events/index.ts b/samples/map-events/index.ts
index faadf843..688b790e 100644
--- a/samples/map-events/index.ts
+++ b/samples/map-events/index.ts
@@ -15,17 +15,17 @@ const events: string[] = [
   "zoom_changed",
 ];
 
-function initMap(): void {
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: {
         lat: 51.52,
         lng: -0.13,
       },
       zoom: 10,
-    },
-  );
+    });
 
   populateEventsTable();
   events.forEach((event: string) => {
@@ -54,11 +54,6 @@ function setupListener(name: string): void {
   }
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_events]
 export {};
diff --git a/samples/map-events/map-events.json b/samples/map-events/map-events.json
index c6fc1b0e..96f7a050 100644
--- a/samples/map-events/map-events.json
+++ b/samples/map-events/map-events.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/map-external-layer/index.njk b/samples/map-external-layer/index.njk
index 6f6577d4..e3444824 100644
--- a/samples/map-external-layer/index.njk
+++ b/samples/map-external-layer/index.njk
@@ -39,7 +39,7 @@
           </div>
         </label>
       </div>
-      <div id="map"></div>
+      <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/map-external-layer/index.ts b/samples/map-external-layer/index.ts
index 63d387f3..7e365e5f 100644
--- a/samples/map-external-layer/index.ts
+++ b/samples/map-external-layer/index.ts
@@ -12,16 +12,16 @@ const centerLatLng: woosmap.map.LatLngLiteral = {
   lng: 6.073999,
 };
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 15.64,
       center: centerLatLng,
       mapTypeControl: true,
       styles: STYLE_PRESETS.lightgrey,
-    },
-  );
+    });
 
   styleSelect = document.getElementById(
     "woosmap-style-select",
@@ -75,9 +75,10 @@ function onOpacityChange() {
 
 function applyStyle(name: string) {
   const styles = STYLE_PRESETS[name] ?? [];
-  map = new window.woosmap.map.Map(
+  map = new woosmap.map.Map(
     document.getElementById("map") as HTMLElement,
     {
+      visualRefresh: true,
       zoom: map.getZoom(),
       center: map.getCenter(),
       mapTypeControl: true,
@@ -421,12 +422,7 @@ const LAYER_VIEWS: Record<string, { center: { lat: number; lng: number }; zoom:
   precipitation: US_VIEW,
 };
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_external_layer]
 
 export {};
diff --git a/samples/map-external-layer/map-external-layer.json b/samples/map-external-layer/map-external-layer.json
index 45c1b61d..320f307a 100644
--- a/samples/map-external-layer/map-external-layer.json
+++ b/samples/map-external-layer/map-external-layer.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
-}
\ No newline at end of file
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
+}
diff --git a/samples/map-style-lightgrey/index.njk b/samples/map-style-lightgrey/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/map-style-lightgrey/index.njk
+++ b/samples/map-style-lightgrey/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/map-style-lightgrey/index.ts b/samples/map-style-lightgrey/index.ts
index 87d75992..d4590743 100644
--- a/samples/map-style-lightgrey/index.ts
+++ b/samples/map-style-lightgrey/index.ts
@@ -1,10 +1,11 @@
 // [START woosmap_map_style_lightgrey]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const position: woosmap.map.LatLngLiteral = { lat: 41.347, lng: 2.14566 };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 12,
       center: position,
       styles: [
@@ -75,16 +76,10 @@ function initMap(): void {
           stylers: [{ color: "#9e9e9e" }],
         },
       ],
-    },
-  );
+    });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_style_lightgrey]
 
 export {};
diff --git a/samples/map-style-lightgrey/map-style-lightgrey.json b/samples/map-style-lightgrey/map-style-lightgrey.json
index 31d74820..941c3e97 100644
--- a/samples/map-style-lightgrey/map-style-lightgrey.json
+++ b/samples/map-style-lightgrey/map-style-lightgrey.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/map-style-night/index.njk b/samples/map-style-night/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/map-style-night/index.njk
+++ b/samples/map-style-night/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/map-style-night/index.ts b/samples/map-style-night/index.ts
index 1578c333..7e807cf0 100644
--- a/samples/map-style-night/index.ts
+++ b/samples/map-style-night/index.ts
@@ -1,13 +1,14 @@
 // [START woosmap_map_style_night]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const position: woosmap.map.LatLngLiteral = {
     lat: 48.85467879441348,
     lng: 2.3482787190654792,
   };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 15,
       center: position,
       styles: [
@@ -99,16 +100,10 @@ function initMap(): void {
           stylers: [{ color: "#17263c" }],
         },
       ],
-    },
-  );
+    });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_style_night]
 
 export {};
diff --git a/samples/map-style-night/map-style-night.json b/samples/map-style-night/map-style-night.json
index 70bfbb0b..18743a88 100644
--- a/samples/map-style-night/map-style-night.json
+++ b/samples/map-style-night/map-style-night.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/map-style-pois/index.njk b/samples/map-style-pois/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/map-style-pois/index.njk
+++ b/samples/map-style-pois/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/map-style-pois/index.ts b/samples/map-style-pois/index.ts
index 6119391e..71a917da 100644
--- a/samples/map-style-pois/index.ts
+++ b/samples/map-style-pois/index.ts
@@ -1,13 +1,14 @@
 // [START woosmap_map_style_pois]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const position: woosmap.map.LatLngLiteral = {
     lat: 51.50393576678564,
     lng: -0.12263034354122525,
   };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 16,
       center: position,
       styles: [
@@ -21,16 +22,10 @@ function initMap(): void {
         ]
     }
     ],
-    },
-  );
+    });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_style_pois]
 
 export {};
diff --git a/samples/map-style-pois/map-style-pois.json b/samples/map-style-pois/map-style-pois.json
index 928890aa..55f16a89 100644
--- a/samples/map-style-pois/map-style-pois.json
+++ b/samples/map-style-pois/map-style-pois.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/map-style-retro/index.njk b/samples/map-style-retro/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/map-style-retro/index.njk
+++ b/samples/map-style-retro/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/map-style-retro/index.ts b/samples/map-style-retro/index.ts
index 618ac41f..47f22f1a 100644
--- a/samples/map-style-retro/index.ts
+++ b/samples/map-style-retro/index.ts
@@ -1,10 +1,11 @@
 // [START woosmap_map_style_retro]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const position: woosmap.map.LatLngLiteral = { lat: 51.499, lng: -0.015 };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 14,
       center: position,
       styles: [
@@ -131,16 +132,10 @@ function initMap(): void {
           stylers: [{ color: "#92998d" }],
         },
       ],
-    },
-  );
+    });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_style_retro]
 
 export {};
diff --git a/samples/map-style-retro/map-style-retro.json b/samples/map-style-retro/map-style-retro.json
index 8f821856..c5420b79 100644
--- a/samples/map-style-retro/map-style-retro.json
+++ b/samples/map-style-retro/map-style-retro.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/map-type-hybrid/index.njk b/samples/map-type-hybrid/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/map-type-hybrid/index.njk
+++ b/samples/map-type-hybrid/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/map-type-hybrid/index.ts b/samples/map-type-hybrid/index.ts
index 24715217..60ad8d6f 100644
--- a/samples/map-type-hybrid/index.ts
+++ b/samples/map-type-hybrid/index.ts
@@ -2,14 +2,17 @@
 // Initialize and add the map with hybrid (satellite) map type
 let map: woosmap.map.Map;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const position: woosmap.map.LatLngLiteral = {
     lat: 48.8584,
     lng: 2.2945,
   };
 
   // The map, initialized with hybrid satellite view
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     zoom: 16,
     center: position,
     mapTypeId: woosmap.map.MapTypeId.HYBRID,
@@ -22,12 +25,7 @@ function initMap(): void {
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_map_type_hybrid]
 
 export {};
diff --git a/samples/map-type-hybrid/map-type-hybrid.json b/samples/map-type-hybrid/map-type-hybrid.json
index 8e18c873..49567089 100644
--- a/samples/map-type-hybrid/map-type-hybrid.json
+++ b/samples/map-type-hybrid/map-type-hybrid.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/marker-click-event/index.njk b/samples/marker-click-event/index.njk
index 417b72a5..ffb3940e 100644
--- a/samples/marker-click-event/index.njk
+++ b/samples/marker-click-event/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="info">Click on a marker to display attributes here</div>
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/marker-click-event/index.ts b/samples/marker-click-event/index.ts
index 511a268f..871b8b5b 100644
--- a/samples/marker-click-event/index.ts
+++ b/samples/marker-click-event/index.ts
@@ -1,6 +1,6 @@
 // [START woosmap_marker_click_event]
-const markers: woosmap.map.Marker[] = [];
-let markerSelected: woosmap.map.Marker;
+const markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
+let markerSelected: woosmap.map.marker.AdvancedMarkerElement;
 const data = {
   megaCities: [
     {
@@ -136,26 +136,29 @@ const data = {
   ],
 };
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   const center: woosmap.map.LatLngLiteral = { lat: 40.0, lng: 0.0 };
 
-  const iconCity: woosmap.map.Icon = {
-    url: "https://images.woosmap.com/icons/pin-red.png",
-    scaledSize: { height: 38, width: 26 },
-  };
+  const CITY_PIN_URL = "https://images.woosmap.com/icons/pin-red.png";
+  const SELECTED_CITY_PIN_URL = "https://images.woosmap.com/icons/pin-green.png";
 
-  const iconSelectedCity: woosmap.map.Icon = {
-    url: "https://images.woosmap.com/icons/pin-green.png",
-    scaledSize: { height: 38, width: 26 },
-  };
+  function createCityMarkerContent(): HTMLImageElement {
+    const img = document.createElement("img");
+    img.src = CITY_PIN_URL;
+    img.style.width = "26px";
+    img.style.height = "38px";
+    return img;
+  }
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      zoom: 0,
-      center: center,
-    },
-  );
+  const map = (document.getElementById("map") as woosmap.map.MapElement)
+    .innerMap;
+  map.setOptions({
+    zoom: 0,
+    center: center,
+  });
 
   data.megaCities.forEach((cityData) => {
     const latlng = {
@@ -163,9 +166,10 @@ function initMap(): void {
       lng: parseFloat(cityData.latlng.split(",")[1]),
     };
 
-    const markerCity = new woosmap.map.Marker({
+    const markerCity = new woosmap.map.marker.AdvancedMarkerElement({
       position: latlng,
-      icon: iconCity,
+      content: createCityMarkerContent(),
+      gmpClickable: true,
     });
 
     markerCity.setMap(map);
@@ -177,26 +181,21 @@ function initMap(): void {
   });
 
   const handleMarkerClick = (
-    marker: woosmap.map.Marker,
+    marker: woosmap.map.marker.AdvancedMarkerElement,
     cityData: Record<string, string>,
   ) => {
     if (markerSelected) {
-      markerSelected.setIcon(iconCity);
+      (markerSelected.content as HTMLImageElement).src = CITY_PIN_URL;
     }
 
     markerSelected = marker;
-    marker.setIcon(iconSelectedCity);
+    (marker.content as HTMLImageElement).src = SELECTED_CITY_PIN_URL;
 
     const infoElement = document.getElementById("info") as HTMLElement;
     infoElement.innerHTML = `<strong>${cityData.cityName}</strong><span>: ${cityData.citizens}</span>`;
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_marker_click_event]
 export {};
diff --git a/samples/marker-click-event/marker-click-event.json b/samples/marker-click-event/marker-click-event.json
index 84d3db3b..f8ba820a 100644
--- a/samples/marker-click-event/marker-click-event.json
+++ b/samples/marker-click-event/marker-click-event.json
@@ -3,7 +3,7 @@
   "description": "Listen to this event to get the marker associated attributes.",
   "category": "Markers",
   "callback": "initMap",
-  "libraries": [],
+  "libraries": "marker",
   "tag": "marker_click_event",
   "name": "marker-click-event",
   "pagination": {
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/marker-html-css/index.njk b/samples/marker-html-css/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/marker-html-css/index.njk
+++ b/samples/marker-html-css/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/marker-html-css/index.ts b/samples/marker-html-css/index.ts
index 05fccf92..eb8bc296 100644
--- a/samples/marker-html-css/index.ts
+++ b/samples/marker-html-css/index.ts
@@ -3,94 +3,29 @@ interface MarkerData {
   price: string;
 }
 
-function initMap(): void {
-  class HTMLMapMarker extends woosmap.map.OverlayView {
-    private readonly latlng: woosmap.map.LatLng;
-    private readonly html: string;
-    public div: HTMLDivElement | null = null;
-
-    constructor({ latlng, map, data }) {
-      super();
-      this.latlng = latlng;
-      this.html = `<div class="popover-content">
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  function createMarkerContent(data: MarkerData): HTMLDivElement {
+    const div = document.createElement("div");
+    div.className = "popover";
+    div.innerHTML = `<div class="popover-content">
                       <span class="icon">️</span>
                       <span class="price">${data.price}</span>
                     </div>
                      <div class="popover-arrow-shadow"></div>
                      <div class="popover-arrow"></div>`;
-      this.setMap(map);
-    }
-
-    private createDiv(): void {
-      this.div = document.createElement("div");
-      this.div.style.position = "absolute";
-      this.div.className = "popover";
-      if (this.html) {
-        this.div.innerHTML = this.html;
-      }
-      woosmap.map.event.addDomListener(this.div, "click", () => {
-        woosmap.map.event.trigger(this, "click");
-      });
-    }
-
-    private appendDivToOverlay(): void {
-      const panes = this.getPanes();
-      if (panes && this.div) {
-        panes.floatPane.appendChild(this.div);
-      }
-    }
-
-    private positionDiv(): void {
-      const point = this.getProjection()?.fromLatLngToDivPixel(this.latlng);
-      if (point && this.div) {
-        // Offset should depend on the style of your popover
-        const offsetWidth = this.div.offsetWidth / 2; // 50% of div width
-        const offsetHeight = this.div.offsetHeight + 6; // Full height of div plus the arrow height
-        // @ts-ignore
-        this.div.style.left = `${point.x - offsetWidth}px`;
-        // @ts-ignore
-        this.div.style.top = `${point.y - offsetHeight}px`;
-      }
-    }
-
-    draw(): void {
-      this.positionDiv();
-    }
-
-    onAdd(): void {
-      if (!this.div) {
-        this.createDiv();
-        this.appendDivToOverlay();
-      }
-    }
-
-    onRemove(): void {
-      if (this.div && this.div.parentNode) {
-        this.div.parentNode.removeChild(this.div);
-        this.div = null;
-      }
-    }
-
-    getPosition(): woosmap.map.LatLng {
-      return this.latlng;
-    }
-
-    addEventListener(eventName: string, callback: () => void): void {
-      if (this.div) {
-        this.div.addEventListener(eventName, callback);
-      }
-    }
+    return div;
   }
 
   const center: woosmap.map.LatLngLiteral = { lat: 51.5074, lng: -0.1278 };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 13,
       center: center,
-    },
-  );
+    });
 
   const markersData: MarkerData[] = [
     { price: "100 €" },
@@ -108,38 +43,28 @@ function initMap(): void {
     { lat: 51.5074, lng: -0.1078 },
   ];
 
-  const markers: HTMLMapMarker[] = [];
+  const markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
 
   markersData.forEach((data, index) => {
-    const marker = new HTMLMapMarker({
-      latlng: new woosmap.map.LatLng(
-        positions[index].lat,
-        positions[index].lng,
-      ),
+    const content = createMarkerContent(data);
+    const marker = new woosmap.map.marker.AdvancedMarkerElement({
+      position: positions[index],
       map: map,
-      data: data,
+      content,
+      gmpClickable: true,
     });
 
-    marker.addEventListener("click", () => {
+    marker.addListener("click", () => {
       markers.forEach((m) => {
-        if (m.div) {
-          m.div.classList.remove("active");
-        }
+        (m.content as HTMLDivElement).classList.remove("active");
       });
-      if (marker.div) {
-        marker.div.classList.add("active");
-      }
+      content.classList.add("active");
     });
 
     markers.push(marker);
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_marker_html_css]
 export {};
diff --git a/samples/marker-html-css/marker-html-css.json b/samples/marker-html-css/marker-html-css.json
index 35f16d87..3d70741a 100644
--- a/samples/marker-html-css/marker-html-css.json
+++ b/samples/marker-html-css/marker-html-css.json
@@ -3,7 +3,7 @@
   "description": "Create markers with HTML and CSS",
   "category": "Markers",
   "callback": "initMap",
-  "libraries": [],
+  "libraries": "marker",
   "tag": "marker_html_css",
   "name": "marker-html-css",
   "pagination": {
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/marker-label/index.njk b/samples/marker-label/index.njk
index 25c410dd..6e7d70aa 100644
--- a/samples/marker-label/index.njk
+++ b/samples/marker-label/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="info">Click on the map to add new MarkerLabel</div>
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/marker-label/index.ts b/samples/marker-label/index.ts
index 1859205b..75461f9d 100644
--- a/samples/marker-label/index.ts
+++ b/samples/marker-label/index.ts
@@ -1,52 +1,61 @@
 // [START woosmap_marker_label]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
 
-  const iconMarker: woosmap.map.Icon = {
-    labelOrigin: new window.woosmap.map.Point(14, 15),
-    url: "https://images.woosmap.com/marker-red.svg",
-  };
+  function createMarkerContent(label: string): HTMLElement {
+    const container = document.createElement("div");
+    container.style.position = "relative";
+    container.style.width = "26px";
+    container.style.height = "38px";
+
+    const icon = document.createElement("img");
+    icon.src = "https://images.woosmap.com/marker-red.svg";
+    icon.style.width = "26px";
+    icon.style.height = "38px";
+    container.appendChild(icon);
+
+    const labelSpan = document.createElement("span");
+    labelSpan.textContent = label;
+    labelSpan.style.position = "absolute";
+    labelSpan.style.left = "14px";
+    labelSpan.style.top = "15px";
+    labelSpan.style.transform = "translate(-50%, -50%)";
+    labelSpan.style.color = "white";
+    labelSpan.style.fontSize = "12px";
+    labelSpan.style.fontWeight = "bold";
+    container.appendChild(labelSpan);
+
+    return container;
+  }
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 10,
       center: center,
-    },
-  );
+    });
 
   // [START woosmap_marker_label_add_label]
   let labelNumber = 1;
-  new window.woosmap.map.Marker({
+  new woosmap.map.marker.AdvancedMarkerElement({
     position: map.getCenter(),
-    icon: iconMarker,
-    label: {
-      text: String(labelNumber),
-      color: "white",
-    },
+    content: createMarkerContent(String(labelNumber)),
     map,
   });
   // [END woosmap_marker_label_add_label]
 
   map.addListener("click", (e) => {
     labelNumber += 1;
-    new window.woosmap.map.Marker({
+    new woosmap.map.marker.AdvancedMarkerElement({
       position: e.latlng,
-      icon: iconMarker,
-      label: {
-        text: String(labelNumber),
-        color: "white",
-      },
+      content: createMarkerContent(String(labelNumber)),
       map,
     });
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_marker_label]
 export {};
diff --git a/samples/marker-label/marker-label.json b/samples/marker-label/marker-label.json
index 834f58cb..1d9e8e9d 100644
--- a/samples/marker-label/marker-label.json
+++ b/samples/marker-label/marker-label.json
@@ -3,7 +3,7 @@
   "description": "A Marker Label is a maker with a text label drawn inside it.",
   "category": "Markers",
   "callback": "initMap",
-  "libraries": [],
+  "libraries": "marker",
   "tag": "marker_label",
   "name": "marker-label",
   "pagination": {
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/marker-simple/index.njk b/samples/marker-simple/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/marker-simple/index.njk
+++ b/samples/marker-simple/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/marker-simple/index.ts b/samples/marker-simple/index.ts
index bd3c4e39..6abcb5a9 100644
--- a/samples/marker-simple/index.ts
+++ b/samples/marker-simple/index.ts
@@ -1,33 +1,29 @@
 // [START woosmap_marker_simple]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      zoom: 13,
-      center: center,
-    },
-  );
+  const map = (document.getElementById("map") as woosmap.map.MapElement)
+    .innerMap;
+  map.setOptions({
+    zoom: 13,
+    center: center,
+  });
+
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker.png";
+  markerContent.style.width = "32px";
+  markerContent.style.height = "50px";
 
-  const marker = new woosmap.map.Marker({
+  const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: map.getCenter(),
-    icon: {
-      url: "https://images.woosmap.com/marker.png",
-      scaledSize: {
-        height: 50,
-        width: 32,
-      },
-    },
+    content: markerContent,
   });
   marker.setMap(map);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_marker_simple]
 export {};
diff --git a/samples/marker-simple/marker-simple.json b/samples/marker-simple/marker-simple.json
index 60978278..4aba504c 100644
--- a/samples/marker-simple/marker-simple.json
+++ b/samples/marker-simple/marker-simple.json
@@ -3,7 +3,7 @@
   "description": "Adding a simple marker on the center of the map",
   "category": "Markers",
   "callback": "initMap",
-  "libraries": [],
+  "libraries": "marker",
   "tag": "marker_simple",
   "name": "marker-simple",
   "pagination": {
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/multisearch-map-advanced/index.njk b/samples/multisearch-map-advanced/index.njk
index 75533c41..0c4f74cc 100644
--- a/samples/multisearch-map-advanced/index.njk
+++ b/samples/multisearch-map-advanced/index.njk
@@ -18,7 +18,7 @@
             </button>
             <ul id="suggestions-list"></ul>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/multisearch-map-advanced/index.ts b/samples/multisearch-map-advanced/index.ts
index 5861badf..9a1bb992 100644
--- a/samples/multisearch-map-advanced/index.ts
+++ b/samples/multisearch-map-advanced/index.ts
@@ -36,7 +36,7 @@ let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let infoWindow: woosmap.map.InfoWindow;
 
 function initSearch(): void {
@@ -74,17 +74,18 @@ function initSearch(): void {
   });
 
   // @ts-ignore
-  multiSearch = window.woosmap.multisearch(searchOptions);
+  multiSearch = woosmap.multisearch(searchOptions);
 }
 
-function initMap(): void {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
-    },
-  );
+    });
   infoWindow = new woosmap.map.InfoWindow({});
   initSearch();
 }
@@ -150,15 +151,15 @@ function formatPredictionList(result): string {
 }
 
 function createMarker(result) {
-  return new woosmap.map.Marker({
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker.png";
+  markerContent.style.width = "32px";
+  markerContent.style.height = "50px";
+
+  return new woosmap.map.marker.AdvancedMarkerElement({
     position: result.geometry.location,
-    icon: {
-      url: "https://images.woosmap.com/marker.png",
-      scaledSize: {
-        height: 50,
-        width: 32,
-      },
-    },
+    content: markerContent,
+    gmpClickable: true,
   });
 }
 
@@ -189,12 +190,12 @@ function displayLocality(result, apiName: string) {
     infoWindow.setOffset(new woosmap.map.Point(0, -50));
     infoWindow.setContent(infoWindowHTML);
     marker.addListener("click", () => {
-      infoWindow.open(map, marker.getPosition());
+      infoWindow.open({map, anchor: marker.position});
     });
     map.setCenter(result.geometry.location, { top: 150 });
     map.setZoom(14);
     woosmap.map.event.addListenerOnce(map, "idle", () => {
-      infoWindow.open(map, marker.position);
+      infoWindow.open({map, anchor: marker.position});
     });
   }
 }
@@ -210,12 +211,7 @@ document.addEventListener("click", (event) => {
   }
 });
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_multisearch_map_advanced]
 
 export {};
diff --git a/samples/multisearch-map-advanced/multisearch-map-advanced.json b/samples/multisearch-map-advanced/multisearch-map-advanced.json
index 2f107d57..5fb80765 100644
--- a/samples/multisearch-map-advanced/multisearch-map-advanced.json
+++ b/samples/multisearch-map-advanced/multisearch-map-advanced.json
@@ -11,5 +11,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/multisearch-map-simple/index.njk b/samples/multisearch-map-simple/index.njk
index 75533c41..0c4f74cc 100644
--- a/samples/multisearch-map-simple/index.njk
+++ b/samples/multisearch-map-simple/index.njk
@@ -18,7 +18,7 @@
             </button>
             <ul id="suggestions-list"></ul>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/multisearch-map-simple/index.ts b/samples/multisearch-map-simple/index.ts
index 53b0c828..365de126 100644
--- a/samples/multisearch-map-simple/index.ts
+++ b/samples/multisearch-map-simple/index.ts
@@ -19,7 +19,7 @@ let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 
 function initSearch(): void {
   inputElement = document.getElementById(
@@ -53,17 +53,18 @@ function initSearch(): void {
   });
 
   // @ts-ignore
-  multiSearch = window.woosmap.multisearch(searchOptions);
+  multiSearch = woosmap.multisearch(searchOptions);
 }
 
-function initMap(): void {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
-    },
-  );
+    });
   initSearch();
 }
 
@@ -131,15 +132,14 @@ function displayLocality(result) {
     marker.setMap(null);
   }
   if (result?.geometry) {
-    marker = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "32px";
+    markerContent.style.height = "50px";
+
+    marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: result.geometry.location,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 50,
-          width: 32,
-        },
-      },
+      content: markerContent,
     });
     marker.setMap(map);
     map.flyTo({ center: result.geometry.location, zoom: 14 });
@@ -157,12 +157,7 @@ document.addEventListener("click", (event) => {
   }
 });
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_multisearch_map_simple]
 
 export {};
diff --git a/samples/multisearch-map-simple/multisearch-map-simple.json b/samples/multisearch-map-simple/multisearch-map-simple.json
index 1c67341f..94e6f023 100644
--- a/samples/multisearch-map-simple/multisearch-map-simple.json
+++ b/samples/multisearch-map-simple/multisearch-map-simple.json
@@ -11,5 +11,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/react-map-basic/index.tsx b/samples/react-map-basic/index.tsx
index 735b7c15..70e6b1be 100644
--- a/samples/react-map-basic/index.tsx
+++ b/samples/react-map-basic/index.tsx
@@ -12,17 +12,49 @@ import React, {
 // Define the types for the global Woosmap object
 declare const woosmap: any;
 
-// Custom hook to load the Woosmap JavaScript API
-// This hook creates a script tag with the Woosmap map.js URL and appends it to the body of the document.
-// It sets the state to true when the script loads.
+// Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
+// defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
+// Safe to call more than once: the shim itself no-ops (and warns) past the first.
+function installLoaderShim(apiKey: string): void {
+  ((g) => {
+    let p;
+    const w = window as any,
+      d = document;
+    const L = "importLibrary",
+      CB = "__ib__";
+    const E = "The Woosmap Maps JavaScript API";
+    const woosmap = w.woosmap || (w.woosmap = {});
+    const maps = woosmap.map || (woosmap.map = {});
+    const libs = new Set(),
+      params = new URLSearchParams();
+    const load = () =>
+      p ||
+      (p = new Promise((res, rej) => {
+        const s = d.createElement("script");
+        params.set("libraries", [...libs].join(","));
+        for (const k in g) params.set(k, g[k]);
+        params.set("callback", "woosmap.map." + CB);
+        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        maps[CB] = res;
+        s.onerror = () => rej(Error(E + " could not load."));
+        d.head.append(s);
+      }));
+    if (maps[L]) {
+      console.warn(E + " only loads once. Ignoring:", g);
+    } else {
+      maps[L] = (name: string, ...args: unknown[]) =>
+        libs.add(name) && load().then(() => maps[L](name, ...args));
+    }
+  })({ key: apiKey });
+}
+
+// Custom hook to load the Woosmap JavaScript API via the loader shim.
 function useWoosmap(apiKey: string) {
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
-    script.onload = () => setIsLoaded(true);
-    document.body.appendChild(script);
+    installLoaderShim(apiKey);
+    woosmap.map.importLibrary("maps").then(() => setIsLoaded(true));
   }, [apiKey]);
 
   return isLoaded;
diff --git a/samples/react-map-with-custom-overlay/index.tsx b/samples/react-map-with-custom-overlay/index.tsx
index 0f13b589..27edb0ad 100644
--- a/samples/react-map-with-custom-overlay/index.tsx
+++ b/samples/react-map-with-custom-overlay/index.tsx
@@ -11,15 +11,49 @@ import React, {
 // Define the types for the global Woosmap object
 declare const woosmap: any;
 
-// Custom hook to load the Woosmap JavaScript API
+// Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
+// defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
+// Safe to call more than once: the shim itself no-ops (and warns) past the first.
+function installLoaderShim(apiKey: string): void {
+  ((g) => {
+    let p;
+    const w = window as any,
+      d = document;
+    const L = "importLibrary",
+      CB = "__ib__";
+    const E = "The Woosmap Maps JavaScript API";
+    const woosmap = w.woosmap || (w.woosmap = {});
+    const maps = woosmap.map || (woosmap.map = {});
+    const libs = new Set(),
+      params = new URLSearchParams();
+    const load = () =>
+      p ||
+      (p = new Promise((res, rej) => {
+        const s = d.createElement("script");
+        params.set("libraries", [...libs].join(","));
+        for (const k in g) params.set(k, g[k]);
+        params.set("callback", "woosmap.map." + CB);
+        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        maps[CB] = res;
+        s.onerror = () => rej(Error(E + " could not load."));
+        d.head.append(s);
+      }));
+    if (maps[L]) {
+      console.warn(E + " only loads once. Ignoring:", g);
+    } else {
+      maps[L] = (name: string, ...args: unknown[]) =>
+        libs.add(name) && load().then(() => maps[L](name, ...args));
+    }
+  })({ key: apiKey });
+}
+
+// Custom hook to load the Woosmap JavaScript API via the loader shim.
 function useWoosmap(apiKey: string) {
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
-    script.onload = () => setIsLoaded(true);
-    document.body.appendChild(script);
+    installLoaderShim(apiKey);
+    woosmap.map.importLibrary("maps").then(() => setIsLoaded(true));
   }, [apiKey]);
 
   return isLoaded;
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index cc84741e..47b751f3 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -12,17 +12,52 @@ import React, {
 // Define the types for the global Woosmap object
 declare const woosmap: any;
 
-// Custom hook to load the Woosmap JavaScript API
-// This hook creates a script tag with the Woosmap map.js URL and appends it to the body of the document.
-// It sets the state to true when the script loads.
+// Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
+// defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
+// Safe to call more than once: the shim itself no-ops (and warns) past the first.
+function installLoaderShim(apiKey: string): void {
+  ((g) => {
+    let p;
+    const w = window as any,
+      d = document;
+    const L = "importLibrary",
+      CB = "__ib__";
+    const E = "The Woosmap Maps JavaScript API";
+    const woosmap = w.woosmap || (w.woosmap = {});
+    const maps = woosmap.map || (woosmap.map = {});
+    const libs = new Set(),
+      params = new URLSearchParams();
+    const load = () =>
+      p ||
+      (p = new Promise((res, rej) => {
+        const s = d.createElement("script");
+        params.set("libraries", [...libs].join(","));
+        for (const k in g) params.set(k, g[k]);
+        params.set("callback", "woosmap.map." + CB);
+        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        maps[CB] = res;
+        s.onerror = () => rej(Error(E + " could not load."));
+        d.head.append(s);
+      }));
+    if (maps[L]) {
+      console.warn(E + " only loads once. Ignoring:", g);
+    } else {
+      maps[L] = (name: string, ...args: unknown[]) =>
+        libs.add(name) && load().then(() => maps[L](name, ...args));
+    }
+  })({ key: apiKey });
+}
+
+// Custom hook to load the Woosmap JavaScript API via the loader shim.
 function useWoosmap(apiKey: string) {
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    const script = document.createElement("script");
-    script.src = `https://sdk.woosmap.com/map/map.js?key=${apiKey}`;
-    script.onload = () => setIsLoaded(true);
-    document.body.appendChild(script);
+    installLoaderShim(apiKey);
+    Promise.all([
+      woosmap.map.importLibrary("maps"),
+      woosmap.map.importLibrary("marker"),
+    ]).then(() => setIsLoaded(true));
   }, [apiKey]);
 
   return isLoaded;
@@ -81,10 +116,13 @@ const WoosmapMap: React.FC<MapProps> = ({ center, zoom, children }) => {
 };
 
 // This component creates a Woosmap marker to display the selected locality and flyTo it
-const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
+const Marker: React.FC<woosmap.map.marker.AdvancedMarkerElementOptions> = ({
+  position,
+}) => {
   const woosmap = useContext(MapContext);
   const mapInstance = useContext(MapInstanceContext);
-  const [marker, setMarker] = useState<woosmap.map.Marker>(null);
+  const [marker, setMarker] =
+    useState<woosmap.map.marker.AdvancedMarkerElement>(null);
 
   useEffect(() => {
     if (marker) {
@@ -92,15 +130,14 @@ const Marker: React.FC<woosmap.map.MarkerOptions> = ({ position }) => {
       setMarker(null);
     }
     if (mapInstance && position) {
-      const localityMarker = new woosmap.map.Marker({
+      const markerContent = document.createElement("img");
+      markerContent.src = "https://images.woosmap.com/marker.png";
+      markerContent.style.width = "32px";
+      markerContent.style.height = "50px";
+
+      const localityMarker = new woosmap.map.marker.AdvancedMarkerElement({
         position,
-        icon: {
-          url: "https://images.woosmap.com/marker.png",
-          scaledSize: {
-            height: 50,
-            width: 32,
-          },
-        },
+        content: markerContent,
       });
       localityMarker.setMap(mapInstance);
       setMarker(localityMarker);
diff --git a/samples/render-shapes-circles/index.njk b/samples/render-shapes-circles/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/render-shapes-circles/index.njk
+++ b/samples/render-shapes-circles/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/render-shapes-circles/index.ts b/samples/render-shapes-circles/index.ts
index 7b63aa3b..dbd71909 100644
--- a/samples/render-shapes-circles/index.ts
+++ b/samples/render-shapes-circles/index.ts
@@ -135,8 +135,11 @@ const data = {
   ],
 };
 
-function initMap() {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: {
       lat: 40,
       lng: 0,
@@ -160,7 +163,7 @@ function initMap() {
     });
   }
 }
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_circles]
 
 export {};
diff --git a/samples/render-shapes-circles/render-shapes-circles.json b/samples/render-shapes-circles/render-shapes-circles.json
index 429ff35c..23bbffaa 100644
--- a/samples/render-shapes-circles/render-shapes-circles.json
+++ b/samples/render-shapes-circles/render-shapes-circles.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/render-shapes-data-events/index.njk b/samples/render-shapes-data-events/index.njk
index 0fc3a07e..51b536e4 100644
--- a/samples/render-shapes-data-events/index.njk
+++ b/samples/render-shapes-data-events/index.njk
@@ -1,7 +1,7 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="container">
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
         <div class="events" id="sidebar"></div>
     </div>
 {% endblock %}
diff --git a/samples/render-shapes-data-events/index.ts b/samples/render-shapes-data-events/index.ts
index d94214a0..f8b2df73 100644
--- a/samples/render-shapes-data-events/index.ts
+++ b/samples/render-shapes-data-events/index.ts
@@ -35,14 +35,14 @@ function setupListener(name) {
   }
 }
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 29.65, lng: -97.74 },
       zoom: 6,
-    },
-  );
+    });
   //Outter Shape of Polygon
   const outerShape = [
     { lat: 28.59, lng: -100.65 },
@@ -75,12 +75,7 @@ function initMap() {
   }
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_data_events]
 
 export {};
diff --git a/samples/render-shapes-data-events/render-shapes-data-events.json b/samples/render-shapes-data-events/render-shapes-data-events.json
index 248cc1e0..1e10a9da 100644
--- a/samples/render-shapes-data-events/render-shapes-data-events.json
+++ b/samples/render-shapes-data-events/render-shapes-data-events.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/render-shapes-data/index.njk b/samples/render-shapes-data/index.njk
index ca9326f2..aa5ac590 100644
--- a/samples/render-shapes-data/index.njk
+++ b/samples/render-shapes-data/index.njk
@@ -2,5 +2,5 @@
 {% block html %}
     <div id="info">Click on a Pub...</div>
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/render-shapes-data/index.ts b/samples/render-shapes-data/index.ts
index 05f60c3b..0c37dfa0 100644
--- a/samples/render-shapes-data/index.ts
+++ b/samples/render-shapes-data/index.ts
@@ -198,18 +198,18 @@ const pubsData = {
   ],
 };
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 53.3430183, lng: -6.25321 },
       zoom: 14,
-    },
-  );
+    });
 
   pubsData.pubs.forEach((pub) => {
     map.data.add({
-      geometry: new window.woosmap.map.Data.Point({
+      geometry: new woosmap.map.Data.Point({
         lat: pub.coordinates[1],
         lng: pub.coordinates[0],
       }),
@@ -248,12 +248,7 @@ function initMap() {
   });
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_data]
 
 export {};
diff --git a/samples/render-shapes-data/render-shapes-data.json b/samples/render-shapes-data/render-shapes-data.json
index 6c12c5e3..3a4b2dc0 100644
--- a/samples/render-shapes-data/render-shapes-data.json
+++ b/samples/render-shapes-data/render-shapes-data.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/render-shapes-geojson/index.njk b/samples/render-shapes-geojson/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/render-shapes-geojson/index.njk
+++ b/samples/render-shapes-geojson/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/render-shapes-geojson/index.ts b/samples/render-shapes-geojson/index.ts
index 7b19e2d4..d20bec9a 100644
--- a/samples/render-shapes-geojson/index.ts
+++ b/samples/render-shapes-geojson/index.ts
@@ -2,14 +2,14 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 53.51, lng: 8.15 },
       zoom: 4,
-    },
-  );
+    });
 
   map.data.loadGeoJson(
     "https://demo.woosmap.com/misc/data/europe.geojson.json",
@@ -48,12 +48,7 @@ function initMap() {
   }
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_geojson]
 
 export {};
diff --git a/samples/render-shapes-geojson/render-shapes-geojson.json b/samples/render-shapes-geojson/render-shapes-geojson.json
index ccd263d5..3f1aa8ec 100644
--- a/samples/render-shapes-geojson/render-shapes-geojson.json
+++ b/samples/render-shapes-geojson/render-shapes-geojson.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/render-shapes-polygons/index.njk b/samples/render-shapes-polygons/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/render-shapes-polygons/index.njk
+++ b/samples/render-shapes-polygons/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/render-shapes-polygons/index.ts b/samples/render-shapes-polygons/index.ts
index 6761ca7a..38d43f89 100644
--- a/samples/render-shapes-polygons/index.ts
+++ b/samples/render-shapes-polygons/index.ts
@@ -2,15 +2,15 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap() {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
   // [START woosmap_add_map_instantiate_map]
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 29.65, lng: -97.74 },
       zoom: 6,
-    },
-  );
+    });
   // [END woosmap_add_map_instantiate_map]
   //Outter Shape of Polygon
   const outerShape = [
@@ -40,12 +40,7 @@ function initMap() {
   polygon.setMap(map);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_polygons]
 
 export {};
diff --git a/samples/render-shapes-polygons/render-shapes-polygons.json b/samples/render-shapes-polygons/render-shapes-polygons.json
index 0c814683..5ea6d220 100644
--- a/samples/render-shapes-polygons/render-shapes-polygons.json
+++ b/samples/render-shapes-polygons/render-shapes-polygons.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/render-shapes-polylines/index.njk b/samples/render-shapes-polylines/index.njk
index f2ff4535..6150b04a 100644
--- a/samples/render-shapes-polylines/index.njk
+++ b/samples/render-shapes-polylines/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/render-shapes-polylines/index.ts b/samples/render-shapes-polylines/index.ts
index 5995ebc4..c77b91e1 100644
--- a/samples/render-shapes-polylines/index.ts
+++ b/samples/render-shapes-polylines/index.ts
@@ -2,14 +2,14 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       center: { lat: 51.505, lng: -0.118 },
       zoom: 15,
-    },
-  );
+    });
   //Polyline Shape
   const polylinePath = [
     { lng: -0.12638568878173828, lat: 51.50099581189912 },
@@ -39,7 +39,7 @@ function initMap() {
   });
   polyline.setMap(map);
 }
-window.initMap = initMap;
+initMap();
 // [END woosmap_render_shapes_polylines]
 
 export {};
diff --git a/samples/render-shapes-polylines/render-shapes-polylines.json b/samples/render-shapes-polylines/render-shapes-polylines.json
index 7342e8c5..e9ba6ad1 100644
--- a/samples/render-shapes-polylines/render-shapes-polylines.json
+++ b/samples/render-shapes-polylines/render-shapes-polylines.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/stores-list-sync-map/index.njk b/samples/stores-list-sync-map/index.njk
index 6731bfd9..7185d5a4 100644
--- a/samples/stores-list-sync-map/index.njk
+++ b/samples/stores-list-sync-map/index.njk
@@ -23,7 +23,7 @@
             </div>
           </div>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/stores-list-sync-map/index.ts b/samples/stores-list-sync-map/index.ts
index 89518b67..6fa5cebf 100644
--- a/samples/stores-list-sync-map/index.ts
+++ b/samples/stores-list-sync-map/index.ts
@@ -1,6 +1,6 @@
 // [START woosmap_stores_list_sync_map]
 let map: woosmap.map.Map;
-let activeLocation: woosmap.map.Marker | null = null;
+let activeLocation: woosmap.map.marker.AdvancedMarkerElement | null = null;
 let storesOverlay: woosmap.map.StoresOverlay;
 let storesService: woosmap.map.StoresService;
 let localitiesService: woosmap.map.LocalitiesService;
@@ -187,19 +187,17 @@ function handleSearchResults(originalLatLng: woosmap.map.LatLngLiteral) {
   }
 
   if (originalLatLng) {
-    activeLocation = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "32px";
+    markerContent.style.height = "50px";
+
+    activeLocation = new woosmap.map.marker.AdvancedMarkerElement({
       position: originalLatLng,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 50,
-          width: 32,
-        },
-      },
+      content: markerContent,
     });
     activeLocation.setMap(map);
-    map.setCenter(originalLatLng);
-    map.setZoom(8);
+    map.moveCamera({ center: originalLatLng, zoom: 8 });
   }
 }
 
@@ -234,11 +232,12 @@ function debounce(func: (...args: any[]) => void, wait: number) {
   };
 }
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    mapOptions,
-  );
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions(mapOptions);
   storesOverlay = new woosmap.map.StoresOverlay(storesStyle);
   storesOverlay.setMap(map);
   map.addListener(
@@ -249,14 +248,14 @@ function initMap() {
       displayListStores(visibleStores);
     }, 50),
   );
-  window.woosmap.map.event.addListener(
+  woosmap.map.event.addListener(
     map,
     "store_selected",
     (store: woosmap.map.stores.StoreResponse) => {
       selectStoreOnList(store.properties.store_id);
     },
   );
-  window.woosmap.map.event.addListener(map, "store_unselected", () => {
+  woosmap.map.event.addListener(map, "store_unselected", () => {
     selectStoreOnList();
   });
 
@@ -273,12 +272,7 @@ function handleError(error: woosmap.map.errors.APIError) {
   console.error("Error:", error);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_list_sync_map]
 
 export {};
diff --git a/samples/stores-list-sync-map/stores-list-sync-map.json b/samples/stores-list-sync-map/stores-list-sync-map.json
index 4be0f863..376361eb 100644
--- a/samples/stores-list-sync-map/stores-list-sync-map.json
+++ b/samples/stores-list-sync-map/stores-list-sync-map.json
@@ -11,5 +11,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/stores-overlay-click-event/index.njk b/samples/stores-overlay-click-event/index.njk
index 417b72a5..ffb3940e 100644
--- a/samples/stores-overlay-click-event/index.njk
+++ b/samples/stores-overlay-click-event/index.njk
@@ -1,5 +1,5 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
     <div id="info">Click on a marker to display attributes here</div>
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/stores-overlay-click-event/index.ts b/samples/stores-overlay-click-event/index.ts
index aee87f65..ef4fc621 100644
--- a/samples/stores-overlay-click-event/index.ts
+++ b/samples/stores-overlay-click-event/index.ts
@@ -1,5 +1,7 @@
 // [START woosmap_stores_overlay_click_event]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
 
   const style: woosmap.map.Style = {
@@ -26,20 +28,18 @@ function initMap(): void {
     },
   };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 13,
       center: center,
-    },
-  );
+    });
 
   const storesOverlay = new woosmap.map.StoresOverlay(style);
   storesOverlay.setMap(map);
 
   // [START woosmap_stores_overlay_click_event_listener]
   // Configure the click listener.
-  window.woosmap.map.event.addListener(
+  woosmap.map.event.addListener(
     map,
     "store_selected",
     (storeGeoJSON: woosmap.map.stores.StoreResponse) => {
@@ -64,11 +64,6 @@ function initMap(): void {
   // [END woosmap_stores_overlay_click_event_listener]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_overlay_click_event]
 export {};
diff --git a/samples/stores-overlay-click-event/stores-overlay-click-event.json b/samples/stores-overlay-click-event/stores-overlay-click-event.json
index 2b143ca0..4b9189d0 100644
--- a/samples/stores-overlay-click-event/stores-overlay-click-event.json
+++ b/samples/stores-overlay-click-event/stores-overlay-click-event.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/stores-overlay-query-advanced/index.njk b/samples/stores-overlay-query-advanced/index.njk
index d950cc87..45b78cab 100644
--- a/samples/stores-overlay-query-advanced/index.njk
+++ b/samples/stores-overlay-query-advanced/index.njk
@@ -47,5 +47,5 @@
             </div>
         </div>
     </div>
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
\ No newline at end of file
diff --git a/samples/stores-overlay-query-advanced/index.ts b/samples/stores-overlay-query-advanced/index.ts
index b866dff8..f5ae87ca 100644
--- a/samples/stores-overlay-query-advanced/index.ts
+++ b/samples/stores-overlay-query-advanced/index.ts
@@ -31,7 +31,9 @@ function setQuery() {
   storesOverlay.setQuery(query.toString());
 }
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
   const icon: woosmap.map.Icon = {
     url: "https://images.woosmap.com/marker-blue.svg",
@@ -83,13 +85,11 @@ function initMap(): void {
       },
     },
   };
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 8,
       center: center,
-    },
-  );
+    });
 
   storesOverlay = new woosmap.map.StoresOverlay(style);
   storesOverlay.setMap(map);
@@ -109,11 +109,6 @@ function initUI() {
   clauseOr.addEventListener("change", setQuery);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_overlay_query_advanced]
 export {};
diff --git a/samples/stores-overlay-query-advanced/stores-overlay-query-advanced.json b/samples/stores-overlay-query-advanced/stores-overlay-query-advanced.json
index f8251f95..82f923ef 100644
--- a/samples/stores-overlay-query-advanced/stores-overlay-query-advanced.json
+++ b/samples/stores-overlay-query-advanced/stores-overlay-query-advanced.json
@@ -12,5 +12,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/stores-overlay-query/index.njk b/samples/stores-overlay-query/index.njk
index b6b1a5d5..e2f84917 100644
--- a/samples/stores-overlay-query/index.njk
+++ b/samples/stores-overlay-query/index.njk
@@ -7,5 +7,5 @@
             <div class="toggle-switch"></div>
         </label>
     </div>
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/stores-overlay-query/index.ts b/samples/stores-overlay-query/index.ts
index cd5bf01d..17fb68a2 100644
--- a/samples/stores-overlay-query/index.ts
+++ b/samples/stores-overlay-query/index.ts
@@ -1,5 +1,7 @@
 // [START woosmap_stores_overlay_query]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
 
   const style: woosmap.map.Style = {
@@ -26,13 +28,11 @@ function initMap(): void {
     },
   };
 
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 8,
       center: center,
-    },
-  );
+    });
 
   const storesOverlay = new woosmap.map.StoresOverlay(style);
   storesOverlay.setMap(map);
@@ -49,11 +49,6 @@ function initMap(): void {
   // [END woosmap_stores_overlay_query_set_query]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_overlay_query]
 export {};
diff --git a/samples/stores-overlay-query/stores-overlay-query.json b/samples/stores-overlay-query/stores-overlay-query.json
index 86be0218..51d31da4 100644
--- a/samples/stores-overlay-query/stores-overlay-query.json
+++ b/samples/stores-overlay-query/stores-overlay-query.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/stores-overlay/index.njk b/samples/stores-overlay/index.njk
index ad07059d..ccbcaeaf 100644
--- a/samples/stores-overlay/index.njk
+++ b/samples/stores-overlay/index.njk
@@ -1,4 +1,4 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}
diff --git a/samples/stores-overlay/index.ts b/samples/stores-overlay/index.ts
index 1d21e288..b75882aa 100644
--- a/samples/stores-overlay/index.ts
+++ b/samples/stores-overlay/index.ts
@@ -1,5 +1,7 @@
 // [START woosmap_stores_overlay]
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
   // [START woosmap_stores_overlay_style]
   const style: woosmap.map.Style = {
@@ -28,24 +30,17 @@ function initMap(): void {
   // [END woosmap_stores_overlay_style]
 
   // [START woosmap_stores_overlay_add_map]
-  const map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
+  const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
       zoom: 4,
       center: center,
-    },
-  );
+    });
 
   const storesOverlay = new woosmap.map.StoresOverlay(style);
   storesOverlay.setMap(map);
   // [END woosmap_stores_overlay_add_map]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_overlay]
 export {};
diff --git a/samples/stores-overlay/stores-overlay.json b/samples/stores-overlay/stores-overlay.json
index f5845d23..d0049b72 100644
--- a/samples/stores-overlay/stores-overlay.json
+++ b/samples/stores-overlay/stores-overlay.json
@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/stores-search/index.njk b/samples/stores-search/index.njk
index bcd8d340..981f631c 100644
--- a/samples/stores-search/index.njk
+++ b/samples/stores-search/index.njk
@@ -27,7 +27,7 @@
             </div>
           </div>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/stores-search/index.ts b/samples/stores-search/index.ts
index 9da0d077..f0cac3f1 100644
--- a/samples/stores-search/index.ts
+++ b/samples/stores-search/index.ts
@@ -1,6 +1,6 @@
 // [START woosmap_stores_search]
 let map: woosmap.map.Map;
-let activeLocation: woosmap.map.Marker | null = null;
+let activeLocation: woosmap.map.marker.AdvancedMarkerElement | null = null;
 let storesOverlay: woosmap.map.StoresOverlay;
 const gestureMode: woosmap.map.GestureHandlingMode = "greedy";
 let storesService: woosmap.map.StoresService;
@@ -202,15 +202,14 @@ function displayStoresAndLocation(
   }
 
   if (stores && latlng) {
-    activeLocation = new woosmap.map.Marker({
+    const markerContent = document.createElement("img");
+    markerContent.src = "https://images.woosmap.com/marker.png";
+    markerContent.style.width = "32px";
+    markerContent.style.height = "50px";
+
+    activeLocation = new woosmap.map.marker.AdvancedMarkerElement({
       position: latlng,
-      icon: {
-        url: "https://images.woosmap.com/marker.png",
-        scaledSize: {
-          height: 50,
-          width: 32,
-        },
-      },
+      content: markerContent,
     });
 
     const bounds = calculateLatLngBounds(stores);
@@ -220,11 +219,12 @@ function displayStoresAndLocation(
   }
 }
 
-function initMap() {
-  map = new window.woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    mapOptions,
-  );
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions(mapOptions);
   storesOverlay = new woosmap.map.StoresOverlay(storesStyle);
   storesOverlay.setMap(map);
 
@@ -247,12 +247,7 @@ function handleError(error: woosmap.map.errors.APIError) {
   console.error("Error:", error);
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_stores_search]
 
 export {};
diff --git a/samples/stores-search/stores-search.json b/samples/stores-search/stores-search.json
index 6ff9cf5a..af7ff943 100644
--- a/samples/stores-search/stores-search.json
+++ b/samples/stores-search/stores-search.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/transit-advanced/index.njk b/samples/transit-advanced/index.njk
index 2ca15dc8..431e4b28 100644
--- a/samples/transit-advanced/index.njk
+++ b/samples/transit-advanced/index.njk
@@ -101,7 +101,7 @@
             <div class="linear-progress hide">
                 <div class="progress"></div>
             </div>
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="infoMessage">Drag markers to update route</div>
             <div class="tableContainer">
             </div>
diff --git a/samples/transit-advanced/index.ts b/samples/transit-advanced/index.ts
index 4a503c77..51cd886f 100644
--- a/samples/transit-advanced/index.ts
+++ b/samples/transit-advanced/index.ts
@@ -2,32 +2,47 @@
 let map: woosmap.map.Map;
 let transitService: woosmap.map.TransitService;
 let transitRequest: woosmap.map.transit.TransitRouteRequest;
-let markersArray: woosmap.map.Marker[] = [];
+let markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
 let transitRenderer: woosmap.map.TransitRenderer;
 
+function createMarkerContent(label: string, url: string): HTMLElement {
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = "26px";
+  container.style.height = "38px";
+
+  const icon = document.createElement("img");
+  icon.src = url;
+  icon.style.width = "26px";
+  icon.style.height = "38px";
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = label;
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "13px";
+  labelSpan.style.top = "15px";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  return container;
+}
+
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
   url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+): woosmap.map.marker.AdvancedMarkerElement {
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    draggable: true,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(13, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    gmpDraggable: true,
+    content: createMarkerContent(label, url),
   });
 }
 
@@ -46,8 +61,8 @@ function displayTransitMarkers(): void {
     "https://images.woosmap.com/marker-blue.svg",
   );
   originMarker.addListener("dragend", () => {
-    transitRequest.origin = originMarker.getPosition();
-    setLatLngToContainer(originContainer, originMarker.getPosition().toJSON());
+    transitRequest.origin = originMarker.position!;
+    setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateTransit();
   });
   const destinationMarker = createMarker(
@@ -56,10 +71,10 @@ function displayTransitMarkers(): void {
     "https://images.woosmap.com/marker-red.svg",
   );
   destinationMarker.addListener("dragend", () => {
-    transitRequest.destination = destinationMarker.getPosition();
+    transitRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
       destinationContainer,
-      destinationMarker.getPosition().toJSON(),
+      destinationMarker.position!.toJSON(),
     );
     calculateTransit();
   });
@@ -395,8 +410,12 @@ function initUI(): void {
   );
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: { lat: 45.482604, lng: 9.16924 },
     zoom: 11,
   });
@@ -410,12 +429,7 @@ function initMap(): void {
   calculateTransit();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_transit_advanced]
 
 export {};
diff --git a/samples/transit-advanced/transit-advanced.json b/samples/transit-advanced/transit-advanced.json
index 77c856e2..33408e0c 100644
--- a/samples/transit-advanced/transit-advanced.json
+++ b/samples/transit-advanced/transit-advanced.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/transit-roadbook/index.njk b/samples/transit-roadbook/index.njk
index e6c91bc7..89ac73d2 100644
--- a/samples/transit-roadbook/index.njk
+++ b/samples/transit-roadbook/index.njk
@@ -103,7 +103,7 @@
             <div class="linear-progress hide">
                 <div class="progress"></div>
             </div>
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="infoMessage">Drag markers to update route</div>
             <div class="tableContainer">
             </div>
diff --git a/samples/transit-roadbook/index.ts b/samples/transit-roadbook/index.ts
index 09bd776a..145670f6 100644
--- a/samples/transit-roadbook/index.ts
+++ b/samples/transit-roadbook/index.ts
@@ -2,32 +2,47 @@
 let map: woosmap.map.Map;
 let transitService: woosmap.map.TransitService;
 let transitRequest: woosmap.map.transit.TransitRouteRequest;
-let markersArray: woosmap.map.Marker[] = [];
+let markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
 let transitRenderer: woosmap.map.TransitRenderer;
 
+function createMarkerContent(label: string, url: string): HTMLElement {
+  const container = document.createElement("div");
+  container.style.position = "relative";
+  container.style.width = "26px";
+  container.style.height = "38px";
+
+  const icon = document.createElement("img");
+  icon.src = url;
+  icon.style.width = "26px";
+  icon.style.height = "38px";
+  container.appendChild(icon);
+
+  const labelSpan = document.createElement("span");
+  labelSpan.textContent = label;
+  labelSpan.style.position = "absolute";
+  labelSpan.style.left = "13px";
+  labelSpan.style.top = "15px";
+  labelSpan.style.transform = "translate(-50%, -50%)";
+  labelSpan.style.color = "white";
+  labelSpan.style.fontSize = "12px";
+  labelSpan.style.fontWeight = "bold";
+  container.appendChild(labelSpan);
+
+  return container;
+}
+
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
   url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+): woosmap.map.marker.AdvancedMarkerElement {
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    draggable: true,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(13, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    gmpDraggable: true,
+    content: createMarkerContent(label, url),
   });
 }
 
@@ -46,8 +61,8 @@ function displayTransitMarkers(): void {
     "https://images.woosmap.com/marker-blue.svg",
   );
   originMarker.addListener("dragend", () => {
-    transitRequest.origin = originMarker.getPosition();
-    setLatLngToContainer(originContainer, originMarker.getPosition().toJSON());
+    transitRequest.origin = originMarker.position!;
+    setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateTransit();
   });
   const destinationMarker = createMarker(
@@ -56,10 +71,10 @@ function displayTransitMarkers(): void {
     "https://images.woosmap.com/marker-red.svg",
   );
   destinationMarker.addListener("dragend", () => {
-    transitRequest.destination = destinationMarker.getPosition();
+    transitRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
       destinationContainer,
-      destinationMarker.getPosition().toJSON(),
+      destinationMarker.position!.toJSON(),
     );
     calculateTransit();
   });
@@ -523,8 +538,12 @@ function initUI(): void {
   );
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: { lat: 45.482604, lng: 9.16924 },
     zoom: 11,
   });
@@ -538,12 +557,7 @@ function initMap(): void {
   calculateTransit();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_transit_roadbook]
 
 export {};
diff --git a/samples/transit-roadbook/transit-roadbook.json b/samples/transit-roadbook/transit-roadbook.json
index bdfeff77..9041f41b 100644
--- a/samples/transit-roadbook/transit-roadbook.json
+++ b/samples/transit-roadbook/transit-roadbook.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }
diff --git a/samples/vector-map/index.njk b/samples/vector-map/index.njk
index 8f3c1a0e..920525cf 100644
--- a/samples/vector-map/index.njk
+++ b/samples/vector-map/index.njk
@@ -9,6 +9,6 @@
     </div>
     <!-- [START woosmap_{{ tag }}_div] -->
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/vector-map/index.ts b/samples/vector-map/index.ts
index 2d95ae74..8022f7f3 100644
--- a/samples/vector-map/index.ts
+++ b/samples/vector-map/index.ts
@@ -2,7 +2,9 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   // [START woosmap_vector_map_instantiate_map]
   // The location of London
   const position: woosmap.map.LatLngLiteral = {
@@ -11,7 +13,8 @@ function initMap(): void {
   };
 
   // The map, centered at London
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     zoom: 17,
     center: position,
   });
@@ -29,12 +32,7 @@ function initMap(): void {
   // [END woosmap_vector_tilt]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_vector_map]
 
 export {};
diff --git a/samples/vector-map/vector-map.json b/samples/vector-map/vector-map.json
index 73e33010..ce136a25 100644
--- a/samples/vector-map/vector-map.json
+++ b/samples/vector-map/vector-map.json
@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }
diff --git a/samples/w3w-autocomplete/index.njk b/samples/w3w-autocomplete/index.njk
index cdfe2bee..b1345c6b 100644
--- a/samples/w3w-autocomplete/index.njk
+++ b/samples/w3w-autocomplete/index.njk
@@ -44,7 +44,7 @@
             </div>
             <ul id="suggestions-list"></ul>
         </div>
-        <div id="map"></div>
+        <wmp-map id="map"></wmp-map>
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/w3w-autocomplete/index.ts b/samples/w3w-autocomplete/index.ts
index da55b5b7..fd91c20a 100644
--- a/samples/w3w-autocomplete/index.ts
+++ b/samples/w3w-autocomplete/index.ts
@@ -13,7 +13,7 @@ let inputElement: HTMLInputElement;
 let detailsHTML: HTMLElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
-let marker: woosmap.map.Marker;
+let marker: woosmap.map.marker.AdvancedMarkerElement;
 let debouncedAutosuggestW3W: (
   ...args: any[]
 ) => Promise<What3WordsSuggestionsResponse>;
@@ -115,8 +115,7 @@ function panMap(addressDetail) {
     if (addressDetail.types[0] === "address") {
       zoom = 18;
     }
-    map.setZoom(zoom);
-    map.panTo(addressDetail.geometry.location);
+    map.moveCamera({ zoom, center: addressDetail.geometry.location });
   }
 }
 
@@ -124,15 +123,14 @@ function createAddressMarker(addressDetail) {
   if (marker) {
     marker.setMap(null);
   }
-  marker = new woosmap.map.Marker({
+  const markerContent = document.createElement("img");
+  markerContent.src = "https://images.woosmap.com/marker-alt.png";
+  markerContent.style.width = "37px";
+  markerContent.style.height = "59px";
+
+  marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: addressDetail.geometry.location,
-    icon: {
-      url: "https://images.woosmap.com/marker-alt.png",
-      scaledSize: {
-        height: 59,
-        width: 37,
-      },
-    },
+    content: markerContent,
   });
   marker.setMap(map);
   panMap(addressDetail);
@@ -333,9 +331,13 @@ function displayW3wSuggestion() {
   // [END woosmap_w3w_autocomplete_displayW3wSuggestion]
 }
 
-function initMap() {
+async function initMap() {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
   // [START woosmap_w3w_autocomplete_initMap]
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     center: {
       lat: 48.8534,
       lng: 2.3488,
@@ -447,12 +449,7 @@ function debouncePromise<T, Args extends any[]>(
   };
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_w3w_autocomplete]
 
 export {};
diff --git a/samples/w3w-autocomplete/w3w-autocomplete.json b/samples/w3w-autocomplete/w3w-autocomplete.json
index 7233aeba..15f5a5a1 100644
--- a/samples/w3w-autocomplete/w3w-autocomplete.json
+++ b/samples/w3w-autocomplete/w3w-autocomplete.json
@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }

From 1096bb112d39af80e8628e616b03bc45431d694f Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Thu, 24 Sep 2026 14:25:50 +0200
Subject: [PATCH 03/16] Enable JSX in the per-sample vite/oxc config

Rolldown-vite's oxc transform needs jsx explicitly enabled; without it
every .tsx app build (react-map-*) fails.
---
 samples/vite.config.11ty.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/samples/vite.config.11ty.js b/samples/vite.config.11ty.js
index 350ce457..c52cf826 100644
--- a/samples/vite.config.11ty.js
+++ b/samples/vite.config.11ty.js
@@ -20,6 +20,9 @@ export default defineConfig({
   server: {
     hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
   },
+  oxc: {
+    jsx: "automatic",
+  },
 });
 `;
   },

From 5e8645f47a953647717dfda09e25ed445f7e7fc7 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Fri, 25 Sep 2026 09:28:44 +0200
Subject: [PATCH 04/16] Pass the marker directly as InfoWindow anchor, not
 marker.position

maps-js PR #1580 lets InfoWindow.open() take an AdvancedMarkerElement
anchor directly. Drops the position-snapshot workaround.
---
 samples/infowindow-simple/index.ts        | 4 ++--
 samples/localities-autocomplete/index.ts  | 2 +-
 samples/localities-geocode/index.ts       | 2 +-
 samples/map-clustering-geojson/index.ts   | 2 +-
 samples/map-clustering-stores/index.ts    | 2 +-
 samples/multisearch-map-advanced/index.ts | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts
index 147033f4..074930de 100644
--- a/samples/infowindow-simple/index.ts
+++ b/samples/infowindow-simple/index.ts
@@ -40,9 +40,9 @@ async function initMap(): Promise<void> {
   const infoWindow = new woosmap.map.InfoWindow({});
   infoWindow.setOffset(new woosmap.map.Point(0, -50));
   infoWindow.setContent(londonInfoWindowHTML);
-  infoWindow.open({map, anchor: marker.position});
+  infoWindow.open({map, anchor: marker});
   marker.addListener("click", () => {
-    infoWindow.open({map, anchor: marker.position});
+    infoWindow.open({map, anchor: marker});
   });
 }
 
diff --git a/samples/localities-autocomplete/index.ts b/samples/localities-autocomplete/index.ts
index d2a2a4ab..98eb15b5 100644
--- a/samples/localities-autocomplete/index.ts
+++ b/samples/localities-autocomplete/index.ts
@@ -102,7 +102,7 @@ function displayLocality(
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
-    infoWindow.open({map, anchor: marker.position});
+    infoWindow.open({map, anchor: marker});
     map.flyTo({ center: locality.geometry.location, zoom: 14 });
   }
 }
diff --git a/samples/localities-geocode/index.ts b/samples/localities-geocode/index.ts
index 4f44f88c..ad068f2d 100644
--- a/samples/localities-geocode/index.ts
+++ b/samples/localities-geocode/index.ts
@@ -91,7 +91,7 @@ function displayLocality(
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
-    infoWindow.open({map, anchor: marker.position});
+    infoWindow.open({map, anchor: marker});
     map.setCenter(locality.geometry.location);
     renderResponse(locality);
   }
diff --git a/samples/map-clustering-geojson/index.ts b/samples/map-clustering-geojson/index.ts
index df80c308..0efce5af 100644
--- a/samples/map-clustering-geojson/index.ts
+++ b/samples/map-clustering-geojson/index.ts
@@ -223,7 +223,7 @@ function createMarker(
   });
   marker.addListener("click", () => {
     infoWindow.setContent(`<h3>${feature.properties.name}</h3>`);
-    infoWindow.open({map, anchor: marker.position});
+    infoWindow.open({map, anchor: marker});
   });
   return marker;
 }
diff --git a/samples/map-clustering-stores/index.ts b/samples/map-clustering-stores/index.ts
index dda057f5..7ca8efca 100644
--- a/samples/map-clustering-stores/index.ts
+++ b/samples/map-clustering-stores/index.ts
@@ -244,7 +244,7 @@ function createMarker(
   });
   marker.addListener("click", () => {
     infoWindow.setContent(`<h3>${feature.properties.name}</h3>`);
-    infoWindow.open({map, anchor: marker.position});
+    infoWindow.open({map, anchor: marker});
   });
   return marker;
 }
diff --git a/samples/multisearch-map-advanced/index.ts b/samples/multisearch-map-advanced/index.ts
index 9a1bb992..8df5a697 100644
--- a/samples/multisearch-map-advanced/index.ts
+++ b/samples/multisearch-map-advanced/index.ts
@@ -190,12 +190,12 @@ function displayLocality(result, apiName: string) {
     infoWindow.setOffset(new woosmap.map.Point(0, -50));
     infoWindow.setContent(infoWindowHTML);
     marker.addListener("click", () => {
-      infoWindow.open({map, anchor: marker.position});
+      infoWindow.open({map, anchor: marker});
     });
     map.setCenter(result.geometry.location, { top: 150 });
     map.setZoom(14);
     woosmap.map.event.addListenerOnce(map, "idle", () => {
-      infoWindow.open({map, anchor: marker.position});
+      infoWindow.open({map, anchor: marker});
     });
   }
 }

From d1d0fc06ee488ada26050b71fde38cd99df41a3f Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Fri, 25 Sep 2026 09:41:12 +0200
Subject: [PATCH 05/16] Ship marker-html-css's popover CSS inline with its
 content

AdvancedMarkerElement content attached via map:/setMap() lands in the
map's marker pane inside wmp-map's shadow root, not light DOM. Slotting
only applies to markers declared as wmp-map children in markup.
---
 samples/marker-html-css/index.ts | 85 +++++++++++++++++++++++++++++++-
 1 file changed, 84 insertions(+), 1 deletion(-)

diff --git a/samples/marker-html-css/index.ts b/samples/marker-html-css/index.ts
index eb8bc296..2de3acb5 100644
--- a/samples/marker-html-css/index.ts
+++ b/samples/marker-html-css/index.ts
@@ -7,10 +7,93 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("maps");
   await woosmap.map.importLibrary("marker");
 
+  // Marker content added imperatively (via `map:`/`.setMap()`) is appended
+  // into the map's marker pane, which lives inside <wmp-map>'s shadow root.
+  // Page CSS (style.css) can't reach it there, so the popover's styles ship
+  // inline alongside the content, same as maps-js's own advanced-marker
+  // reference example.
+  const POPOVER_CSS = `
+    .popover {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+    .popover .popover-content {
+      display: flex;
+      align-items: center;
+      background-color: #FFF;
+      color: #1D1D1D;
+      padding: 6px 8px;
+      border-radius: 20px;
+      font-family: Roboto, Arial, sans-serif;
+      font-size: 15px;
+      font-weight: 500;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+    }
+    .popover .popover-content .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f50057;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-right: 6px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+      background-position: center;
+    }
+    .popover .popover-content .price {
+      white-space: nowrap;
+    }
+    .popover .popover-arrow-shadow {
+      position: absolute;
+      bottom: -7px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+      border-top: 7px solid rgba(0, 0, 0, 0.2);
+      filter: blur(2px);
+      z-index: 0;
+    }
+    .popover .popover-arrow {
+      position: absolute;
+      bottom: -6px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 6px solid #FFF;
+      z-index: 1;
+    }
+    .popover.active .popover-content {
+      background-color: #f50057;
+      color: #FFFFFF;
+    }
+    .popover.active .popover-content .icon {
+      background-color: #FFFFFF;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZjUwMDU3Ij48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
+    }
+    .popover.active .popover-arrow {
+      border-top: 6px solid #f50057;
+    }
+  `;
+
   function createMarkerContent(data: MarkerData): HTMLDivElement {
     const div = document.createElement("div");
     div.className = "popover";
-    div.innerHTML = `<div class="popover-content">
+    div.innerHTML = `<style>${POPOVER_CSS}</style>
+                    <div class="popover-content">
                       <span class="icon">️</span>
                       <span class="price">${data.price}</span>
                     </div>

From 9a23478702068834db1a108aa8bbad12aca56c91 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Fri, 25 Sep 2026 10:15:37 +0200
Subject: [PATCH 06/16] Drop marker-html-css's inline CSS workaround

maps-js's AdvancedMarkerElement content now stays in light DOM even for
programmatic markers on a shadow-rooted map, so style.scss's .popover
rules reach it directly again.
---
 samples/marker-html-css/index.ts | 85 +-------------------------------
 1 file changed, 1 insertion(+), 84 deletions(-)

diff --git a/samples/marker-html-css/index.ts b/samples/marker-html-css/index.ts
index 2de3acb5..eb8bc296 100644
--- a/samples/marker-html-css/index.ts
+++ b/samples/marker-html-css/index.ts
@@ -7,93 +7,10 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("maps");
   await woosmap.map.importLibrary("marker");
 
-  // Marker content added imperatively (via `map:`/`.setMap()`) is appended
-  // into the map's marker pane, which lives inside <wmp-map>'s shadow root.
-  // Page CSS (style.css) can't reach it there, so the popover's styles ship
-  // inline alongside the content, same as maps-js's own advanced-marker
-  // reference example.
-  const POPOVER_CSS = `
-    .popover {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: auto;
-      cursor: pointer;
-    }
-    .popover .popover-content {
-      display: flex;
-      align-items: center;
-      background-color: #FFF;
-      color: #1D1D1D;
-      padding: 6px 8px;
-      border-radius: 20px;
-      font-family: Roboto, Arial, sans-serif;
-      font-size: 15px;
-      font-weight: 500;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-      z-index: 1;
-    }
-    .popover .popover-content .icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background-color: #f50057;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      margin-right: 6px;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-      background-position: center;
-    }
-    .popover .popover-content .price {
-      white-space: nowrap;
-    }
-    .popover .popover-arrow-shadow {
-      position: absolute;
-      bottom: -7px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 7px solid rgba(0, 0, 0, 0.2);
-      filter: blur(2px);
-      z-index: 0;
-    }
-    .popover .popover-arrow {
-      position: absolute;
-      bottom: -6px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      height: 0;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 6px solid #FFF;
-      z-index: 1;
-    }
-    .popover.active .popover-content {
-      background-color: #f50057;
-      color: #FFFFFF;
-    }
-    .popover.active .popover-content .icon {
-      background-color: #FFFFFF;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZjUwMDU3Ij48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
-    }
-    .popover.active .popover-arrow {
-      border-top: 6px solid #f50057;
-    }
-  `;
-
   function createMarkerContent(data: MarkerData): HTMLDivElement {
     const div = document.createElement("div");
     div.className = "popover";
-    div.innerHTML = `<style>${POPOVER_CSS}</style>
-                    <div class="popover-content">
+    div.innerHTML = `<div class="popover-content">
                       <span class="icon">️</span>
                       <span class="price">${data.price}</span>
                     </div>

From 185ed004e869569e471dd99f82d7adbed73befc3 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Fri, 25 Sep 2026 10:28:18 +0200
Subject: [PATCH 07/16] Fix camera not applying: use moveCamera(), not
 setOptions()

setOptions() only moves the camera at construction; on the already-built
map every sample grabs via .innerMap, it silently did nothing.
---
 samples/add-map/index.ts                            |  2 +-
 samples/directions-advanced/index.ts                |  2 +-
 samples/directions-simple/index.ts                  |  2 +-
 samples/distance-isochrone/index.ts                 |  2 +-
 samples/distance-matrix-advanced/index.ts           |  2 +-
 samples/distance-matrix/index.ts                    |  2 +-
 samples/draw-shapes-events/index.ts                 |  2 +-
 samples/draw-shapes/index.ts                        |  2 ++
 samples/event-simple/index.ts                       |  2 +-
 samples/geolocation-api/index.ts                    |  4 +++-
 samples/indoor-directions-service/index.ts          |  2 +-
 samples/indoor-map-advanced/index.ts                |  2 +-
 samples/indoor-map-simple/index.ts                  |  2 +-
 samples/indoor-navigation-widget/index.ts           |  4 +++-
 samples/indoor-widget-advanced/index.ts             |  2 +-
 samples/indoor-widget-simple/index.ts               |  1 -
 samples/infowindow-simple/index.ts                  |  2 +-
 samples/localities-api-details-postalcodes/index.ts | 12 +++++++-----
 samples/localities-api-details/index.ts             | 12 +++++++-----
 samples/localities-api-shape/index.ts               | 12 +++++++-----
 samples/localities-autocomplete/index.ts            |  2 +-
 samples/localities-geocode/index.ts                 |  2 +-
 samples/localities-nearby-poi/index.ts              |  6 ++++--
 samples/map-clustering-geojson/index.ts             | 12 +++++++-----
 samples/map-clustering-stores/index.ts              |  6 ++++--
 samples/map-events/index.ts                         |  2 +-
 samples/map-external-layer/index.ts                 |  6 ++++--
 samples/map-style-lightgrey/index.ts                |  6 ++++--
 samples/map-style-night/index.ts                    |  6 ++++--
 samples/map-style-pois/index.ts                     |  6 ++++--
 samples/map-style-retro/index.ts                    |  6 ++++--
 samples/map-type-hybrid/index.ts                    |  6 ++++--
 samples/marker-click-event/index.ts                 |  2 +-
 samples/marker-html-css/index.ts                    |  2 +-
 samples/marker-label/index.ts                       |  2 +-
 samples/marker-simple/index.ts                      |  2 +-
 samples/multisearch-map-advanced/index.ts           |  2 +-
 samples/multisearch-map-simple/index.ts             |  2 +-
 samples/render-shapes-circles/index.ts              |  2 +-
 samples/render-shapes-data-events/index.ts          |  2 +-
 samples/render-shapes-data/index.ts                 |  2 +-
 samples/render-shapes-geojson/index.ts              |  2 +-
 samples/render-shapes-polygons/index.ts             |  2 +-
 samples/render-shapes-polylines/index.ts            |  2 +-
 samples/stores-overlay-click-event/index.ts         |  2 +-
 samples/stores-overlay-query-advanced/index.ts      |  2 +-
 samples/stores-overlay-query/index.ts               |  2 +-
 samples/stores-overlay/index.ts                     |  2 +-
 samples/transit-advanced/index.ts                   |  2 +-
 samples/transit-roadbook/index.ts                   |  2 +-
 samples/vector-map/index.ts                         |  2 +-
 samples/w3w-autocomplete/index.ts                   | 12 +++++++-----
 52 files changed, 110 insertions(+), 79 deletions(-)

diff --git a/samples/add-map/index.ts b/samples/add-map/index.ts
index 4a0ac59b..7ce19592 100644
--- a/samples/add-map/index.ts
+++ b/samples/add-map/index.ts
@@ -14,7 +14,7 @@ async function initMap(): Promise<void> {
 
   // The map, centered at London
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 13,
     center: position,
   });
diff --git a/samples/directions-advanced/index.ts b/samples/directions-advanced/index.ts
index b03c8caa..43598eba 100644
--- a/samples/directions-advanced/index.ts
+++ b/samples/directions-advanced/index.ts
@@ -542,7 +542,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: { lat: 51.5074, lng: -0.1478 },
     zoom: 10,
   });
diff --git a/samples/directions-simple/index.ts b/samples/directions-simple/index.ts
index 2cae5741..295f2e7a 100644
--- a/samples/directions-simple/index.ts
+++ b/samples/directions-simple/index.ts
@@ -9,7 +9,7 @@ async function initMap(): Promise<void> {
   const directionsService = new woosmap.map.DirectionsService();
   const directionsRenderer = new woosmap.map.DirectionsRenderer({});
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 7,
     center: {
       lat: 43.5,
diff --git a/samples/distance-isochrone/index.ts b/samples/distance-isochrone/index.ts
index 161d42d0..5286b284 100644
--- a/samples/distance-isochrone/index.ts
+++ b/samples/distance-isochrone/index.ts
@@ -34,7 +34,7 @@ async function initMap() {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 9,
     center: centerLatLng,
   });
diff --git a/samples/distance-matrix-advanced/index.ts b/samples/distance-matrix-advanced/index.ts
index 1c1eddf5..eedcf36a 100644
--- a/samples/distance-matrix-advanced/index.ts
+++ b/samples/distance-matrix-advanced/index.ts
@@ -427,7 +427,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: { lat: 51.4855, lng: -0.3179 },
     zoom: 6,
   });
diff --git a/samples/distance-matrix/index.ts b/samples/distance-matrix/index.ts
index 1dc94c57..ba362d71 100644
--- a/samples/distance-matrix/index.ts
+++ b/samples/distance-matrix/index.ts
@@ -111,7 +111,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: { lat: 45.53, lng: 2.4 },
     zoom: 10,
   });
diff --git a/samples/draw-shapes-events/index.ts b/samples/draw-shapes-events/index.ts
index 2d5c859b..18d98cd2 100644
--- a/samples/draw-shapes-events/index.ts
+++ b/samples/draw-shapes-events/index.ts
@@ -82,7 +82,7 @@ async function initMap() {
   await woosmap.map.importLibrary("drawing");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 31.54350013250679, lng: -97.13238669872247 },
       zoom: 6.5,
     });
diff --git a/samples/draw-shapes/index.ts b/samples/draw-shapes/index.ts
index 5068a015..68fe02f9 100644
--- a/samples/draw-shapes/index.ts
+++ b/samples/draw-shapes/index.ts
@@ -12,6 +12,8 @@ async function initMap() {
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
       gestureHandling: "greedy",
+    });
+    map.moveCamera({
       center: { lng: 3.878, lat: 43.611 },
       zoom: 15,
     });
diff --git a/samples/event-simple/index.ts b/samples/event-simple/index.ts
index 682f3813..09c160ae 100644
--- a/samples/event-simple/index.ts
+++ b/samples/event-simple/index.ts
@@ -9,7 +9,7 @@ async function initMap() {
   };
   const map = (document.getElementById("map") as woosmap.map.MapElement)
     .innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 13,
     center: position,
   });
diff --git a/samples/geolocation-api/index.ts b/samples/geolocation-api/index.ts
index bd02d404..67f652dc 100644
--- a/samples/geolocation-api/index.ts
+++ b/samples/geolocation-api/index.ts
@@ -56,9 +56,11 @@ function renderUserLocationOnMap({ latitude, accuracy, longitude, viewport }) {
   }
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    center: userPosition,
     zoom,
   });
+  map.moveCamera({
+    center: userPosition,
+  });
   if (viewport) {
     const bounds = {
       east: viewport.northeast.lng,
diff --git a/samples/indoor-directions-service/index.ts b/samples/indoor-directions-service/index.ts
index 8ab3b2d3..9c151221 100644
--- a/samples/indoor-directions-service/index.ts
+++ b/samples/indoor-directions-service/index.ts
@@ -9,7 +9,7 @@ async function initMap() {
 
   venue = "gdn_doc";
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
     });
diff --git a/samples/indoor-map-advanced/index.ts b/samples/indoor-map-advanced/index.ts
index 687f5bdc..e8c0c0f7 100644
--- a/samples/indoor-map-advanced/index.ts
+++ b/samples/indoor-map-advanced/index.ts
@@ -5,7 +5,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
     });
diff --git a/samples/indoor-map-simple/index.ts b/samples/indoor-map-simple/index.ts
index 32e07e7b..91799788 100644
--- a/samples/indoor-map-simple/index.ts
+++ b/samples/indoor-map-simple/index.ts
@@ -5,7 +5,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 19.5,
     });
diff --git a/samples/indoor-navigation-widget/index.ts b/samples/indoor-navigation-widget/index.ts
index 73dda712..0d87ae4f 100644
--- a/samples/indoor-navigation-widget/index.ts
+++ b/samples/indoor-navigation-widget/index.ts
@@ -10,7 +10,9 @@ async function initMap(): Promise<void> {
 
   venue = "gdn_doc";
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({ visualRefresh: true, center: { lat: 43.6066, lng: 3.9218 } });
+  map.moveCamera({
+    center: { lat: 43.6066, lng: 3.9218 },
+  });
 
   const conf: woosmap.map.IndoorRendererOptions = {
     venue: venue,
diff --git a/samples/indoor-widget-advanced/index.ts b/samples/indoor-widget-advanced/index.ts
index cd2a29ac..2bfbe5ee 100644
--- a/samples/indoor-widget-advanced/index.ts
+++ b/samples/indoor-widget-advanced/index.ts
@@ -5,7 +5,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 43.6066, lng: 3.9218 },
       zoom: 5,
     });
diff --git a/samples/indoor-widget-simple/index.ts b/samples/indoor-widget-simple/index.ts
index c5a6ea65..952a4c8d 100644
--- a/samples/indoor-widget-simple/index.ts
+++ b/samples/indoor-widget-simple/index.ts
@@ -6,7 +6,6 @@ async function initMap(): Promise<void> {
 
   console.log("init map");
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({ visualRefresh: true });
 
   const conf: woosmap.map.IndoorRendererOptions = {
     defaultFloor: 0, //Render map with default floor
diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts
index 074930de..ff1cd46c 100644
--- a/samples/infowindow-simple/index.ts
+++ b/samples/infowindow-simple/index.ts
@@ -8,7 +8,7 @@ async function initMap(): Promise<void> {
 
   // The map, centered at London
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 10,
       center: {
         lat: 51.57,
diff --git a/samples/localities-api-details-postalcodes/index.ts b/samples/localities-api-details-postalcodes/index.ts
index 5d80c286..6f848b83 100644
--- a/samples/localities-api-details-postalcodes/index.ts
+++ b/samples/localities-api-details-postalcodes/index.ts
@@ -40,13 +40,8 @@ async function initMap(): Promise<void> {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    center: {
-      lat: 48.8534,
-      lng: 2.3488,
-    },
     disableDefaultUI: true,
     gestureHandling: "greedy",
-    zoom: 5,
     styles: [
       {
         featureType: "poi",
@@ -54,6 +49,13 @@ async function initMap(): Promise<void> {
       },
     ],
   });
+  map.moveCamera({
+    center: {
+      lat: 48.8534,
+      lng: 2.3488,
+    },
+    zoom: 5,
+  });
 }
 
 function handleAutocomplete(): void {
diff --git a/samples/localities-api-details/index.ts b/samples/localities-api-details/index.ts
index 54bf89fb..bd872332 100644
--- a/samples/localities-api-details/index.ts
+++ b/samples/localities-api-details/index.ts
@@ -19,13 +19,8 @@ async function initMap(): Promise<void> {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    center: {
-      lat: 48.8534,
-      lng: 2.3488,
-    },
     disableDefaultUI: true,
     gestureHandling: "greedy",
-    zoom: 5,
     styles: [
       {
         featureType: "poi",
@@ -33,6 +28,13 @@ async function initMap(): Promise<void> {
       },
     ],
   });
+  map.moveCamera({
+    center: {
+      lat: 48.8534,
+      lng: 2.3488,
+    },
+    zoom: 5,
+  });
   init();
   manageCountrySelector();
 }
diff --git a/samples/localities-api-shape/index.ts b/samples/localities-api-shape/index.ts
index d3c5d0dc..56875ff0 100644
--- a/samples/localities-api-shape/index.ts
+++ b/samples/localities-api-shape/index.ts
@@ -20,13 +20,8 @@ async function initMap(): Promise<void> {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    center: {
-      lat: 48.8534,
-      lng: 2.3488,
-    },
     disableDefaultUI: true,
     gestureHandling: "greedy",
-    zoom: 5,
     styles: [
       {
         featureType: "poi",
@@ -34,6 +29,13 @@ async function initMap(): Promise<void> {
       },
     ],
   });
+  map.moveCamera({
+    center: {
+      lat: 48.8534,
+      lng: 2.3488,
+    },
+    zoom: 5,
+  });
   init();
   manageCountrySelector();
 }
diff --git a/samples/localities-autocomplete/index.ts b/samples/localities-autocomplete/index.ts
index 98eb15b5..83fed634 100644
--- a/samples/localities-autocomplete/index.ts
+++ b/samples/localities-autocomplete/index.ts
@@ -11,7 +11,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
     });
diff --git a/samples/localities-geocode/index.ts b/samples/localities-geocode/index.ts
index ad068f2d..81e2ab41 100644
--- a/samples/localities-geocode/index.ts
+++ b/samples/localities-geocode/index.ts
@@ -11,7 +11,7 @@ async function initMap() {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 12,
     });
diff --git a/samples/localities-nearby-poi/index.ts b/samples/localities-nearby-poi/index.ts
index 39c129d7..df1ef8a6 100644
--- a/samples/localities-nearby-poi/index.ts
+++ b/samples/localities-nearby-poi/index.ts
@@ -119,8 +119,6 @@ async function initMap() {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      center: { lat: 40.71399, lng: -74.00499 },
-      zoom: 14,
       styles: [
         {
           featureType: "point_of_interest",
@@ -133,6 +131,10 @@ async function initMap() {
         },
       ],
     });
+    map.moveCamera({
+      center: { lat: 40.71399, lng: -74.00499 },
+      zoom: 14,
+    });
   localitiesService = new woosmap.map.LocalitiesService();
 
   map.addListener("click", (e) => {
diff --git a/samples/map-clustering-geojson/index.ts b/samples/map-clustering-geojson/index.ts
index 0efce5af..16b15421 100644
--- a/samples/map-clustering-geojson/index.ts
+++ b/samples/map-clustering-geojson/index.ts
@@ -22,11 +22,6 @@ async function initMap(): Promise<void> {
   infoWindow = new woosmap.map.InfoWindow({});
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      center: {
-        lat: 55.5,
-        lng: -4,
-      },
-      zoom: 5.7,
       styles: [
         {
           elementType: "geometry",
@@ -96,6 +91,13 @@ async function initMap(): Promise<void> {
         },
       ],
     });
+    map.moveCamera({
+      center: {
+        lat: 55.5,
+        lng: -4,
+      },
+      zoom: 5.7,
+    });
 
   fetchGeoJsonData(GEOJSON_URL).then((data) => {
     const geojsonFeatures = data["features"];
diff --git a/samples/map-clustering-stores/index.ts b/samples/map-clustering-stores/index.ts
index 7ca8efca..50dfc23e 100644
--- a/samples/map-clustering-stores/index.ts
+++ b/samples/map-clustering-stores/index.ts
@@ -21,8 +21,6 @@ async function initMap(): Promise<void> {
   infoWindow = new woosmap.map.InfoWindow({});
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      center: { lat: 53.3485, lng: -6.257 },
-      zoom: 12,
       styles: [
         {
           elementType: "geometry",
@@ -92,6 +90,10 @@ async function initMap(): Promise<void> {
         },
       ],
     });
+    map.moveCamera({
+      center: { lat: 53.3485, lng: -6.257 },
+      zoom: 12,
+    });
 
   getAllStores().then((stores) => {
     index = new Supercluster(SUPERCLUSTER_OPTIONS).load(stores);
diff --git a/samples/map-events/index.ts b/samples/map-events/index.ts
index 688b790e..27ca4435 100644
--- a/samples/map-events/index.ts
+++ b/samples/map-events/index.ts
@@ -19,7 +19,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("maps");
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: {
         lat: 51.52,
         lng: -0.13,
diff --git a/samples/map-external-layer/index.ts b/samples/map-external-layer/index.ts
index 7e365e5f..562d0cc4 100644
--- a/samples/map-external-layer/index.ts
+++ b/samples/map-external-layer/index.ts
@@ -17,11 +17,13 @@ async function initMap() {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      zoom: 15.64,
-      center: centerLatLng,
       mapTypeControl: true,
       styles: STYLE_PRESETS.lightgrey,
     });
+    map.moveCamera({
+      zoom: 15.64,
+      center: centerLatLng,
+    });
 
   styleSelect = document.getElementById(
     "woosmap-style-select",
diff --git a/samples/map-style-lightgrey/index.ts b/samples/map-style-lightgrey/index.ts
index d4590743..72f20ef1 100644
--- a/samples/map-style-lightgrey/index.ts
+++ b/samples/map-style-lightgrey/index.ts
@@ -6,8 +6,6 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      zoom: 12,
-      center: position,
       styles: [
         {
           elementType: "geometry",
@@ -77,6 +75,10 @@ async function initMap(): Promise<void> {
         },
       ],
     });
+    map.moveCamera({
+      zoom: 12,
+      center: position,
+    });
 }
 
 initMap();
diff --git a/samples/map-style-night/index.ts b/samples/map-style-night/index.ts
index 7e807cf0..7edd740f 100644
--- a/samples/map-style-night/index.ts
+++ b/samples/map-style-night/index.ts
@@ -9,8 +9,6 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      zoom: 15,
-      center: position,
       styles: [
         {
           elementType: "geometry",
@@ -101,6 +99,10 @@ async function initMap(): Promise<void> {
         },
       ],
     });
+    map.moveCamera({
+      zoom: 15,
+      center: position,
+    });
 }
 
 initMap();
diff --git a/samples/map-style-pois/index.ts b/samples/map-style-pois/index.ts
index 71a917da..8147007e 100644
--- a/samples/map-style-pois/index.ts
+++ b/samples/map-style-pois/index.ts
@@ -9,8 +9,6 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      zoom: 16,
-      center: position,
       styles: [
         {
         "featureType": "point_of_interest",
@@ -23,6 +21,10 @@ async function initMap(): Promise<void> {
     }
     ],
     });
+    map.moveCamera({
+      zoom: 16,
+      center: position,
+    });
 }
 
 initMap();
diff --git a/samples/map-style-retro/index.ts b/samples/map-style-retro/index.ts
index 47f22f1a..fe33a948 100644
--- a/samples/map-style-retro/index.ts
+++ b/samples/map-style-retro/index.ts
@@ -6,8 +6,6 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-      zoom: 14,
-      center: position,
       styles: [
         {
           elementType: "geometry",
@@ -133,6 +131,10 @@ async function initMap(): Promise<void> {
         },
       ],
     });
+    map.moveCamera({
+      zoom: 14,
+      center: position,
+    });
 }
 
 initMap();
diff --git a/samples/map-type-hybrid/index.ts b/samples/map-type-hybrid/index.ts
index 60ad8d6f..62678c53 100644
--- a/samples/map-type-hybrid/index.ts
+++ b/samples/map-type-hybrid/index.ts
@@ -13,11 +13,13 @@ async function initMap(): Promise<void> {
   // The map, initialized with hybrid satellite view
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    zoom: 16,
-    center: position,
     mapTypeId: woosmap.map.MapTypeId.HYBRID,
     mapTypeControl: true,
   });
+  map.moveCamera({
+    zoom: 16,
+    center: position,
+  });
 
   // Listen for map type changes via the built-in control
   map.addListener("mapTypeId_changed", () => {
diff --git a/samples/marker-click-event/index.ts b/samples/marker-click-event/index.ts
index 871b8b5b..d2f77acc 100644
--- a/samples/marker-click-event/index.ts
+++ b/samples/marker-click-event/index.ts
@@ -155,7 +155,7 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement)
     .innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 0,
     center: center,
   });
diff --git a/samples/marker-html-css/index.ts b/samples/marker-html-css/index.ts
index eb8bc296..eeeeb375 100644
--- a/samples/marker-html-css/index.ts
+++ b/samples/marker-html-css/index.ts
@@ -22,7 +22,7 @@ async function initMap(): Promise<void> {
   const center: woosmap.map.LatLngLiteral = { lat: 51.5074, lng: -0.1278 };
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 13,
       center: center,
     });
diff --git a/samples/marker-label/index.ts b/samples/marker-label/index.ts
index 75461f9d..350ae757 100644
--- a/samples/marker-label/index.ts
+++ b/samples/marker-label/index.ts
@@ -32,7 +32,7 @@ async function initMap(): Promise<void> {
   }
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 10,
       center: center,
     });
diff --git a/samples/marker-simple/index.ts b/samples/marker-simple/index.ts
index 6abcb5a9..a9eccbb7 100644
--- a/samples/marker-simple/index.ts
+++ b/samples/marker-simple/index.ts
@@ -7,7 +7,7 @@ async function initMap(): Promise<void> {
 
   const map = (document.getElementById("map") as woosmap.map.MapElement)
     .innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 13,
     center: center,
   });
diff --git a/samples/multisearch-map-advanced/index.ts b/samples/multisearch-map-advanced/index.ts
index 8df5a697..47092d67 100644
--- a/samples/multisearch-map-advanced/index.ts
+++ b/samples/multisearch-map-advanced/index.ts
@@ -82,7 +82,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
     });
diff --git a/samples/multisearch-map-simple/index.ts b/samples/multisearch-map-simple/index.ts
index 365de126..baa9bd93 100644
--- a/samples/multisearch-map-simple/index.ts
+++ b/samples/multisearch-map-simple/index.ts
@@ -61,7 +61,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 51.50940214, lng: -0.133012 },
       zoom: 4,
     });
diff --git a/samples/render-shapes-circles/index.ts b/samples/render-shapes-circles/index.ts
index dbd71909..72be01e9 100644
--- a/samples/render-shapes-circles/index.ts
+++ b/samples/render-shapes-circles/index.ts
@@ -139,7 +139,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: {
       lat: 40,
       lng: 0,
diff --git a/samples/render-shapes-data-events/index.ts b/samples/render-shapes-data-events/index.ts
index f8b2df73..da7aa9a8 100644
--- a/samples/render-shapes-data-events/index.ts
+++ b/samples/render-shapes-data-events/index.ts
@@ -39,7 +39,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 29.65, lng: -97.74 },
       zoom: 6,
     });
diff --git a/samples/render-shapes-data/index.ts b/samples/render-shapes-data/index.ts
index 0c37dfa0..5262c2b0 100644
--- a/samples/render-shapes-data/index.ts
+++ b/samples/render-shapes-data/index.ts
@@ -202,7 +202,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 53.3430183, lng: -6.25321 },
       zoom: 14,
     });
diff --git a/samples/render-shapes-geojson/index.ts b/samples/render-shapes-geojson/index.ts
index d20bec9a..a0062627 100644
--- a/samples/render-shapes-geojson/index.ts
+++ b/samples/render-shapes-geojson/index.ts
@@ -6,7 +6,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 53.51, lng: 8.15 },
       zoom: 4,
     });
diff --git a/samples/render-shapes-polygons/index.ts b/samples/render-shapes-polygons/index.ts
index 38d43f89..e387c2d1 100644
--- a/samples/render-shapes-polygons/index.ts
+++ b/samples/render-shapes-polygons/index.ts
@@ -7,7 +7,7 @@ async function initMap() {
 
   // [START woosmap_add_map_instantiate_map]
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 29.65, lng: -97.74 },
       zoom: 6,
     });
diff --git a/samples/render-shapes-polylines/index.ts b/samples/render-shapes-polylines/index.ts
index c77b91e1..197c5bbd 100644
--- a/samples/render-shapes-polylines/index.ts
+++ b/samples/render-shapes-polylines/index.ts
@@ -6,7 +6,7 @@ async function initMap() {
   await woosmap.map.importLibrary("maps");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       center: { lat: 51.505, lng: -0.118 },
       zoom: 15,
     });
diff --git a/samples/stores-overlay-click-event/index.ts b/samples/stores-overlay-click-event/index.ts
index ef4fc621..d4b258b1 100644
--- a/samples/stores-overlay-click-event/index.ts
+++ b/samples/stores-overlay-click-event/index.ts
@@ -29,7 +29,7 @@ async function initMap(): Promise<void> {
   };
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 13,
       center: center,
     });
diff --git a/samples/stores-overlay-query-advanced/index.ts b/samples/stores-overlay-query-advanced/index.ts
index f5ae87ca..6d0538bc 100644
--- a/samples/stores-overlay-query-advanced/index.ts
+++ b/samples/stores-overlay-query-advanced/index.ts
@@ -86,7 +86,7 @@ async function initMap(): Promise<void> {
     },
   };
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 8,
       center: center,
     });
diff --git a/samples/stores-overlay-query/index.ts b/samples/stores-overlay-query/index.ts
index 17fb68a2..cb0d35ff 100644
--- a/samples/stores-overlay-query/index.ts
+++ b/samples/stores-overlay-query/index.ts
@@ -29,7 +29,7 @@ async function initMap(): Promise<void> {
   };
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 8,
       center: center,
     });
diff --git a/samples/stores-overlay/index.ts b/samples/stores-overlay/index.ts
index b75882aa..838c5a7f 100644
--- a/samples/stores-overlay/index.ts
+++ b/samples/stores-overlay/index.ts
@@ -31,7 +31,7 @@ async function initMap(): Promise<void> {
 
   // [START woosmap_stores_overlay_add_map]
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
       zoom: 4,
       center: center,
     });
diff --git a/samples/transit-advanced/index.ts b/samples/transit-advanced/index.ts
index 51cd886f..25a65b09 100644
--- a/samples/transit-advanced/index.ts
+++ b/samples/transit-advanced/index.ts
@@ -415,7 +415,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: { lat: 45.482604, lng: 9.16924 },
     zoom: 11,
   });
diff --git a/samples/transit-roadbook/index.ts b/samples/transit-roadbook/index.ts
index 145670f6..b9b43031 100644
--- a/samples/transit-roadbook/index.ts
+++ b/samples/transit-roadbook/index.ts
@@ -543,7 +543,7 @@ async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("marker");
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     center: { lat: 45.482604, lng: 9.16924 },
     zoom: 11,
   });
diff --git a/samples/vector-map/index.ts b/samples/vector-map/index.ts
index 8022f7f3..b6fab30b 100644
--- a/samples/vector-map/index.ts
+++ b/samples/vector-map/index.ts
@@ -14,7 +14,7 @@ async function initMap(): Promise<void> {
 
   // The map, centered at London
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
-  map.setOptions({
+  map.moveCamera({
     zoom: 17,
     center: position,
   });
diff --git a/samples/w3w-autocomplete/index.ts b/samples/w3w-autocomplete/index.ts
index fd91c20a..1d17734a 100644
--- a/samples/w3w-autocomplete/index.ts
+++ b/samples/w3w-autocomplete/index.ts
@@ -338,13 +338,8 @@ async function initMap() {
   // [START woosmap_w3w_autocomplete_initMap]
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions({
-    center: {
-      lat: 48.8534,
-      lng: 2.3488,
-    },
     disableDefaultUI: true,
     gestureHandling: "greedy",
-    zoom: 5,
     styles: [
       {
         featureType: "poi",
@@ -352,6 +347,13 @@ async function initMap() {
       },
     ],
   });
+  map.moveCamera({
+    center: {
+      lat: 48.8534,
+      lng: 2.3488,
+    },
+    zoom: 5,
+  });
   // [END woosmap_w3w_autocomplete_initMap]
   debouncedAutosuggestW3W = debouncePromise(autosuggestW3W, 0);
   initUI();

From 4e37a524571089271a223a86cedb68e0d85cd77d Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Fri, 25 Sep 2026 10:37:27 +0200
Subject: [PATCH 08/16] Use PinElement for solid-color markers, not raster
 images

Flat teardrop icons render natively; labeled markers drop their manual
span-positioning code for glyphText.
---
 samples/directions-advanced/index.ts          | 46 +++----------------
 samples/distance-isochrone/index.ts           |  8 +---
 samples/distance-matrix-advanced/index.ts     | 44 +++---------------
 samples/distance-matrix/index.ts              | 40 +++-------------
 samples/event-simple/index.ts                 | 17 +++----
 samples/infowindow-simple/index.ts            | 12 +++--
 .../index.ts                                  | 12 +++--
 samples/localities-api-details/index.ts       | 12 +++--
 samples/localities-api-shape/index.ts         | 12 +++--
 samples/localities-autocomplete/index.ts      | 12 +++--
 samples/localities-geocode/index.ts           | 12 +++--
 samples/localities-nearby-poi/index.ts        | 12 +++--
 samples/marker-click-event/index.ts           | 23 ++++++----
 samples/marker-label/index.ts                 | 29 +++---------
 samples/marker-simple/index.ts                | 12 +++--
 samples/multisearch-map-advanced/index.ts     | 12 +++--
 samples/multisearch-map-simple/index.ts       | 12 +++--
 samples/react-map-with-localities/index.tsx   | 12 +++--
 samples/stores-list-sync-map/index.ts         | 12 +++--
 samples/stores-search/index.ts                | 12 +++--
 samples/transit-advanced/index.ts             | 44 +++---------------
 samples/transit-roadbook/index.ts             | 44 +++---------------
 samples/w3w-autocomplete/index.ts             | 12 +++--
 23 files changed, 159 insertions(+), 304 deletions(-)

diff --git a/samples/directions-advanced/index.ts b/samples/directions-advanced/index.ts
index 43598eba..8db2e424 100644
--- a/samples/directions-advanced/index.ts
+++ b/samples/directions-advanced/index.ts
@@ -15,42 +15,18 @@ const travelModeIcons = {
   CYCLING: "https://images.woosmap.com/directions/bicycle_black.png",
 };
 
-function createMarkerContent(label: string, url: string): HTMLElement {
-  const container = document.createElement("div");
-  container.style.position = "relative";
-  container.style.width = "26px";
-  container.style.height = "38px";
-
-  const icon = document.createElement("img");
-  icon.src = url;
-  icon.style.width = "26px";
-  icon.style.height = "38px";
-  container.appendChild(icon);
-
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = label;
-  labelSpan.style.position = "absolute";
-  labelSpan.style.left = "13px";
-  labelSpan.style.top = "15px";
-  labelSpan.style.transform = "translate(-50%, -50%)";
-  labelSpan.style.color = "white";
-  labelSpan.style.fontSize = "12px";
-  labelSpan.style.fontWeight = "bold";
-  container.appendChild(labelSpan);
-
-  return container;
-}
-
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
-  url: string,
+  background: string,
 ): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
   return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
     gmpDraggable: true,
-    content: createMarkerContent(label, url),
+    content: pin.element,
   });
 }
 
@@ -63,21 +39,13 @@ function clearMarkers(): void {
 
 function displayDirectionsMarkers(): void {
   clearMarkers();
-  const originMarker = createMarker(
-    directionsRequest.origin,
-    "O",
-    "https://images.woosmap.com/marker-blue.svg",
-  );
+  const originMarker = createMarker(directionsRequest.origin, "O", "#3d5afe");
   originMarker.addListener("dragend", () => {
     directionsRequest.origin = originMarker.position!;
     setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateDirections();
   });
-  const destinationMarker = createMarker(
-    directionsRequest.destination,
-    "D",
-    "https://images.woosmap.com/marker-red.svg",
-  );
+  const destinationMarker = createMarker(directionsRequest.destination, "D", "#f50057");
   destinationMarker.addListener("dragend", () => {
     directionsRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
@@ -95,7 +63,7 @@ function displayDirectionsMarkers(): void {
     const waypointMarker = createMarker(
       waypoint.location as woosmap.map.LatLngLiteral,
       (index + 1).toString(),
-      "https://images.woosmap.com/marker-green.svg",
+      "#03BDA5",
     );
     waypointMarker.addListener("dragend", () => {
       waypoints[index].location = waypointMarker.position!.toJSON();
diff --git a/samples/distance-isochrone/index.ts b/samples/distance-isochrone/index.ts
index 5286b284..304bcb22 100644
--- a/samples/distance-isochrone/index.ts
+++ b/samples/distance-isochrone/index.ts
@@ -10,12 +10,8 @@ const centerLatLng: woosmap.map.LatLngLiteral = {
   lat: 51.5,
   lng: -0.234,
 };
-function createMarkerContent(): HTMLImageElement {
-  const img = document.createElement("img");
-  img.src = "https://images.woosmap.com/icons/pin-red.png";
-  img.style.width = "26px";
-  img.style.height = "38px";
-  return img;
+function createMarkerContent(): HTMLElement {
+  return new woosmap.map.marker.PinElement().element;
 }
 function createMarker(
   position: woosmap.map.LatLngLiteral,
diff --git a/samples/distance-matrix-advanced/index.ts b/samples/distance-matrix-advanced/index.ts
index eedcf36a..a6267275 100644
--- a/samples/distance-matrix-advanced/index.ts
+++ b/samples/distance-matrix-advanced/index.ts
@@ -10,41 +10,17 @@ const origins: woosmap.map.LatLngLiteral[] = [];
 const destinations: woosmap.map.LatLngLiteral[] = [];
 let line: woosmap.map.Polyline | null = null;
 
-function createMarkerContent(label: string, url: string): HTMLElement {
-  const container = document.createElement("div");
-  container.style.position = "relative";
-  container.style.width = "26px";
-  container.style.height = "38px";
-
-  const icon = document.createElement("img");
-  icon.src = url;
-  icon.style.width = "26px";
-  icon.style.height = "38px";
-  container.appendChild(icon);
-
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = label;
-  labelSpan.style.position = "absolute";
-  labelSpan.style.left = "13px";
-  labelSpan.style.top = "15px";
-  labelSpan.style.transform = "translate(-50%, -50%)";
-  labelSpan.style.color = "white";
-  labelSpan.style.fontSize = "12px";
-  labelSpan.style.fontWeight = "bold";
-  container.appendChild(labelSpan);
-
-  return container;
-}
-
 function createMarker(
   position: woosmap.map.LatLngLiteral,
   label: string,
-  url: string,
+  background: string,
 ): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
   return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    content: createMarkerContent(label, url),
+    content: pin.element,
   });
 }
 
@@ -63,22 +39,14 @@ function displayMatrixMarkers(
   origins.forEach((origin, index) => {
     bounds.extend(origin);
     markersArray.push(
-      createMarker(
-        origin,
-        (index + 1).toString(),
-        "https://images.woosmap.com/marker-blue.svg",
-      ),
+      createMarker(origin, (index + 1).toString(), "#3d5afe"),
     );
   });
 
   destinations.forEach((destination, index) => {
     bounds.extend(destination);
     markersArray.push(
-      createMarker(
-        destination,
-        (index + 1).toString(),
-        "https://images.woosmap.com/marker-red.svg",
-      ),
+      createMarker(destination, (index + 1).toString(), "#f50057"),
     );
   });
 
diff --git a/samples/distance-matrix/index.ts b/samples/distance-matrix/index.ts
index ba362d71..73446a85 100644
--- a/samples/distance-matrix/index.ts
+++ b/samples/distance-matrix/index.ts
@@ -5,41 +5,17 @@ let distanceService: woosmap.map.DistanceService;
 let distanceRequest: woosmap.map.distance.DistanceMatrixRequest;
 const markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 
-function createMarkerContent(label: string, url: string): HTMLElement {
-  const container = document.createElement("div");
-  container.style.position = "relative";
-  container.style.width = "26px";
-  container.style.height = "38px";
-
-  const icon = document.createElement("img");
-  icon.src = url;
-  icon.style.width = "26px";
-  icon.style.height = "38px";
-  container.appendChild(icon);
-
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = label;
-  labelSpan.style.position = "absolute";
-  labelSpan.style.left = "14px";
-  labelSpan.style.top = "15px";
-  labelSpan.style.transform = "translate(-50%, -50%)";
-  labelSpan.style.color = "white";
-  labelSpan.style.fontSize = "12px";
-  labelSpan.style.fontWeight = "bold";
-  container.appendChild(labelSpan);
-
-  return container;
-}
-
 function createMarker(
   position: woosmap.map.LatLng,
   label: string,
-  url: string,
+  background: string,
 ): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
   return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    content: createMarkerContent(label, url),
+    content: pin.element,
   });
 }
 
@@ -50,18 +26,14 @@ function fitBoundsToMatrix(
   origins.forEach((origin) => {
     bounds.extend(origin);
     markersArray.push(
-      createMarker(origin, "O", "https://images.woosmap.com/marker-blue.svg"),
+      createMarker(origin, "O", "#3d5afe"),
     );
   });
 
   destinations.forEach((destination) => {
     bounds.extend(destination);
     markersArray.push(
-      createMarker(
-        destination,
-        "D",
-        "https://images.woosmap.com/marker-red.svg",
-      ),
+      createMarker(destination, "D", "#f50057"),
     );
   });
 
diff --git a/samples/event-simple/index.ts b/samples/event-simple/index.ts
index 09c160ae..4c21df3f 100644
--- a/samples/event-simple/index.ts
+++ b/samples/event-simple/index.ts
@@ -14,14 +14,16 @@ async function initMap() {
     center: position,
   });
 
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker.png";
-  markerContent.style.width = "32px";
-  markerContent.style.height = "50px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#5588FF",
+    borderColor: "#3D6FE0",
+    glyphColor: "#FFFFFF",
+  });
 
   const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: map.getCenter(),
-    content: markerContent,
+    content: pin.element,
     gmpClickable: true,
   });
   marker.setMap(map);
@@ -32,9 +34,8 @@ async function initMap() {
     marker.setPosition(map.getCenter());
   });
   marker.addListener("click", () => {
-    markerContent.src = "https://images.woosmap.com/icons/pin-green.png";
-    markerContent.style.width = "28px";
-    markerContent.style.height = "42px";
+    pin.background = "#00BDA5";
+    pin.borderColor = "#004941";
   });
 }
 
diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts
index ff1cd46c..d9fdd458 100644
--- a/samples/infowindow-simple/index.ts
+++ b/samples/infowindow-simple/index.ts
@@ -23,17 +23,19 @@ async function initMap(): Promise<void> {
     "<p>London is the capital and largest city of England and the United Kingdom. <a href='https://en.wikipedia.org/wiki/London'>Wikipedia →</a></p>" +
     "</div>";
 
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker.png";
-  markerContent.style.width = "32px";
-  markerContent.style.height = "50px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#5588FF",
+    borderColor: "#3D6FE0",
+    glyphColor: "#FFFFFF",
+  });
 
   const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: {
       lat: 51.515,
       lng: -0.13,
     },
-    content: markerContent,
+    content: pin.element,
     gmpClickable: true,
     map,
   });
diff --git a/samples/localities-api-details-postalcodes/index.ts b/samples/localities-api-details-postalcodes/index.ts
index 6f848b83..f8ce94af 100644
--- a/samples/localities-api-details-postalcodes/index.ts
+++ b/samples/localities-api-details-postalcodes/index.ts
@@ -178,14 +178,16 @@ function createAddressMarker(
     markerAddress.setMap(null);
   }
   if (addressDetail && addressDetail.geometry) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "37px";
-    markerContent.style.height = "59px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: addressDetail.geometry.location,
-      content: markerContent,
+      content: pin.element,
     });
     markerAddress.setMap(map);
     panMap(addressDetail);
diff --git a/samples/localities-api-details/index.ts b/samples/localities-api-details/index.ts
index bd872332..8f57cc24 100644
--- a/samples/localities-api-details/index.ts
+++ b/samples/localities-api-details/index.ts
@@ -46,14 +46,16 @@ function createAddressMarker(
     markerAddress.setMap(null);
   }
   if (addressDetail && addressDetail.geometry) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "37px";
-    markerContent.style.height = "59px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: addressDetail.geometry.location,
-      content: markerContent,
+      content: pin.element,
     });
     markerAddress.setMap(map);
     panMap(addressDetail);
diff --git a/samples/localities-api-shape/index.ts b/samples/localities-api-shape/index.ts
index 56875ff0..d6e9e8d3 100644
--- a/samples/localities-api-shape/index.ts
+++ b/samples/localities-api-shape/index.ts
@@ -64,14 +64,16 @@ function createAddressMarker(addressDetail) {
   }
   if (addressDetail?.geometry) {
     const position = addressDetail.geometry.location;
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "37px";
-    markerContent.style.height = "59px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     markerAddress = new woosmap.map.marker.AdvancedMarkerElement({
       position: position,
-      content: markerContent,
+      content: pin.element,
     });
     markerAddress.setMap(map);
 
diff --git a/samples/localities-autocomplete/index.ts b/samples/localities-autocomplete/index.ts
index 83fed634..0b725427 100644
--- a/samples/localities-autocomplete/index.ts
+++ b/samples/localities-autocomplete/index.ts
@@ -91,14 +91,16 @@ function displayLocality(
     infoWindow.close();
   }
   if (locality?.geometry) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "32px";
-    markerContent.style.height = "50px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: locality.geometry.location,
-      content: markerContent,
+      content: pin.element,
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
diff --git a/samples/localities-geocode/index.ts b/samples/localities-geocode/index.ts
index 81e2ab41..476cb6ca 100644
--- a/samples/localities-geocode/index.ts
+++ b/samples/localities-geocode/index.ts
@@ -80,14 +80,16 @@ function displayLocality(
   }
 
   if (locality?.geometry) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "32px";
-    markerContent.style.height = "50px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: locality.geometry.location,
-      content: markerContent,
+      content: pin.element,
     });
     marker.setMap(map);
     infoWindow.setContent(`<span>${locality.formatted_address}</span>`);
diff --git a/samples/localities-nearby-poi/index.ts b/samples/localities-nearby-poi/index.ts
index df1ef8a6..6d813d6f 100644
--- a/samples/localities-nearby-poi/index.ts
+++ b/samples/localities-nearby-poi/index.ts
@@ -152,14 +152,16 @@ async function initMap() {
     page: 1,
     limit: 10,
   };
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker.png";
-  markerContent.style.width = "32px";
-  markerContent.style.height = "50px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#5588FF",
+    borderColor: "#3D6FE0",
+    glyphColor: "#FFFFFF",
+  });
 
   marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: { lat: 0, lng: 0 },
-    content: markerContent,
+    content: pin.element,
   });
 
   initUI();
diff --git a/samples/marker-click-event/index.ts b/samples/marker-click-event/index.ts
index d2f77acc..73247a42 100644
--- a/samples/marker-click-event/index.ts
+++ b/samples/marker-click-event/index.ts
@@ -142,15 +142,12 @@ async function initMap(): Promise<void> {
 
   const center: woosmap.map.LatLngLiteral = { lat: 40.0, lng: 0.0 };
 
-  const CITY_PIN_URL = "https://images.woosmap.com/icons/pin-red.png";
-  const SELECTED_CITY_PIN_URL = "https://images.woosmap.com/icons/pin-green.png";
+  const { PinElement } = woosmap.map.marker;
+  const CITY_PIN_COLORS = { background: "#EA4335", borderColor: "#B31412" };
+  const SELECTED_CITY_PIN_COLORS = { background: "#00BDA5", borderColor: "#004941" };
 
-  function createCityMarkerContent(): HTMLImageElement {
-    const img = document.createElement("img");
-    img.src = CITY_PIN_URL;
-    img.style.width = "26px";
-    img.style.height = "38px";
-    return img;
+  function createCityMarkerContent(): woosmap.map.marker.PinElement {
+    return new PinElement(CITY_PIN_COLORS);
   }
 
   const map = (document.getElementById("map") as woosmap.map.MapElement)
@@ -185,11 +182,17 @@ async function initMap(): Promise<void> {
     cityData: Record<string, string>,
   ) => {
     if (markerSelected) {
-      (markerSelected.content as HTMLImageElement).src = CITY_PIN_URL;
+      Object.assign(
+        markerSelected.content as woosmap.map.marker.PinElement,
+        CITY_PIN_COLORS,
+      );
     }
 
     markerSelected = marker;
-    (marker.content as HTMLImageElement).src = SELECTED_CITY_PIN_URL;
+    Object.assign(
+      marker.content as woosmap.map.marker.PinElement,
+      SELECTED_CITY_PIN_COLORS,
+    );
 
     const infoElement = document.getElementById("info") as HTMLElement;
     infoElement.innerHTML = `<strong>${cityData.cityName}</strong><span>: ${cityData.citizens}</span>`;
diff --git a/samples/marker-label/index.ts b/samples/marker-label/index.ts
index 350ae757..2d5bd892 100644
--- a/samples/marker-label/index.ts
+++ b/samples/marker-label/index.ts
@@ -6,29 +6,12 @@ async function initMap(): Promise<void> {
   const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
 
   function createMarkerContent(label: string): HTMLElement {
-    const container = document.createElement("div");
-    container.style.position = "relative";
-    container.style.width = "26px";
-    container.style.height = "38px";
-
-    const icon = document.createElement("img");
-    icon.src = "https://images.woosmap.com/marker-red.svg";
-    icon.style.width = "26px";
-    icon.style.height = "38px";
-    container.appendChild(icon);
-
-    const labelSpan = document.createElement("span");
-    labelSpan.textContent = label;
-    labelSpan.style.position = "absolute";
-    labelSpan.style.left = "14px";
-    labelSpan.style.top = "15px";
-    labelSpan.style.transform = "translate(-50%, -50%)";
-    labelSpan.style.color = "white";
-    labelSpan.style.fontSize = "12px";
-    labelSpan.style.fontWeight = "bold";
-    container.appendChild(labelSpan);
-
-    return container;
+    const { PinElement } = woosmap.map.marker;
+    return new PinElement({
+      background: "#f50057",
+      glyphText: label,
+      glyphColor: "#FFFFFF",
+    }).element;
   }
 
   const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
diff --git a/samples/marker-simple/index.ts b/samples/marker-simple/index.ts
index a9eccbb7..8f791db6 100644
--- a/samples/marker-simple/index.ts
+++ b/samples/marker-simple/index.ts
@@ -12,14 +12,16 @@ async function initMap(): Promise<void> {
     center: center,
   });
 
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker.png";
-  markerContent.style.width = "32px";
-  markerContent.style.height = "50px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#5588FF",
+    borderColor: "#3D6FE0",
+    glyphColor: "#FFFFFF",
+  });
 
   const marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: map.getCenter(),
-    content: markerContent,
+    content: pin.element,
   });
   marker.setMap(map);
 }
diff --git a/samples/multisearch-map-advanced/index.ts b/samples/multisearch-map-advanced/index.ts
index 47092d67..3eae19c9 100644
--- a/samples/multisearch-map-advanced/index.ts
+++ b/samples/multisearch-map-advanced/index.ts
@@ -151,14 +151,16 @@ function formatPredictionList(result): string {
 }
 
 function createMarker(result) {
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker.png";
-  markerContent.style.width = "32px";
-  markerContent.style.height = "50px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#5588FF",
+    borderColor: "#3D6FE0",
+    glyphColor: "#FFFFFF",
+  });
 
   return new woosmap.map.marker.AdvancedMarkerElement({
     position: result.geometry.location,
-    content: markerContent,
+    content: pin.element,
     gmpClickable: true,
   });
 }
diff --git a/samples/multisearch-map-simple/index.ts b/samples/multisearch-map-simple/index.ts
index baa9bd93..ad67014a 100644
--- a/samples/multisearch-map-simple/index.ts
+++ b/samples/multisearch-map-simple/index.ts
@@ -132,14 +132,16 @@ function displayLocality(result) {
     marker.setMap(null);
   }
   if (result?.geometry) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "32px";
-    markerContent.style.height = "50px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     marker = new woosmap.map.marker.AdvancedMarkerElement({
       position: result.geometry.location,
-      content: markerContent,
+      content: pin.element,
     });
     marker.setMap(map);
     map.flyTo({ center: result.geometry.location, zoom: 14 });
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index 47b751f3..7b438bc5 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -130,14 +130,16 @@ const Marker: React.FC<woosmap.map.marker.AdvancedMarkerElementOptions> = ({
       setMarker(null);
     }
     if (mapInstance && position) {
-      const markerContent = document.createElement("img");
-      markerContent.src = "https://images.woosmap.com/marker.png";
-      markerContent.style.width = "32px";
-      markerContent.style.height = "50px";
+      const { PinElement } = woosmap.map.marker;
+      const pin = new PinElement({
+        background: "#5588FF",
+        borderColor: "#3D6FE0",
+        glyphColor: "#FFFFFF",
+      });
 
       const localityMarker = new woosmap.map.marker.AdvancedMarkerElement({
         position,
-        content: markerContent,
+        content: pin.element,
       });
       localityMarker.setMap(mapInstance);
       setMarker(localityMarker);
diff --git a/samples/stores-list-sync-map/index.ts b/samples/stores-list-sync-map/index.ts
index 6fa5cebf..b5800910 100644
--- a/samples/stores-list-sync-map/index.ts
+++ b/samples/stores-list-sync-map/index.ts
@@ -187,14 +187,16 @@ function handleSearchResults(originalLatLng: woosmap.map.LatLngLiteral) {
   }
 
   if (originalLatLng) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "32px";
-    markerContent.style.height = "50px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     activeLocation = new woosmap.map.marker.AdvancedMarkerElement({
       position: originalLatLng,
-      content: markerContent,
+      content: pin.element,
     });
     activeLocation.setMap(map);
     map.moveCamera({ center: originalLatLng, zoom: 8 });
diff --git a/samples/stores-search/index.ts b/samples/stores-search/index.ts
index f0cac3f1..6915a3ef 100644
--- a/samples/stores-search/index.ts
+++ b/samples/stores-search/index.ts
@@ -202,14 +202,16 @@ function displayStoresAndLocation(
   }
 
   if (stores && latlng) {
-    const markerContent = document.createElement("img");
-    markerContent.src = "https://images.woosmap.com/marker.png";
-    markerContent.style.width = "32px";
-    markerContent.style.height = "50px";
+    const { PinElement } = woosmap.map.marker;
+    const pin = new PinElement({
+      background: "#5588FF",
+      borderColor: "#3D6FE0",
+      glyphColor: "#FFFFFF",
+    });
 
     activeLocation = new woosmap.map.marker.AdvancedMarkerElement({
       position: latlng,
-      content: markerContent,
+      content: pin.element,
     });
 
     const bounds = calculateLatLngBounds(stores);
diff --git a/samples/transit-advanced/index.ts b/samples/transit-advanced/index.ts
index 25a65b09..03688ca6 100644
--- a/samples/transit-advanced/index.ts
+++ b/samples/transit-advanced/index.ts
@@ -7,42 +7,18 @@ let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
 let transitRenderer: woosmap.map.TransitRenderer;
 
-function createMarkerContent(label: string, url: string): HTMLElement {
-  const container = document.createElement("div");
-  container.style.position = "relative";
-  container.style.width = "26px";
-  container.style.height = "38px";
-
-  const icon = document.createElement("img");
-  icon.src = url;
-  icon.style.width = "26px";
-  icon.style.height = "38px";
-  container.appendChild(icon);
-
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = label;
-  labelSpan.style.position = "absolute";
-  labelSpan.style.left = "13px";
-  labelSpan.style.top = "15px";
-  labelSpan.style.transform = "translate(-50%, -50%)";
-  labelSpan.style.color = "white";
-  labelSpan.style.fontSize = "12px";
-  labelSpan.style.fontWeight = "bold";
-  container.appendChild(labelSpan);
-
-  return container;
-}
-
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
-  url: string,
+  background: string,
 ): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
   return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
     gmpDraggable: true,
-    content: createMarkerContent(label, url),
+    content: pin.element,
   });
 }
 
@@ -55,21 +31,13 @@ function clearMarkers(): void {
 
 function displayTransitMarkers(): void {
   clearMarkers();
-  const originMarker = createMarker(
-    transitRequest.origin,
-    "O",
-    "https://images.woosmap.com/marker-blue.svg",
-  );
+  const originMarker = createMarker(transitRequest.origin, "O", "#3d5afe");
   originMarker.addListener("dragend", () => {
     transitRequest.origin = originMarker.position!;
     setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateTransit();
   });
-  const destinationMarker = createMarker(
-    transitRequest.destination,
-    "D",
-    "https://images.woosmap.com/marker-red.svg",
-  );
+  const destinationMarker = createMarker(transitRequest.destination, "D", "#f50057");
   destinationMarker.addListener("dragend", () => {
     transitRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
diff --git a/samples/transit-roadbook/index.ts b/samples/transit-roadbook/index.ts
index b9b43031..9c225c70 100644
--- a/samples/transit-roadbook/index.ts
+++ b/samples/transit-roadbook/index.ts
@@ -7,42 +7,18 @@ let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
 let transitRenderer: woosmap.map.TransitRenderer;
 
-function createMarkerContent(label: string, url: string): HTMLElement {
-  const container = document.createElement("div");
-  container.style.position = "relative";
-  container.style.width = "26px";
-  container.style.height = "38px";
-
-  const icon = document.createElement("img");
-  icon.src = url;
-  icon.style.width = "26px";
-  icon.style.height = "38px";
-  container.appendChild(icon);
-
-  const labelSpan = document.createElement("span");
-  labelSpan.textContent = label;
-  labelSpan.style.position = "absolute";
-  labelSpan.style.left = "13px";
-  labelSpan.style.top = "15px";
-  labelSpan.style.transform = "translate(-50%, -50%)";
-  labelSpan.style.color = "white";
-  labelSpan.style.fontSize = "12px";
-  labelSpan.style.fontWeight = "bold";
-  container.appendChild(labelSpan);
-
-  return container;
-}
-
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
-  url: string,
+  background: string,
 ): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
   return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
     gmpDraggable: true,
-    content: createMarkerContent(label, url),
+    content: pin.element,
   });
 }
 
@@ -55,21 +31,13 @@ function clearMarkers(): void {
 
 function displayTransitMarkers(): void {
   clearMarkers();
-  const originMarker = createMarker(
-    transitRequest.origin,
-    "O",
-    "https://images.woosmap.com/marker-blue.svg",
-  );
+  const originMarker = createMarker(transitRequest.origin, "O", "#3d5afe");
   originMarker.addListener("dragend", () => {
     transitRequest.origin = originMarker.position!;
     setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateTransit();
   });
-  const destinationMarker = createMarker(
-    transitRequest.destination,
-    "D",
-    "https://images.woosmap.com/marker-red.svg",
-  );
+  const destinationMarker = createMarker(transitRequest.destination, "D", "#f50057");
   destinationMarker.addListener("dragend", () => {
     transitRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
diff --git a/samples/w3w-autocomplete/index.ts b/samples/w3w-autocomplete/index.ts
index 1d17734a..590a8788 100644
--- a/samples/w3w-autocomplete/index.ts
+++ b/samples/w3w-autocomplete/index.ts
@@ -123,14 +123,16 @@ function createAddressMarker(addressDetail) {
   if (marker) {
     marker.setMap(null);
   }
-  const markerContent = document.createElement("img");
-  markerContent.src = "https://images.woosmap.com/marker-alt.png";
-  markerContent.style.width = "37px";
-  markerContent.style.height = "59px";
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({
+    background: "#E00084",
+    borderColor: "#B3006A",
+    glyphColor: "#FFFFFF",
+  });
 
   marker = new woosmap.map.marker.AdvancedMarkerElement({
     position: addressDetail.geometry.location,
-    content: markerContent,
+    content: pin.element,
   });
   marker.setMap(map);
   panMap(addressDetail);

From 97a7d80f8a2a60b14076bab085fbc8698861a52b Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 13:04:33 +0200
Subject: [PATCH 09/16] Bump @types/woosmap.map to 1.4.28

Feature moved from woosmap.map.data to woosmap.map.Data in the types.
---
 package-lock.json              | 8 ++++----
 package.json                   | 2 +-
 samples/stores-search/index.ts | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 14231508..0967e530 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@playwright/test": "^1.60.0",
         "@types/geojson": "^7946.0.16",
         "@types/supercluster": "^7.1.3",
-        "@types/woosmap.map": "^1.4.26",
+        "@types/woosmap.map": "^1.4.28",
         "@typescript-eslint/eslint-plugin": "^8.60.1",
         "@typescript-eslint/parser": "^8.15.0",
         "chalk": "^5.6.2",
@@ -2753,9 +2753,9 @@
       }
     },
     "node_modules/@types/woosmap.map": {
-      "version": "1.4.26",
-      "resolved": "https://registry.npmjs.org/@types/woosmap.map/-/woosmap.map-1.4.26.tgz",
-      "integrity": "sha512-n5Sg3ZoVORSMG7PpSll0QZYYrLFAmeOvaxWg1Q2CKDodU4XUCecONRkZpEdQK2fMu0qqpSCvYR/ZfXQVH/ZhYg==",
+      "version": "1.4.28",
+      "resolved": "https://registry.npmjs.org/@types/woosmap.map/-/woosmap.map-1.4.28.tgz",
+      "integrity": "sha512-BeO7QMvkoeqA/B+YGoVeoPAiqwBwpCd9pAybSqRSlYqgsxwkt6jMWQgaY5VfOstVExQ2NfX9XPyJpE6fAccMzg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 05e6372a..880a97b5 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@playwright/test": "^1.60.0",
     "@types/geojson": "^7946.0.16",
     "@types/supercluster": "^7.1.3",
-    "@types/woosmap.map": "^1.4.26",
+    "@types/woosmap.map": "^1.4.28",
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.15.0",
     "chalk": "^5.6.2",
diff --git a/samples/stores-search/index.ts b/samples/stores-search/index.ts
index 6915a3ef..ec67bfc3 100644
--- a/samples/stores-search/index.ts
+++ b/samples/stores-search/index.ts
@@ -230,7 +230,7 @@ async function initMap() {
   storesOverlay = new woosmap.map.StoresOverlay(storesStyle);
   storesOverlay.setMap(map);
 
-  map.data.setStyle((feature: woosmap.map.data.Feature) => {
+  map.data.setStyle((feature: woosmap.map.Data.Feature) => {
     const iconPint = feature.getProperty("highlighted")
       ? "https://images.woosmap.com/starbucks-marker-selected.svg"
       : "https://images.woosmap.com/starbucks-marker.svg";

From e1f40da6c28c37d5b858fb72b225cd6be8f50334 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 13:38:02 +0200
Subject: [PATCH 10/16] Pass the sample's libraries and language to the shim

widgets is not an importLibrary() name, so the indoor widget samples never fetched their bundle.
---
 src/_includes/layout.njk | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
index 3bf3142f..d8203708 100644
--- a/src/_includes/layout.njk
+++ b/src/_includes/layout.njk
@@ -30,11 +30,13 @@
       const E = "The Woosmap Maps JavaScript API";
       const woosmap = w.woosmap || (w.woosmap = {});
       const maps = woosmap.map || (woosmap.map = {});
-      const libs = new Set(), params = new URLSearchParams();
+      // Seed with the sample's configured libraries: some (e.g. widgets) are
+      // not importLibrary() names and only load through the script URL.
+      const libs = new Set(String(g.libraries || "").split(",").filter(Boolean)), params = new URLSearchParams();
       const load = () => p || (p = new Promise((res, rej) => {
         const s = d.createElement("script");
         params.set("libraries", [...libs].join(","));
-        for (const k in g) params.set(k, g[k]);
+        for (const k in g) if (k !== "libraries" && g[k]) params.set(k, g[k]);
         params.set("callback", "woosmap.map." + CB);
         s.src = "{{ WOOSMAP_SDK_HOST }}/map/map.js?" + params;
         maps[CB] = res;
@@ -47,7 +49,7 @@
         maps[L] = (name, ...args) =>
           libs.add(name) && load().then(() => maps[L](name, ...args));
       }
-    })({ key: "{{ WOOSMAP_PUBLIC_API_KEY }}" });
+    })({ key: "{{ WOOSMAP_PUBLIC_API_KEY }}", libraries: "{{ libraries }}", language: "{{ language }}" });
     </script>
     {% else %}
     <script src="{{ WOOSMAP_SDK_HOST }}/map/map.js?key={{ WOOSMAP_PUBLIC_API_KEY }}&callback={{ callback }}{% if libraries|length %}&libraries={{ libraries }}{% endif %}{% if language %}&language={{ language }}{% endif %}"

From 9cff871d865c8a9956d559433da8f003209a3e9b Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 13:37:44 +0200
Subject: [PATCH 11/16] Restyle map-external-layer's map, don't build a second

---
 samples/map-external-layer/index.ts | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/samples/map-external-layer/index.ts b/samples/map-external-layer/index.ts
index 562d0cc4..d437cc50 100644
--- a/samples/map-external-layer/index.ts
+++ b/samples/map-external-layer/index.ts
@@ -59,7 +59,7 @@ function readOpacity(): number {
 
 function onStyleChange() {
   applyStyle(styleSelect.value);
-  // Recreating the map wipes overlays — reapply the current layer.
+  // Restyling reloads the base style, which drops overlays: reapply the current layer.
   applyLayer(layerSelect.value, readOpacity());
 }
 
@@ -76,17 +76,7 @@ function onOpacityChange() {
 }
 
 function applyStyle(name: string) {
-  const styles = STYLE_PRESETS[name] ?? [];
-  map = new woosmap.map.Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      visualRefresh: true,
-      zoom: map.getZoom(),
-      center: map.getCenter(),
-      mapTypeControl: true,
-      styles,
-    },
-  );
+  map.setOptions({ styles: STYLE_PRESETS[name] ?? [] });
 }
 
 function applyLayer(provider: string, opacity: number) {

From c271811559a0b96eccdc57bf3c3d4ac51db82546 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 13:51:33 +0200
Subject: [PATCH 12/16] Fix the lint config's stale rule names and run lint in
 CI

---
 .github/workflows/test.yml       | 1 +
 eslint.config.mjs                | 8 ++++++--
 src/engines/typescript/sample.js | 1 -
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index f90eda7c..418861d5 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -27,3 +27,4 @@ jobs:
             ${{ runner.os }}-node
       - run: npm i
       - run: npm run test:check
+      - run: npm run lint
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 667eb74a..d2b687c7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -33,9 +33,13 @@ export default [
       node: true,
     },
     rules: {
-      "no-unused-vars": [1, { varsIgnorePattern: "init*" }],
+      // The TS rule replaces the base one under @typescript-eslint/recommended,
+      // so the initMap-style callback exemption has to live on it.
+      "no-unused-vars": 0,
+      "@typescript-eslint/no-unused-vars": [2, { varsIgnorePattern: "^init" }],
       "no-var": 2,
-      "@typescript-eslint/no-var-requires": 0,
+      // The build scripts are CommonJS (typescript-eslint v8 renamed no-var-requires).
+      "@typescript-eslint/no-require-imports": 0,
       "prefer-arrow-callback": 2,
     },
   }),
diff --git a/src/engines/typescript/sample.js b/src/engines/typescript/sample.js
index 14f5fe17..cffd70ca 100644
--- a/src/engines/typescript/sample.js
+++ b/src/engines/typescript/sample.js
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 const ts = require("typescript");
 const fs = require("fs");
 const path = require("path");

From 5cffddbd24998e216ac6a0a37c9fcd0f9a2457a3 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 13:51:34 +0200
Subject: [PATCH 13/16] Fix the sample lint errors

Mostly any -> real types now that @types/woosmap.map 1.4.28 covers the API.
---
 samples/datasets-api/index.ts                 | 26 ++++++------
 samples/indoor-navigation-widget/index.ts     |  2 +-
 .../index.ts                                  | 12 +++---
 samples/localities-api-autocomplete/index.ts  | 12 +++---
 .../index.ts                                  | 10 ++---
 samples/localities-api-details/index.ts       | 14 +++----
 samples/localities-api-shape/index.ts         | 17 ++++----
 samples/localities-autocomplete/index.ts      | 12 +++---
 samples/localities-js-api/index.ts            | 42 ++++++++++++-------
 .../localities-js-widget-custom-desc/index.ts | 27 ++++++------
 samples/localities-js-widget/index.ts         | 27 ++++++------
 samples/localities-nearby-poi/index.ts        | 16 ++++---
 samples/map-clustering-geojson/index.ts       | 23 ++++++----
 samples/map-clustering-stores/index.ts        | 23 ++++++----
 .../index.ts                                  | 33 ++++++++-------
 samples/multisearch-js-api/index.ts           | 33 ++++++++-------
 samples/multisearch-map-advanced/index.ts     | 22 ++++++++--
 samples/multisearch-map-simple/index.ts       | 22 ++++++++--
 samples/react-map-basic/index.tsx             | 14 ++++---
 .../react-map-with-custom-overlay/index.tsx   | 30 ++++++++-----
 samples/react-map-with-localities/index.tsx   | 14 ++++---
 samples/store-locator-widget-baidu/index.ts   |  8 +++-
 .../index.ts                                  | 14 ++++++-
 .../index.ts                                  | 18 ++++++--
 .../index.ts                                  |  8 +++-
 samples/store-locator-widget-events/index.ts  | 10 ++++-
 samples/store-locator-widget/index.ts         |  8 +++-
 samples/stores-list-sync-map/index.ts         | 11 +++--
 .../stores-search-autocomplete-api/index.ts   |  6 +--
 samples/stores-search/index.ts                |  8 +++-
 samples/transit-advanced/index.ts             | 18 ++------
 samples/transit-roadbook/index.ts             | 30 ++++---------
 samples/w3w-autocomplete/index.ts             | 18 ++++----
 33 files changed, 345 insertions(+), 243 deletions(-)

diff --git a/samples/datasets-api/index.ts b/samples/datasets-api/index.ts
index 476c1094..b236e882 100644
--- a/samples/datasets-api/index.ts
+++ b/samples/datasets-api/index.ts
@@ -11,7 +11,9 @@ let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let datasetSelect: HTMLSelectElement;
 let operatorSelect: HTMLSelectElement;
-let debouncedLocalitiesAutocomplete: (...args: any[]) => Promise<any>;
+let debouncedLocalitiesAutocomplete: (
+  request: woosmap.map.localities.LocalitiesAutocompleteRequest,
+) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
 let results: HTMLOListElement;
 let resetButton: HTMLButtonElement;
 
@@ -64,7 +66,7 @@ function initDrawing(): void {
     },
   });
   drawTools.addControl(map);
-  drawTools.addListener("draw.create", async (ev) => {
+  drawTools.addListener("draw.create", async () => {
     const collection = drawTools.getAll();
     if (collection.features.length > 1) {
       for (const feature of collection.features.slice(0, -1)) {
@@ -214,7 +216,7 @@ function manageFiltersElements() {
     const selectElement = event.target as HTMLSelectElement;
     updateDataset(selectElement.value);
   });
-  operatorSelect.addEventListener("change", async (ev) => {
+  operatorSelect.addEventListener("change", async () => {
     const collection = drawTools.getAll();
     await intersectCb(collection);
   });
@@ -249,16 +251,16 @@ async function intersectCb(ev) {
 
   await applyOperator(ev.features[0].geometry, operatorSelect.value)
     .then((response) => {
-      const features = [];
+      const features: woosmap.map.GeoJSONFeature[] = [];
       bindResultsToPanel(response.features);
       map.data.forEach((feature) => {
         map.data.remove(feature);
       });
       for (const feature of response.features) {
-        // @ts-ignore TypeDef to be updated
         features.push({
           type: "Feature",
           geometry: feature.geometry,
+          properties: {},
         });
       }
 
@@ -286,8 +288,8 @@ function bindResultsToPanel(features: woosmap.map.GeoJSONFeature[]) {
             resultListItem.innerHTML +
             `<tr><td><b>${key} </b></td><td>${attributes[key]}</td></tr>`;
         }
-      }),
-        results.appendChild(resultListItem);
+      });
+      results.appendChild(resultListItem);
     });
   } else {
     results.innerHTML = "No results found";
@@ -295,19 +297,19 @@ function bindResultsToPanel(features: woosmap.map.GeoJSONFeature[]) {
   }
 }
 // [START woosmap_localities_autocomplete_debounce_promise]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line no-unassigned-vars -- force tsc to maintain the comment above
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
@@ -334,7 +336,7 @@ function debouncePromise<T, Args extends any[]>(
 }
 
 // [END woosmap_localities_autocomplete_debounce_promise] */
-PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-expressions -- force tsc to maintain the comment above
 
 initMap();
 // [END woosmap_datasets_api]
diff --git a/samples/indoor-navigation-widget/index.ts b/samples/indoor-navigation-widget/index.ts
index 0d87ae4f..e44500a5 100644
--- a/samples/indoor-navigation-widget/index.ts
+++ b/samples/indoor-navigation-widget/index.ts
@@ -24,7 +24,7 @@ async function initMap(): Promise<void> {
   indoorRenderer.setMap(map);
 
   // Indoor event that is triggered when the indoor venue is loaded.
-  indoorRenderer.addListener("indoor_venue_loaded", (venue) => {
+  indoorRenderer.addListener("indoor_venue_loaded", () => {
     indoorService = new woosmap.map.IndoorService();
 
     const request: woosmap.map.IndoorDirectionRequest = {
diff --git a/samples/localities-api-autocomplete-advanced/index.ts b/samples/localities-api-autocomplete-advanced/index.ts
index 473ce870..a8f07a32 100644
--- a/samples/localities-api-autocomplete-advanced/index.ts
+++ b/samples/localities-api-autocomplete-advanced/index.ts
@@ -1,9 +1,7 @@
 // [START woosmap_localities_api_autocomplete_advanced]
 const componentsRestriction = [];
 const woosmap_key = "YOUR_API_KEY";
-let debouncedAutocomplete: (
-  ...args: any[]
-) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocomplete: typeof autocompleteAddress;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -80,7 +78,7 @@ function formatPredictionList(locality): string {
   const prediction = locality;
   const predictionClass = "no-viewpoint";
   const matched_substrings = prediction.matched_substrings;
-  let formatted_name = "";
+  let formatted_name: string;
   if (
     prediction.matched_substrings &&
     prediction.matched_substrings.description
@@ -161,17 +159,17 @@ function buildQueryString(params: object) {
   return queryStringParts.join("&");
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/localities-api-autocomplete/index.ts b/samples/localities-api-autocomplete/index.ts
index 9c74ef42..319e5588 100644
--- a/samples/localities-api-autocomplete/index.ts
+++ b/samples/localities-api-autocomplete/index.ts
@@ -1,9 +1,7 @@
 // [START woosmap_localities_api_autocomplete]
 const componentsRestriction = [];
 const woosmap_key = "YOUR_API_KEY";
-let debouncedAutocomplete: (
-  ...args: any[]
-) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocomplete: typeof autocompleteAddress;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -81,7 +79,7 @@ function formatPredictionList(locality): string {
   const prediction = locality;
   const predictionClass = "no-viewpoint";
   const matched_substrings = prediction.matched_substrings;
-  let formatted_name = "";
+  let formatted_name: string;
   if (
     prediction.matched_substrings &&
     prediction.matched_substrings.description
@@ -161,17 +159,17 @@ function buildQueryString(params: object) {
   return queryStringParts.join("&");
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/localities-api-details-postalcodes/index.ts b/samples/localities-api-details-postalcodes/index.ts
index f8ce94af..959b7609 100644
--- a/samples/localities-api-details-postalcodes/index.ts
+++ b/samples/localities-api-details-postalcodes/index.ts
@@ -3,9 +3,7 @@ const woosmap_key = "YOUR_API_KEY";
 const countryRestrictions = ["GB", "JE", "IM", "GG"];
 const types = ["postal_code"];
 let map: woosmap.map.Map;
-let debouncedAutocomplete: (
-  ...args: any[]
-) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocomplete: typeof autocompleteAddress;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -266,17 +264,17 @@ function getLocalitiesDetails(
   ).then((response) => response.json());
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/localities-api-details/index.ts b/samples/localities-api-details/index.ts
index 8f57cc24..49913b2c 100644
--- a/samples/localities-api-details/index.ts
+++ b/samples/localities-api-details/index.ts
@@ -2,9 +2,7 @@
 const componentsRestriction: woosmap.map.localities.LocalitiesComponentRestrictions =
   { country: [] };
 const woosmap_key = "YOUR_API_KEY";
-let debouncedAutocomplete: (
-  ...args: any[]
-) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocomplete: typeof autocompleteAddress;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -156,7 +154,7 @@ function handleAutocomplete(): void {
       .map((country) => `country:${country}`)
       .join("|");
     if (input !== "") {
-      debouncedAutocomplete(input, componentsArgs, woosmap_key)
+      debouncedAutocomplete(input, componentsArgs)
         .then(({ localities }) => displaySuggestions(localities))
         .catch((error) =>
           console.error("Error autocomplete localities:", error),
@@ -196,7 +194,7 @@ function formatPredictionList(locality): string {
   const prediction = locality;
   const predictionClass = "no-viewpoint";
   const matched_substrings = prediction.matched_substrings;
-  let formatted_name = "";
+  let formatted_name: string;
   if (
     prediction.matched_substrings &&
     prediction.matched_substrings.description
@@ -267,17 +265,17 @@ function buildQueryString(params: object) {
   return queryStringParts.join("&");
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/localities-api-shape/index.ts b/samples/localities-api-shape/index.ts
index d6e9e8d3..038438a1 100644
--- a/samples/localities-api-shape/index.ts
+++ b/samples/localities-api-shape/index.ts
@@ -2,9 +2,7 @@
 const componentsRestriction: woosmap.map.localities.LocalitiesComponentRestrictions =
   { country: [] };
 const woosmap_key = "YOUR_API_KEY";
-let debouncedAutocomplete: (
-  ...args: any[]
-) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
+let debouncedAutocomplete: typeof autocompleteAddress;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -41,10 +39,9 @@ async function initMap(): Promise<void> {
 }
 
 function createShape(result: woosmap.map.localities.LocalitiesDetailsResult) {
-  // @ts-ignore TypeDef to be updated
   if (result?.geometry?.shape) {
     hasShape = true;
-    // @ts-ignore TypeDef to be updated
+    // @ts-expect-error shape is typed as a Feature, but the API returns a bare geometry
     map.data.addGeoJson({ type: "Feature", geometry: result.geometry.shape });
     if (result.geometry.viewport) {
       const bounds = {
@@ -180,7 +177,7 @@ function handleAutocomplete(): void {
       .map((country) => `country:${country}`)
       .join("|");
     if (input !== "") {
-      debouncedAutocomplete(input, componentsArgs, woosmap_key)
+      debouncedAutocomplete(input, componentsArgs)
         .then(({ localities }) => displaySuggestions(localities))
         .catch((error) =>
           console.error("Error autocomplete localities:", error),
@@ -220,7 +217,7 @@ function formatPredictionList(locality): string {
   const prediction = locality;
   const predictionClass = "no-viewpoint";
   const matched_substrings = prediction.matched_substrings;
-  let formatted_name = "";
+  let formatted_name: string;
   if (
     prediction.matched_substrings &&
     prediction.matched_substrings.description
@@ -291,17 +288,17 @@ function buildQueryString(params: object) {
   return queryStringParts.join("&");
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/localities-autocomplete/index.ts b/samples/localities-autocomplete/index.ts
index 0b725427..ffeb5a37 100644
--- a/samples/localities-autocomplete/index.ts
+++ b/samples/localities-autocomplete/index.ts
@@ -4,7 +4,7 @@ let marker: woosmap.map.marker.AdvancedMarkerElement;
 let infoWindow: woosmap.map.InfoWindow;
 let localitiesService: woosmap.map.LocalitiesService;
 let request: woosmap.map.localities.LocalitiesAutocompleteRequest;
-let debouncedLocalitiesAutocomplete: (...args: any[]) => Promise<any>;
+let debouncedLocalitiesAutocomplete: woosmap.map.LocalitiesService["autocomplete"];
 
 async function initMap(): Promise<void> {
   await woosmap.map.importLibrary("maps");
@@ -145,19 +145,19 @@ document.addEventListener("click", (event) => {
 });
 
 // [START woosmap_localities_autocomplete_debounce_promise]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line no-unassigned-vars -- force tsc to maintain the comment above
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
@@ -184,7 +184,7 @@ function debouncePromise<T, Args extends any[]>(
 }
 
 // [END woosmap_localities_autocomplete_debounce_promise] */
-PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-expressions -- force tsc to maintain the comment above
 
 initMap();
 // [END woosmap_localities_autocomplete]
diff --git a/samples/localities-js-api/index.ts b/samples/localities-js-api/index.ts
index db0a89c3..9d5506a7 100644
--- a/samples/localities-js-api/index.ts
+++ b/samples/localities-js-api/index.ts
@@ -1,7 +1,29 @@
 // [START woosmap_localities_js_api]
 const customDescription =
   'postal_code:"{name} ({postal_town}) - {administrative_area_level_0}"';
-let localitiesAutocompleteService;
+// The Localities JS API ships no typings: describe the parts this sample uses.
+interface LocalitiesAutocompleteService {
+  autocomplete(
+    request: { input: string; custom_description: string },
+    onSuccess: (
+      response: woosmap.map.localities.LocalitiesAutocompleteResponse,
+    ) => void,
+    onError: (errorCode: number, errorText: string) => void,
+    debounceTime: number,
+  ): void;
+  getDetails(
+    publicId: string,
+    onSuccess: (result: woosmap.map.localities.LocalitiesPredictions) => void,
+  ): void;
+}
+
+interface LocalitiesApiGlobal {
+  localities: {
+    AutocompleteService: new (key: string) => LocalitiesAutocompleteService;
+  };
+}
+
+let localitiesAutocompleteService: LocalitiesAutocompleteService;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -27,8 +49,10 @@ function init(): void {
     inputElement.focus();
   });
 
-  localitiesAutocompleteService =
-    new window.woosmap.localities.AutocompleteService("YOUR_API_KEY");
+  const { localities } = woosmap as unknown as LocalitiesApiGlobal;
+  localitiesAutocompleteService = new localities.AutocompleteService(
+    "YOUR_API_KEY",
+  );
 }
 
 function handleAutocomplete(): void {
@@ -84,7 +108,7 @@ function formatPredictionList(locality): string {
   const prediction = locality;
   const predictionClass = "no-viewpoint";
   const matched_substrings = prediction.matched_substrings;
-  let formatted_name = "";
+  let formatted_name: string;
   if (
     prediction.matched_substrings &&
     prediction.matched_substrings.description
@@ -145,16 +169,6 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    // currently, the localities JS API typings are not exported, so we use `any` here
-    woosmap: {
-      localities: {
-        AutocompleteService: new (key: string) => any;
-      };
-    };
-  }
-}
 // [END woosmap_localities_js_api]
 
 export {};
diff --git a/samples/localities-js-widget-custom-desc/index.ts b/samples/localities-js-widget-custom-desc/index.ts
index c690c087..a5381a4e 100644
--- a/samples/localities-js-widget-custom-desc/index.ts
+++ b/samples/localities-js-widget-custom-desc/index.ts
@@ -1,11 +1,23 @@
 // [START woosmap_localities_js_widget_custom_desc]
+// The Localities JS Widget ships no typings: describe the parts this sample uses.
+interface LocalitiesWidget {
+  addListener(eventName: string, handler: () => void): void;
+  getSelectedSuggestionDetails(): unknown;
+}
+
+interface LocalitiesWidgetGlobal {
+  localities: {
+    Autocomplete: new (inputId: string, options: object) => LocalitiesWidget;
+  };
+}
+
 function init(): void {
   const responseElement = document.getElementById(
     "response-container",
   ) as HTMLElement;
 
-  // @ts-ignore
-  const localitiesWidget = new window.woosmap.localities.Autocomplete(
+  const { localities } = woosmap as unknown as LocalitiesWidgetGlobal;
+  const localitiesWidget = new localities.Autocomplete(
     "autocomplete-input",
     {
       minLength: 3,
@@ -29,17 +41,6 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    // currently, the localities JS Widget typings are not exported, so we use `any` here
-    //@ts-ignore
-    woosmap: {
-      localities: {
-        Autocomplete: new (inputId: string, customConfig: any) => any;
-      };
-    };
-  }
-}
 // [END woosmap_localities_js_widget_custom_desc]
 
 export {};
diff --git a/samples/localities-js-widget/index.ts b/samples/localities-js-widget/index.ts
index 95f4f48c..31ae6b7d 100644
--- a/samples/localities-js-widget/index.ts
+++ b/samples/localities-js-widget/index.ts
@@ -1,11 +1,23 @@
 // [START woosmap_localities_js_widget]
+// The Localities JS Widget ships no typings: describe the parts this sample uses.
+interface LocalitiesWidget {
+  addListener(eventName: string, handler: () => void): void;
+  getSelectedSuggestionDetails(): unknown;
+}
+
+interface LocalitiesWidgetGlobal {
+  localities: {
+    Autocomplete: new (inputId: string, options: object) => LocalitiesWidget;
+  };
+}
+
 function init(): void {
   const responseElement = document.getElementById(
     "response-container",
   ) as HTMLElement;
 
-  //@ts-ignore
-  const localitiesWidget = new window.woosmap.localities.Autocomplete(
+  const { localities } = woosmap as unknown as LocalitiesWidgetGlobal;
+  const localitiesWidget = new localities.Autocomplete(
     "autocomplete-input",
     {},
   );
@@ -23,17 +35,6 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    // currently, the localities JS Widget typings are not exported, so we use `any` here
-    //@ts-ignore
-    woosmap: {
-      localities: {
-        Autocomplete: new (inputId: string, customConfig: any) => any;
-      };
-    };
-  }
-}
 // [END woosmap_localities_js_widget]
 
 export {};
diff --git a/samples/localities-nearby-poi/index.ts b/samples/localities-nearby-poi/index.ts
index 6d813d6f..36da5064 100644
--- a/samples/localities-nearby-poi/index.ts
+++ b/samples/localities-nearby-poi/index.ts
@@ -71,8 +71,12 @@ let localitiesService: woosmap.map.LocalitiesService;
 let autocompleteRequest: woosmap.map.localities.LocalitiesAutocompleteRequest;
 let nearbyRequest: woosmap.map.localities.LocalitiesNearbyRequest;
 
+interface TypeTree {
+  [type: string]: TypeTree;
+}
+
 const buildTree = (availableTypes: string[]) => {
-  const tree = {};
+  const tree: TypeTree = {};
   availableTypes.forEach((type) => {
     const parts = type.split(".");
     let node = tree;
@@ -84,7 +88,7 @@ const buildTree = (availableTypes: string[]) => {
   return tree;
 };
 
-const createList = (node: any, prefix = "") => {
+const createList = (node: TypeTree, prefix = "") => {
   const ul = document.createElement("ul");
   for (const key in node) {
     const fullKey = prefix ? `${prefix}.${key}` : key;
@@ -283,7 +287,6 @@ function performNearbyRequest(
     return;
   }
 
-  //@ts-ignore
   localitiesService.nearby(nearbyRequest).then((responseJson) => {
     drawNearbyZone(requestCenter, nearbyRequest.radius);
     updateResults(responseJson, requestCenter);
@@ -465,9 +468,12 @@ document.addEventListener("click", (event) => {
   }
 });
 
-function debounce(func: (...args: any[]) => void, wait: number) {
+function debounce<Args extends unknown[]>(
+  func: (...args: Args) => void,
+  wait: number,
+) {
   let timeout: ReturnType<typeof setTimeout>;
-  return function executedFunction(...args: any[]) {
+  return function executedFunction(...args: Args) {
     const later = () => {
       clearTimeout(timeout);
       func(...args);
diff --git a/samples/map-clustering-geojson/index.ts b/samples/map-clustering-geojson/index.ts
index 16b15421..9779feab 100644
--- a/samples/map-clustering-geojson/index.ts
+++ b/samples/map-clustering-geojson/index.ts
@@ -8,7 +8,12 @@ let index: Supercluster;
 let markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
 const GEOJSON_URL = "https://demo.woosmap.com/misc/data/uk-all-pubs.geojson";
 const ICON_URL = "https://images.woosmap.com/dot-green.svg"; //
-const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
+type ClusterOrPoint = ReturnType<Supercluster["getClusters"]>[number];
+
+const SUPERCLUSTER_OPTIONS: Supercluster.Options<
+  Supercluster.AnyProps,
+  Supercluster.AnyProps
+> = {
   radius: 40,
   extent: 256,
   maxZoom: 14,
@@ -145,7 +150,7 @@ function clearMarkers(): void {
 }
 
 function createClusterIcon(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   if (!feature.properties.cluster) {
@@ -155,7 +160,7 @@ function createClusterIcon(
 }
 
 function createCluster(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   const count = feature.properties.point_count;
@@ -198,7 +203,7 @@ function createCluster(
     gmpClickable: true,
     map: map,
   });
-  marker.addListener("click", (e) => {
+  marker.addListener("click", () => {
     infoWindow.close();
     const expansionZoom = index.getClusterExpansionZoom(
       feature.properties["cluster_id"],
@@ -209,7 +214,7 @@ function createCluster(
 }
 
 function createMarker(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   const markerContent = document.createElement("img");
@@ -230,13 +235,13 @@ function createMarker(
   return marker;
 }
 
-function debounce<T extends (...args: any[]) => ReturnType<T>>(
-  callback: T,
+function debounce<Args extends unknown[]>(
+  callback: (...args: Args) => void,
   timeout: number,
-): (...args: Parameters<T>) => void {
+): (...args: Args) => void {
   let timer: ReturnType<typeof setTimeout>;
 
-  return (...args: Parameters<T>) => {
+  return (...args: Args) => {
     clearTimeout(timer);
     timer = setTimeout(() => {
       callback(...args);
diff --git a/samples/map-clustering-stores/index.ts b/samples/map-clustering-stores/index.ts
index 50dfc23e..5a6643f3 100644
--- a/samples/map-clustering-stores/index.ts
+++ b/samples/map-clustering-stores/index.ts
@@ -7,7 +7,12 @@ let infoWindow: woosmap.map.InfoWindow;
 let index: Supercluster;
 let markers: woosmap.map.marker.AdvancedMarkerElement[] = [];
 const ICON_URL = "https://images.woosmap.com/dot-green.svg"; //
-const SUPERCLUSTER_OPTIONS: Supercluster.Options<any, any> = {
+type ClusterOrPoint = ReturnType<Supercluster["getClusters"]>[number];
+
+const SUPERCLUSTER_OPTIONS: Supercluster.Options<
+  Supercluster.AnyProps,
+  Supercluster.AnyProps
+> = {
   radius: 30,
   extent: 256,
   maxZoom: 15,
@@ -166,7 +171,7 @@ function clearMarkers(): void {
 }
 
 function createClusterIcon(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   if (!feature.properties.cluster) {
@@ -176,7 +181,7 @@ function createClusterIcon(
 }
 
 function createCluster(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   const count = feature.properties.point_count;
@@ -219,7 +224,7 @@ function createCluster(
     gmpClickable: true,
     map: map,
   });
-  marker.addListener("click", (e) => {
+  marker.addListener("click", () => {
     infoWindow.close();
     const expansionZoom = index.getClusterExpansionZoom(
       feature.properties["cluster_id"],
@@ -230,7 +235,7 @@ function createCluster(
 }
 
 function createMarker(
-  feature: any,
+  feature: ClusterOrPoint,
   latlng: woosmap.map.LatLngLiteral,
 ): woosmap.map.marker.AdvancedMarkerElement {
   const markerContent = document.createElement("img");
@@ -251,13 +256,13 @@ function createMarker(
   return marker;
 }
 
-function debounce<T extends (...args: any[]) => ReturnType<T>>(
-  callback: T,
+function debounce<Args extends unknown[]>(
+  callback: (...args: Args) => void,
   timeout: number,
-): (...args: Parameters<T>) => void {
+): (...args: Args) => void {
   let timer: ReturnType<typeof setTimeout>;
 
-  return (...args: Parameters<T>) => {
+  return (...args: Args) => {
     clearTimeout(timer);
     timer = setTimeout(() => {
       callback(...args);
diff --git a/samples/multisearch-address-form-autofill/index.ts b/samples/multisearch-address-form-autofill/index.ts
index b572cd5f..0c13f43f 100644
--- a/samples/multisearch-address-form-autofill/index.ts
+++ b/samples/multisearch-address-form-autofill/index.ts
@@ -24,7 +24,24 @@ const searchOptions = {
     },
   },
 };
-let multiSearch;
+// The MultiSearch JS API ships no typings: describe the parts this sample uses.
+interface MultiSearchPrediction {
+  id: string;
+  api: string;
+  description?: string;
+  highlight: string;
+}
+
+interface MultiSearch {
+  autocompleteMulti(input: string): Promise<MultiSearchPrediction[]>;
+  detailsMulti(request: { id: string; api: string }): Promise<unknown>;
+}
+
+interface MultiSearchGlobal {
+  multisearch(options: object): MultiSearch;
+}
+
+let multiSearch: MultiSearch;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -58,8 +75,7 @@ function init(): void {
     inputElement.focus();
   });
 
-  // @ts-ignore
-  multiSearch = window.woosmap.multisearch(searchOptions);
+  multiSearch = (woosmap as unknown as MultiSearchGlobal).multisearch(searchOptions);
 }
 
 function handleAutocomplete(): void {
@@ -209,17 +225,6 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    // currently, the MultiSearch JS API typings are not exported, so we use `any` here
-    // @ts-ignore
-    woosmap: {
-      localities: {
-        multisearch: (defaultSearchOptions: any) => any;
-      };
-    };
-  }
-}
 // [END woosmap_multisearch_address_form_autofill]
 
 export {};
diff --git a/samples/multisearch-js-api/index.ts b/samples/multisearch-js-api/index.ts
index cf1a1cae..e2524c36 100644
--- a/samples/multisearch-js-api/index.ts
+++ b/samples/multisearch-js-api/index.ts
@@ -17,7 +17,24 @@ const searchOptions = {
     minInputLength: 6,
   },
 };
-let multiSearch;
+// The MultiSearch JS API ships no typings: describe the parts this sample uses.
+interface MultiSearchPrediction {
+  id: string;
+  api: string;
+  description?: string;
+  highlight: string;
+}
+
+interface MultiSearch {
+  autocompleteMulti(input: string): Promise<MultiSearchPrediction[]>;
+  detailsMulti(request: { id: string; api: string }): Promise<unknown>;
+}
+
+interface MultiSearchGlobal {
+  multisearch(options: object): MultiSearch;
+}
+
+let multiSearch: MultiSearch;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -43,8 +60,7 @@ function init(): void {
     inputElement.focus();
   });
 
-  // @ts-ignore
-  multiSearch = window.woosmap.multisearch(searchOptions);
+  multiSearch = (woosmap as unknown as MultiSearchGlobal).multisearch(searchOptions);
 }
 
 function handleAutocomplete(): void {
@@ -140,17 +156,6 @@ document.addEventListener("DOMContentLoaded", () => {
   init();
 });
 
-declare global {
-  interface Window {
-    // currently, the MultiSearch JS API typings are not exported, so we use `any` here
-    // @ts-ignore
-    woosmap: {
-      localities: {
-        multisearch: (defaultSearchOptions: any) => any;
-      };
-    };
-  }
-}
 // [END woosmap_multisearch_js_api]
 
 export {};
diff --git a/samples/multisearch-map-advanced/index.ts b/samples/multisearch-map-advanced/index.ts
index 3eae19c9..484e6c3d 100644
--- a/samples/multisearch-map-advanced/index.ts
+++ b/samples/multisearch-map-advanced/index.ts
@@ -31,7 +31,24 @@ const searchOptions = {
     },
   },
 };
-let multiSearch;
+// The MultiSearch JS API ships no typings: describe the parts this sample uses.
+interface MultiSearchPrediction {
+  id: string;
+  api: string;
+  description?: string;
+  highlight: string;
+}
+
+interface MultiSearch {
+  autocompleteMulti(input: string): Promise<MultiSearchPrediction[]>;
+  detailsMulti(request: { id: string; api: string }): Promise<unknown>;
+}
+
+interface MultiSearchGlobal {
+  multisearch(options: object): MultiSearch;
+}
+
+let multiSearch: MultiSearch;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -73,8 +90,7 @@ function initSearch(): void {
     inputElement.focus();
   });
 
-  // @ts-ignore
-  multiSearch = woosmap.multisearch(searchOptions);
+  multiSearch = (woosmap as unknown as MultiSearchGlobal).multisearch(searchOptions);
 }
 
 async function initMap(): Promise<void> {
diff --git a/samples/multisearch-map-simple/index.ts b/samples/multisearch-map-simple/index.ts
index ad67014a..cf584af8 100644
--- a/samples/multisearch-map-simple/index.ts
+++ b/samples/multisearch-map-simple/index.ts
@@ -14,7 +14,24 @@ const searchOptions = {
     minInputLength: 5,
   },
 };
-let multiSearch;
+// The MultiSearch JS API ships no typings: describe the parts this sample uses.
+interface MultiSearchPrediction {
+  id: string;
+  api: string;
+  description?: string;
+  highlight: string;
+}
+
+interface MultiSearch {
+  autocompleteMulti(input: string): Promise<MultiSearchPrediction[]>;
+  detailsMulti(request: { id: string; api: string }): Promise<unknown>;
+}
+
+interface MultiSearchGlobal {
+  multisearch(options: object): MultiSearch;
+}
+
+let multiSearch: MultiSearch;
 let inputElement: HTMLInputElement;
 let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
@@ -52,8 +69,7 @@ function initSearch(): void {
     inputElement.focus();
   });
 
-  // @ts-ignore
-  multiSearch = woosmap.multisearch(searchOptions);
+  multiSearch = (woosmap as unknown as MultiSearchGlobal).multisearch(searchOptions);
 }
 
 async function initMap(): Promise<void> {
diff --git a/samples/react-map-basic/index.tsx b/samples/react-map-basic/index.tsx
index 70e6b1be..cabc8855 100644
--- a/samples/react-map-basic/index.tsx
+++ b/samples/react-map-basic/index.tsx
@@ -9,8 +9,12 @@ import React, {
   useState,
 } from "react";
 
-// Define the types for the global Woosmap object
-declare const woosmap: any;
+// The shim reads and writes `window.woosmap` before the API is loaded.
+type LoaderWindow = {
+  woosmap?: {
+    map?: Record<string, (name: string, ...args: unknown[]) => unknown>;
+  };
+};
 
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
@@ -18,7 +22,7 @@ declare const woosmap: any;
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
-    const w = window as any,
+    const w = window as unknown as LoaderWindow,
       d = document;
     const L = "importLibrary",
       CB = "__ib__";
@@ -61,7 +65,7 @@ function useWoosmap(apiKey: string) {
 }
 
 // Contexts for Woosmap library
-const MapContext = createContext<any>(null);
+const MapContext = createContext<typeof woosmap | null>(null);
 
 interface WoosmapAPIProviderProps {
   apiKey: string;
@@ -120,6 +124,6 @@ window.addEventListener("DOMContentLoaded", () => {
 });
 
 // [END woosmap_react_map_basic]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-vars -- force tsc to maintain the comment above
 
 export {};
diff --git a/samples/react-map-with-custom-overlay/index.tsx b/samples/react-map-with-custom-overlay/index.tsx
index 27edb0ad..fe531ae1 100644
--- a/samples/react-map-with-custom-overlay/index.tsx
+++ b/samples/react-map-with-custom-overlay/index.tsx
@@ -8,8 +8,12 @@ import React, {
   useState,
 } from "react";
 
-// Define the types for the global Woosmap object
-declare const woosmap: any;
+// The shim reads and writes `window.woosmap` before the API is loaded.
+type LoaderWindow = {
+  woosmap?: {
+    map?: Record<string, (name: string, ...args: unknown[]) => unknown>;
+  };
+};
 
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
@@ -17,7 +21,7 @@ declare const woosmap: any;
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
-    const w = window as any,
+    const w = window as unknown as LoaderWindow,
       d = document;
     const L = "importLibrary",
       CB = "__ib__";
@@ -60,7 +64,7 @@ function useWoosmap(apiKey: string) {
 }
 
 // Contexts for Woosmap and the map instance
-const MapContext = createContext<any>(null);
+const MapContext = createContext<typeof woosmap | null>(null);
 const MapInstanceContext = createContext<woosmap.map.Map | null>(null);
 
 interface WoosmapAPIProviderProps {
@@ -160,12 +164,15 @@ const Marker: React.FC<{
 }> = ({ position, icon }) => {
   const woosmap = useContext(MapContext);
   const mapInstance = useContext(MapInstanceContext);
-  const [overlay, setOverlay] = useState<any>(null);
+  const [overlay, setOverlay] = useState<woosmap.map.OverlayView | null>(
+    null,
+  );
 
   useEffect(() => {
     if (!woosmap || !mapInstance || !position) return;
 
-    class CustomOverlay extends (woosmap.map.OverlayView as new () => any) {
+    class CustomOverlay extends (woosmap.map
+      .OverlayView as new () => woosmap.map.OverlayView) {
       private position: woosmap.map.LatLngLiteral;
       private containerDiv: HTMLDivElement;
       private icon: React.ReactNode;
@@ -181,16 +188,17 @@ const Marker: React.FC<{
       onAdd() {
         const root = createRoot(this.containerDiv);
         root.render(this.icon);
-        const panes = this.getPanes();
-        panes.floatPane.appendChild(this.containerDiv);
+        this.getPanes()?.floatPane.appendChild(this.containerDiv);
         this.addEventListener("click", () => {
           alert("Marker clicked!");
         });
       }
 
       draw() {
-        const projection = this.getProjection();
-        const point = projection.fromLatLngToDivPixel(this.position);
+        // @types/woosmap.map does not declare Point's x/y yet.
+        const point = this.getProjection()?.fromLatLngToDivPixel(
+          this.position,
+        ) as { x: number; y: number } | null | undefined;
         if (point) {
           // Offset should depend on the style of your icon  - here it is positioned at the middle
           const offsetWidth = this.containerDiv.offsetWidth / 2; // 50% of div width
@@ -260,6 +268,6 @@ window.addEventListener("DOMContentLoaded", () => {
 });
 
 // [END woosmap_react_map_with_custom_overlay]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-vars -- force tsc to maintain the comment above
 
 export {};
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index 7b438bc5..aa85870f 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -9,8 +9,12 @@ import React, {
   useState,
 } from "react";
 
-// Define the types for the global Woosmap object
-declare const woosmap: any;
+// The shim reads and writes `window.woosmap` before the API is loaded.
+type LoaderWindow = {
+  woosmap?: {
+    map?: Record<string, (name: string, ...args: unknown[]) => unknown>;
+  };
+};
 
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
@@ -18,7 +22,7 @@ declare const woosmap: any;
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
-    const w = window as any,
+    const w = window as unknown as LoaderWindow,
       d = document;
     const L = "importLibrary",
       CB = "__ib__";
@@ -64,7 +68,7 @@ function useWoosmap(apiKey: string) {
 }
 
 // Contexts for Woosmap and the map instance
-const MapContext = createContext<any>(null);
+const MapContext = createContext<typeof woosmap | null>(null);
 const MapInstanceContext = createContext<woosmap.map.Map | null>(null);
 
 interface WoosmapAPIProviderProps {
@@ -292,6 +296,6 @@ window.addEventListener("DOMContentLoaded", () => {
 });
 
 // [END woosmap_react_map_with_localities]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-vars -- force tsc to maintain the comment above
 
 export {};
diff --git a/samples/store-locator-widget-baidu/index.ts b/samples/store-locator-widget-baidu/index.ts
index bc33909a..66edd9a6 100644
--- a/samples/store-locator-widget-baidu/index.ts
+++ b/samples/store-locator-widget-baidu/index.ts
@@ -62,9 +62,13 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget_baidu]
diff --git a/samples/store-locator-widget-custom-filters/index.ts b/samples/store-locator-widget-custom-filters/index.ts
index 0886f9bc..71d7b3e5 100644
--- a/samples/store-locator-widget-custom-filters/index.ts
+++ b/samples/store-locator-widget-custom-filters/index.ts
@@ -154,9 +154,19 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+    setFilterPanelRenderer(
+      renderer: (title: string, children: HTMLElement[]) => HTMLElement,
+    ): void;
+    setFilterRenderer(
+      renderer: (key: string, label: string, selected: boolean) => HTMLElement,
+    ): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget_custom_filters]
diff --git a/samples/store-locator-widget-custom-renderer/index.ts b/samples/store-locator-widget-custom-renderer/index.ts
index b551c87f..483f6428 100644
--- a/samples/store-locator-widget-custom-renderer/index.ts
+++ b/samples/store-locator-widget-custom-renderer/index.ts
@@ -117,7 +117,7 @@ function getFullSchedule({
   const daysHoursHTMLTable = Object.keys(dayLabels)
     .map((day) => {
       const hours = weeklyOpening[day]?.hours || [];
-      let daysHours = "";
+      let daysHours: string;
 
       if (hours.length === 0) {
         daysHours = "Closed";
@@ -155,7 +155,6 @@ function getOpeningLabel({
   if (properties.open.open_now) {
     openLabel = `Open now until ${properties.open.current_slice?.end}`;
   } else {
-    // @ts-ignore - TODO next_opening is wrongly spelled `nextOpening` in @types/woosmap.map
     openLabel = `Closed until ${convertTime(Date.parse(properties.open.next_opening?.day || "") / 1000)} at ${properties.open.next_opening?.start}`;
   }
 
@@ -218,9 +217,20 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+    setFullStoreRenderer(
+      renderer: (store: woosmap.map.stores.StoreResponse) => HTMLElement,
+    ): void;
+    setSummaryStoreRenderer(
+      renderer: (store: woosmap.map.stores.StoreResponse) => HTMLElement,
+    ): void;
+    setInitialStateToSelectedStore(storeId: string): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget_custom_renderer]
diff --git a/samples/store-locator-widget-enforce-accessibility/index.ts b/samples/store-locator-widget-enforce-accessibility/index.ts
index 14215b86..b4a6cd64 100644
--- a/samples/store-locator-widget-enforce-accessibility/index.ts
+++ b/samples/store-locator-widget-enforce-accessibility/index.ts
@@ -586,9 +586,13 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget_enforce_accessibility]
diff --git a/samples/store-locator-widget-events/index.ts b/samples/store-locator-widget-events/index.ts
index bb8e77e7..007fded1 100644
--- a/samples/store-locator-widget-events/index.ts
+++ b/samples/store-locator-widget-events/index.ts
@@ -129,9 +129,15 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+    HANDLED_EVENT: Record<string, string>;
+    listenOn(event: string, callback: (...args: unknown[]) => void): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget_events]
diff --git a/samples/store-locator-widget/index.ts b/samples/store-locator-widget/index.ts
index 57c8e13d..d224a2ae 100644
--- a/samples/store-locator-widget/index.ts
+++ b/samples/store-locator-widget/index.ts
@@ -585,9 +585,13 @@ function initStoreLocator(): void {
 initStoreLocator();
 
 declare global {
-  // currently, the WebApp typings are not exported, so we use `any` here
+  // The store locator widget ships no typings: declare the parts this sample uses.
+  interface StoreLocatorWebApp {
+    setConf(conf: object): void;
+    render(isMobile: boolean): void;
+  }
   interface Window {
-    WebApp: new (elementId: string, projectKey: string) => any;
+    WebApp: new (elementId: string, projectKey: string) => StoreLocatorWebApp;
   }
 }
 // [END woosmap_store_locator_widget]
diff --git a/samples/stores-list-sync-map/index.ts b/samples/stores-list-sync-map/index.ts
index b5800910..56b646b2 100644
--- a/samples/stores-list-sync-map/index.ts
+++ b/samples/stores-list-sync-map/index.ts
@@ -178,7 +178,9 @@ function handleGeocodeResults(
   localities: woosmap.map.localities.LocalitiesGeocodeResponse,
 ) {
   const location = localities.results[0]?.geometry?.location;
-  location && handleSearchResults(location);
+  if (location) {
+    handleSearchResults(location);
+  }
 }
 
 function handleSearchResults(originalLatLng: woosmap.map.LatLngLiteral) {
@@ -226,9 +228,12 @@ function selectStoreOnList(storeId?: string) {
 }
 
 // Debounce function
-function debounce(func: (...args: any[]) => void, wait: number) {
+function debounce<Args extends unknown[]>(
+  func: (...args: Args) => void,
+  wait: number,
+) {
   let timeout: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
+  return (...args: Args) => {
     clearTimeout(timeout);
     timeout = setTimeout(() => func(...args), wait);
   };
diff --git a/samples/stores-search-autocomplete-api/index.ts b/samples/stores-search-autocomplete-api/index.ts
index 6c5b85eb..fc2cebca 100644
--- a/samples/stores-search-autocomplete-api/index.ts
+++ b/samples/stores-search-autocomplete-api/index.ts
@@ -123,17 +123,17 @@ function buildQueryString(params: object) {
   return queryStringParts.join("&");
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
diff --git a/samples/stores-search/index.ts b/samples/stores-search/index.ts
index ec67bfc3..ac1a1cdf 100644
--- a/samples/stores-search/index.ts
+++ b/samples/stores-search/index.ts
@@ -145,7 +145,9 @@ function handleGeocodeResults(
   localities: woosmap.map.localities.LocalitiesGeocodeResponse,
 ) {
   const location = localities.results[0]?.geometry?.location;
-  location && handleStoresSearch(location);
+  if (location) {
+    handleStoresSearch(location);
+  }
 }
 
 function handleStoresSearch(latlng: woosmap.map.LatLngLiteral) {
@@ -238,7 +240,9 @@ async function initMap() {
   });
 
   map.addListener("click", (e) => {
-    e.latlng && handleGeocode(e.latlng);
+    if (e.latlng) {
+      handleGeocode(e.latlng);
+    }
   });
 
   storesService = new woosmap.map.StoresService();
diff --git a/samples/transit-advanced/index.ts b/samples/transit-advanced/index.ts
index 03688ca6..6123dac6 100644
--- a/samples/transit-advanced/index.ts
+++ b/samples/transit-advanced/index.ts
@@ -266,11 +266,7 @@ function updateTime(timeType: "departureTime" | "arrivalTime"): void {
   });
 }
 
-function registerAddButton(
-  selector: string,
-  element: HTMLElement,
-  loc: woosmap.map.LatLngLiteral[] | woosmap.map.LatLngLiteral,
-): void {
+function registerAddButton(selector: string, element: HTMLElement): void {
   const button = document.querySelector(selector) as HTMLElement;
   button.addEventListener("click", () => {
     if (button.classList.contains("addLocation__selected")) {
@@ -366,16 +362,8 @@ function initUI(): void {
   updateTime("departureTime");
   updateTime("arrivalTime");
   updateTransitOptions();
-  registerAddButton(
-    ".addLocation__destinations",
-    destinationContainer,
-    transitRequest.destination as woosmap.map.LatLngLiteral,
-  );
-  registerAddButton(
-    ".addLocation__origins",
-    originContainer,
-    transitRequest.origin as woosmap.map.LatLngLiteral,
-  );
+  registerAddButton(".addLocation__destinations", destinationContainer);
+  registerAddButton(".addLocation__origins", originContainer);
 }
 
 async function initMap(): Promise<void> {
diff --git a/samples/transit-roadbook/index.ts b/samples/transit-roadbook/index.ts
index 9c225c70..c991167b 100644
--- a/samples/transit-roadbook/index.ts
+++ b/samples/transit-roadbook/index.ts
@@ -149,12 +149,12 @@ function createRoutesTable(response: woosmap.map.transit.TransitRouteResponse) {
             } 
             `;
           $stepContainer.appendChild($step);
-          leg.travel_mode === `transit`
-            ? $step.insertAdjacentHTML(
-                "afterend",
-                '<span style="font-weight: bold"> > </span>',
-              )
-            : "";
+          if (leg.travel_mode === `transit`) {
+            $step.insertAdjacentHTML(
+              "afterend",
+              '<span style="font-weight: bold"> > </span>',
+            );
+          }
           return $stepContainer;
         },
       );
@@ -394,11 +394,7 @@ function updateTime(timeType: "departureTime" | "arrivalTime"): void {
   });
 }
 
-function registerAddButton(
-  selector: string,
-  element: HTMLElement,
-  loc: woosmap.map.LatLngLiteral[] | woosmap.map.LatLngLiteral,
-): void {
+function registerAddButton(selector: string, element: HTMLElement): void {
   const button = document.querySelector(selector) as HTMLElement;
   button.addEventListener("click", () => {
     if (button.classList.contains("addLocation__selected")) {
@@ -494,16 +490,8 @@ function initUI(): void {
   updateTime("departureTime");
   updateTime("arrivalTime");
   updateTransitOptions();
-  registerAddButton(
-    ".addLocation__destinations",
-    destinationContainer,
-    transitRequest.destination as woosmap.map.LatLngLiteral,
-  );
-  registerAddButton(
-    ".addLocation__origins",
-    originContainer,
-    transitRequest.origin as woosmap.map.LatLngLiteral,
-  );
+  registerAddButton(".addLocation__destinations", destinationContainer);
+  registerAddButton(".addLocation__origins", originContainer);
 }
 
 async function initMap(): Promise<void> {
diff --git a/samples/w3w-autocomplete/index.ts b/samples/w3w-autocomplete/index.ts
index 590a8788..256b3ca5 100644
--- a/samples/w3w-autocomplete/index.ts
+++ b/samples/w3w-autocomplete/index.ts
@@ -14,9 +14,7 @@ let detailsHTML: HTMLElement;
 let clearSearchBtn: HTMLButtonElement;
 let map: woosmap.map.Map;
 let marker: woosmap.map.marker.AdvancedMarkerElement;
-let debouncedAutosuggestW3W: (
-  ...args: any[]
-) => Promise<What3WordsSuggestionsResponse>;
+let debouncedAutosuggestW3W: typeof autosuggestW3W;
 
 const API_KEY = "YOUR_API_KEY"; // Replace YOUR_API_KEY with your actual API key
 
@@ -200,10 +198,10 @@ function displaySubBuildings(target: HTMLElement, subBuildings) {
   displaySection(autoSuggestResultsTitle);
   const addressList = document.createElement("ul");
 
-  subBuildings.forEach((address, index) => {
+  subBuildings.forEach((address) => {
     const line = document.createElement("li");
     line.className = "address";
-    line.addEventListener("click", (event) => {
+    line.addEventListener("click", () => {
       getAddressDetails(line, address.public_id);
     });
     line.innerHTML = `<span class='pin'></span><span>${address.description}</span>`;
@@ -234,10 +232,10 @@ function displayAddressList(addressDetails) {
       "what3words address invalid or no street address found within 200m of its location.";
     newAddressList.appendChild(line);
   } else {
-    addressDetails.forEach((address, index) => {
+    addressDetails.forEach((address) => {
       const line = document.createElement("li");
       line.className = "address";
-      line.addEventListener("click", (event) => {
+      line.addEventListener("click", () => {
         if (address.public_id) {
           getAddressDetails(line, address.public_id);
         } else {
@@ -417,17 +415,17 @@ function initUI() {
   clearSearchBtn.addEventListener("click", resetUI);
 }
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {

From a8724d8feba3033510943542cfc1f46131a81794 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 15:25:08 +0200
Subject: [PATCH 14/16] Route WOOSMAP_SDK_HOST to the React samples' loader

---
 samples/env.11ty.js                             | 1 +
 samples/env.d.ts.11ty.js                        | 3 ++-
 samples/react-map-basic/index.tsx               | 4 +++-
 samples/react-map-with-custom-overlay/index.tsx | 4 +++-
 samples/react-map-with-localities/index.tsx     | 4 +++-
 src/transforms/your-api-key.js                  | 4 ++++
 6 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/samples/env.11ty.js b/samples/env.11ty.js
index 1872f965..ab96b245 100644
--- a/samples/env.11ty.js
+++ b/samples/env.11ty.js
@@ -13,6 +13,7 @@ module.exports = {
 
   render({ sample }) {
     let output = `VITE_WOOSMAP_PUBLIC_API_KEY=${sample.data.WOOSMAP_PUBLIC_API_KEY ? sample.data.WOOSMAP_PUBLIC_API_KEY : "woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f"}`;
+    output += `\nVITE_WOOSMAP_SDK_HOST=${sample.data.WOOSMAP_SDK_HOST}`;
     if (sample.data.GOOGLE_API_KEY) {
       output += `\nVITE_GOOGLE_API_KEY=${sample.data.GOOGLE_API_KEY}`;
     }
diff --git a/samples/env.d.ts.11ty.js b/samples/env.d.ts.11ty.js
index ff70a90a..101c9ef1 100644
--- a/samples/env.d.ts.11ty.js
+++ b/samples/env.d.ts.11ty.js
@@ -18,7 +18,8 @@ module.exports = {
  *  @external https://vitejs.dev/guide/env-and-mode.html
  */
 interface ImportMetaEnv {
-    readonly VITE_WOOSMAP_PUBLIC_API_KEY: string`;
+    readonly VITE_WOOSMAP_PUBLIC_API_KEY: string
+    readonly VITE_WOOSMAP_SDK_HOST: string`;
 
     if (sample.data.GOOGLE_API_KEY) {
       output += `
diff --git a/samples/react-map-basic/index.tsx b/samples/react-map-basic/index.tsx
index cabc8855..a79b8a05 100644
--- a/samples/react-map-basic/index.tsx
+++ b/samples/react-map-basic/index.tsx
@@ -19,6 +19,8 @@ type LoaderWindow = {
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
@@ -38,7 +40,7 @@ function installLoaderShim(apiKey: string): void {
         params.set("libraries", [...libs].join(","));
         for (const k in g) params.set(k, g[k]);
         params.set("callback", "woosmap.map." + CB);
-        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        s.src = `${WOOSMAP_SDK_HOST}/map/map.js?` + params;
         maps[CB] = res;
         s.onerror = () => rej(Error(E + " could not load."));
         d.head.append(s);
diff --git a/samples/react-map-with-custom-overlay/index.tsx b/samples/react-map-with-custom-overlay/index.tsx
index fe531ae1..0d550e19 100644
--- a/samples/react-map-with-custom-overlay/index.tsx
+++ b/samples/react-map-with-custom-overlay/index.tsx
@@ -18,6 +18,8 @@ type LoaderWindow = {
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
@@ -37,7 +39,7 @@ function installLoaderShim(apiKey: string): void {
         params.set("libraries", [...libs].join(","));
         for (const k in g) params.set(k, g[k]);
         params.set("callback", "woosmap.map." + CB);
-        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        s.src = `${WOOSMAP_SDK_HOST}/map/map.js?` + params;
         maps[CB] = res;
         s.onerror = () => rej(Error(E + " could not load."));
         d.head.append(s);
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index aa85870f..2b92f79a 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -19,6 +19,8 @@ type LoaderWindow = {
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
@@ -38,7 +40,7 @@ function installLoaderShim(apiKey: string): void {
         params.set("libraries", [...libs].join(","));
         for (const k in g) params.set(k, g[k]);
         params.set("callback", "woosmap.map." + CB);
-        s.src = "https://sdk.woosmap.com/map/map.js?" + params;
+        s.src = `${WOOSMAP_SDK_HOST}/map/map.js?` + params;
         maps[CB] = res;
         s.onerror = () => rej(Error(E + " could not load."));
         d.head.append(s);
diff --git a/src/transforms/your-api-key.js b/src/transforms/your-api-key.js
index 2cca1f5f..23ba90d2 100644
--- a/src/transforms/your-api-key.js
+++ b/src/transforms/your-api-key.js
@@ -8,6 +8,10 @@ module.exports = function (content, outputPath) {
       /"YOUR_API_KEY"/g,
       "import.meta.env.VITE_WOOSMAP_PUBLIC_API_KEY!",
     );
+    content = content.replace(
+      /"https:\/\/sdk\.woosmap\.com"/g,
+      "import.meta.env.VITE_WOOSMAP_SDK_HOST",
+    );
     content = content.replace(
       /"YOUR_GOOGLE_API_KEY"/g,
       "import.meta.env.VITE_GOOGLE_API_KEY!",

From 8578f38e993c5056d63044ce86cb4aab80b08984 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Tue, 20 Oct 2026 15:25:09 +0200
Subject: [PATCH 15/16] Move the store samples' camera with moveCamera()

---
 samples/stores-list-sync-map/index.ts | 6 +-----
 samples/stores-search/index.ts        | 3 +--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/samples/stores-list-sync-map/index.ts b/samples/stores-list-sync-map/index.ts
index 56b646b2..15299c22 100644
--- a/samples/stores-list-sync-map/index.ts
+++ b/samples/stores-list-sync-map/index.ts
@@ -24,11 +24,6 @@ const storesStyle: woosmap.map.Style = {
 };
 
 const mapOptions: woosmap.map.MapOptions = {
-  zoom: 5,
-  center: {
-    lat: 46.5,
-    lng: 1.4,
-  },
   styles: [{ featureType: "all", stylers: [{ saturation: -100 }] }],
 };
 
@@ -245,6 +240,7 @@ async function initMap() {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions(mapOptions);
+  map.moveCamera({ center: { lat: 46.5, lng: 1.4 }, zoom: 5 });
   storesOverlay = new woosmap.map.StoresOverlay(storesStyle);
   storesOverlay.setMap(map);
   map.addListener(
diff --git a/samples/stores-search/index.ts b/samples/stores-search/index.ts
index ac1a1cdf..0b7d9daa 100644
--- a/samples/stores-search/index.ts
+++ b/samples/stores-search/index.ts
@@ -31,8 +31,6 @@ const storesStyle: woosmap.map.Style = {
 };
 
 const mapOptions: woosmap.map.MapOptions = {
-  center: { lat: 51.50940214, lng: -0.133012 },
-  zoom: 12,
   styles: [
     {
       featureType: "poi.business",
@@ -229,6 +227,7 @@ async function initMap() {
 
   map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
   map.setOptions(mapOptions);
+  map.moveCamera({ center: { lat: 51.50940214, lng: -0.133012 }, zoom: 12 });
   storesOverlay = new woosmap.map.StoresOverlay(storesStyle);
   storesOverlay.setMap(map);
 

From cc713e05f725af0b92a5d58266c0a03ac1bd8e29 Mon Sep 17 00:00:00 2001
From: Emmanuel Peralta <eperalta@woosmap.com>
Date: Wed, 21 Oct 2026 11:05:32 +0200
Subject: [PATCH 16/16] Keep the loader shim comment on its function

---
 samples/react-map-basic/index.tsx               | 4 ++--
 samples/react-map-with-custom-overlay/index.tsx | 4 ++--
 samples/react-map-with-localities/index.tsx     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/samples/react-map-basic/index.tsx b/samples/react-map-basic/index.tsx
index a79b8a05..aa151138 100644
--- a/samples/react-map-basic/index.tsx
+++ b/samples/react-map-basic/index.tsx
@@ -16,11 +16,11 @@ type LoaderWindow = {
   };
 };
 
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
-const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
-
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
diff --git a/samples/react-map-with-custom-overlay/index.tsx b/samples/react-map-with-custom-overlay/index.tsx
index 0d550e19..d9d73d37 100644
--- a/samples/react-map-with-custom-overlay/index.tsx
+++ b/samples/react-map-with-custom-overlay/index.tsx
@@ -15,11 +15,11 @@ type LoaderWindow = {
   };
 };
 
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
-const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
-
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;
diff --git a/samples/react-map-with-localities/index.tsx b/samples/react-map-with-localities/index.tsx
index 2b92f79a..25decea9 100644
--- a/samples/react-map-with-localities/index.tsx
+++ b/samples/react-map-with-localities/index.tsx
@@ -16,11 +16,11 @@ type LoaderWindow = {
   };
 };
 
+const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
+
 // Installs the documented Woosmap loader shim (see docs/docs/loader.md), which
 // defines a stub `woosmap.map.importLibrary` that fetches map.js on first call.
 // Safe to call more than once: the shim itself no-ops (and warns) past the first.
-const WOOSMAP_SDK_HOST = "https://sdk.woosmap.com";
-
 function installLoaderShim(apiKey: string): void {
   ((g) => {
     let p;