diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 40797346..20596969 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -32,6 +32,11 @@ You can now use the components in your app:
[sveltekit]: https://kit.svelte.dev/
+## Environment Variables
+
+Google maps requires an API key `VITE_GOOGLE_MAPS_API_KEY` to be defined in .env
+We support Google Maps for rendering maps. If no API key is provided, we fall back to OpenStreet even if Google Maps is selected
+
## Playground
The playground can be used during development but is not used outside of the package.
diff --git a/packages/blocks/src/lib/maplibre/style.ts b/packages/blocks/src/lib/maplibre/style.ts
index c5eb8fb4..641c9177 100644
--- a/packages/blocks/src/lib/maplibre/style.ts
+++ b/packages/blocks/src/lib/maplibre/style.ts
@@ -13,6 +13,7 @@ const getGoogleMapsStyle = (
[MapProviders.googleMaps]: {
type: 'raster',
tiles: [
+ // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP.
`https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`,
],
tileSize,
@@ -22,6 +23,7 @@ const getGoogleMapsStyle = (
satellite: {
type: 'raster',
tiles: [
+ // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP.
`https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=${apiKey}`,
],
tileSize: 256,
diff --git a/packages/blocks/src/routes/+page.svelte b/packages/blocks/src/routes/+page.svelte
index 08125fd2..03fcf0d1 100644
--- a/packages/blocks/src/routes/+page.svelte
+++ b/packages/blocks/src/routes/+page.svelte
@@ -64,11 +64,12 @@ const path = () =>
mapProvider="google-maps"
mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
>
-