From 4cfa9f340a3250386116e641ec2e11beb28d26d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Fri, 18 Sep 2026 14:51:26 +0200
Subject: [PATCH] Read the map keys from `GOOGLE_MAPS_KEY` and `MAPBOX_KEY`
 instead of the source (#3092)

---
 .changeset/google-maps-key-env.md |  5 +++++
 .gitignore                        |  1 +
 preview/.env.example              |  7 +++++++
 shared/components/demo/Map.astro  | 13 ++++++++-----
 shared/data/site.json             |  3 ---
 shared/layouts/BaseLayout.astro   |  6 ++++--
 shared/lib/site.ts                |  2 --
 turbo.json                        |  2 +-
 8 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/google-maps-key-env.md
 create mode 100644 preview/.env.example

diff --git a/.changeset/google-maps-key-env.md b/.changeset/google-maps-key-env.md
new file mode 100644
index 000000000..5a05c666b
--- /dev/null
+++ b/.changeset/google-maps-key-env.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Removed the hardcoded Google Maps and Mapbox keys; map demos now read `GOOGLE_MAPS_KEY` and `MAPBOX_KEY` from the environment.
diff --git a/.gitignore b/.gitignore
index 90689d77c..de2a85bba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,7 @@ package-lock.json
 dist/
 packages-zip/
 .env
+.env*.local
 sri.json
 
 # TypeScript
diff --git a/preview/.env.example b/preview/.env.example
new file mode 100644
index 000000000..620d7117e
--- /dev/null
+++ b/preview/.env.example
@@ -0,0 +1,7 @@
+# Google Maps JavaScript API key for the map demo page (map-fullsize).
+# Optional. Restrict the key by HTTP referrer in the Google Cloud console.
+GOOGLE_MAPS_KEY=
+
+# Mapbox public access token (pk.…) for the Mapbox GL map demos.
+# Optional. Restrict the token by URL in the Mapbox account settings.
+MAPBOX_KEY=
diff --git a/shared/components/demo/Map.astro b/shared/components/demo/Map.astro
index 405144bf8..f402838e2 100644
--- a/shared/components/demo/Map.astro
+++ b/shared/components/demo/Map.astro
@@ -1,8 +1,9 @@
 ---
-// Mapbox GL map. Access token from site.mapboxKey. Renders nothing unless
-// maps[mapId] exists.
+// Mapbox GL map. Access token from the MAPBOX_KEY environment variable (.env or
+// the host's settings), never from the source. Renders nothing unless
+// maps[mapId] exists; without a token the container renders but the map is not
+// initialised (Mapbox GL throws on a missing token).
 import maps from '@data/maps.json';
-import site from '@data/site.json';
 import CaptureScript from '../CaptureScript.astro';
 
 interface Props {
@@ -13,6 +14,8 @@ interface Props {
 
 const { mapId, ratio } = Astro.props;
 
+const mapboxKey = import.meta.env.MAPBOX_KEY ?? process.env.MAPBOX_KEY ?? '';
+
 type MapData = {
 	title?: string;
 	ratio?: string;
@@ -44,10 +47,10 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 	)
 }
 {
-	data && (
+	data && mapboxKey && (
 		<CaptureScript>
 			<!-- BEGIN MAP -->
-			<script is:inline define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
+			<script is:inline define:vars={{ mapboxKey, mapContainerId, style, zoom, center, markers }}>
 				window.tabler_map ??= {};
 
 				function initMap() {
diff --git a/shared/data/site.json b/shared/data/site.json
index c944ebbaa..7a9d90b3a 100644
--- a/shared/data/site.json
+++ b/shared/data/site.json
@@ -13,9 +13,6 @@
   "changelogUrl": "https://tabler.io/changelog",
   "previewUrl": "https://preview.tabler.io",
   "docsUrl": "https://docs.tabler.io",
-  "mapboxKey": "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
-  "googleMapsKey": "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
-  "googleMapsDevKey": "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
   "npmPackage": "@tabler/core",
   "cssPlugins": [
     "flags",
diff --git a/shared/layouts/BaseLayout.astro b/shared/layouts/BaseLayout.astro
index 2426dffdd..e1a74e816 100644
--- a/shared/layouts/BaseLayout.astro
+++ b/shared/layouts/BaseLayout.astro
@@ -37,10 +37,12 @@ const rtlSuffix = rtl ? '.rtl' : ''
 
 type Lib = { npm?: string; js?: string[]; css?: string[]; head?: boolean }
 const pageLibEntries = Object.entries(libs as Record<string, Lib>).filter(([name]) => pageLibs.includes(name))
-const googleMapsKey = site.googleMapsDevKey
+// Google Maps API key comes from the environment (GOOGLE_MAPS_KEY in .env or the
+// host's settings), never from the source. Without it the script loads keyless.
+const googleMapsKey = import.meta.env.GOOGLE_MAPS_KEY ?? process.env.GOOGLE_MAPS_KEY ?? ''
 // External URLs (http/https) are emitted verbatim (with the maps-key placeholder
 // replaced); local files as ./dist/libs/{npm}/{file}.
-const libHref = (lib: Lib, file: string) => (/^https?:\/\//.test(file) ? file.replace('GOOGLE_MAPS_KEY', googleMapsKey) : `${base}/dist/libs/${lib.npm}/${file}`)
+const libHref = (lib: Lib, file: string) => (/^https?:\/\//.test(file) ? file.replace(googleMapsKey ? 'GOOGLE_MAPS_KEY' : '?key=GOOGLE_MAPS_KEY', googleMapsKey) : `${base}/dist/libs/${lib.npm}/${file}`)
 const libCssFiles = pageLibEntries.flatMap(([, lib]) => (lib.css ?? []).map((file) => libHref(lib, file)))
 const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean(lib.head) === head).flatMap(([, lib]) => (lib.js ?? []).map((file) => libHref(lib, file)))
 ---
diff --git a/shared/lib/site.ts b/shared/lib/site.ts
index 31572b146..aabedc617 100644
--- a/shared/lib/site.ts
+++ b/shared/lib/site.ts
@@ -15,8 +15,6 @@ export const site = {
   githubSponsorsUrl: 'https://github.com/sponsors/codecalm',
   icons: { link: 'https://tabler.io/icons' },
   emails: { price: '$29', buy_link: 'https://r.tabler.io/buy-emails' },
-  // Dev Google Maps API key for local development builds.
-  googleMapsDevKey: 'AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw',
   // From shared/data/icons-info.json.
   iconsCount: iconsInfo.count,
   iconsVersion: iconsInfo.version,
diff --git a/turbo.json b/turbo.json
index b83050732..466e5115e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalEnv": ["NODE_ENV", "VERCEL_ENV", "NEXT_PUBLIC_POSTHOG_KEY", "NEXT_PUBLIC_POSTHOG_HOST", "DOCSEARCH_API_KEY", "DOCSEARCH_APP_ID", "DOCSEARCH_INDEX_NAME"],
+  "globalEnv": ["NODE_ENV", "VERCEL_ENV", "NEXT_PUBLIC_POSTHOG_KEY", "NEXT_PUBLIC_POSTHOG_HOST", "DOCSEARCH_API_KEY", "DOCSEARCH_APP_ID", "DOCSEARCH_INDEX_NAME", "GOOGLE_MAPS_KEY", "MAPBOX_KEY"],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],