Explain Google Maps key errors instead of Google's generic error tile

static/app.js

@@ -55,11 +55,21 @@ function avatarOf(key, size = "") {
 
 /* ================= Google Maps ================= */
 let mapsReady = null;
+function mapsFailed(msg) {
+  console.error(msg);
+  $("#lobby-error").textContent = msg;
+  if (!$("#lobby").classList.contains("active")) alert(msg);
+}
+// Google calls this when it rejects the key, e.g. RefererNotAllowedMapError.
+window.gm_authFailure = () => mapsFailed(
+  `Google Maps rejected the browser key for this site. Add ${location.origin}/* to the key's allowed websites in Google Cloud Console.`);
+
 function loadMaps(key) {
+  if (!key) return Promise.reject(new Error("Google Maps key missing: set the GOOGLE_MAPS_BROWSER_KEY secret."));
   mapsReady ??= new Promise((resolve, reject) => {
     window.__gmInit = resolve;
     const s = document.createElement("script");
-    s.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&v=weekly&callback=__gmInit`;
+    s.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&v=weekly&loading=async&callback=__gmInit`;
     s.async = true;
     s.onerror = () => reject(new Error("Google Maps failed to load"));
     document.head.appendChild(s);