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

@@ -8,21 +8,23 @@
 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;
 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();