From 993e0becc4d6825a5302ffa9cbd7974cc7a1576e Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Thu, 11 Apr 2024 09:42:12 -0700
Subject: [PATCH] fix: Updates api key so static map can display (#1692)

* fix: Updates api key so static map can display

Investigation revealed that the static map API key has been set to "YOUR_API_KEY", rendering the live example somewhat useless. Since there's already code on the page to get an API  key, I restructured the call to get the key when the page loads, and pass that value to the static map so that it can actually load.

* Update index.ts

added a ts-ignore for a VIte bug, does not like `env`.
---
 samples/programmatic-load-button/index.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/samples/programmatic-load-button/index.ts b/samples/programmatic-load-button/index.ts
index 8937d1f9cc..257bcb6f0f 100644
--- a/samples/programmatic-load-button/index.ts
+++ b/samples/programmatic-load-button/index.ts
@@ -8,6 +8,8 @@
 import { Loader } from "@googlemaps/js-api-loader";
 
 let map: google.maps.Map;
+//@ts-ignore
+let apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY!;
 
 const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
@@ -15,14 +17,14 @@ const url = "https://maps.googleapis.com/maps/api/staticmap";
 
 // @ts-ignore google.maps.plugins
 const loader = new Loader({
-  apiKey: "YOUR_API_KEY",
+  apiKey: apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper") as HTMLButtonElement;
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
 
   wrapper.addEventListener("click", () => {
     wrapper.remove();