fix(streetview): PlacesService got StreetViewPanorama (must be HTMLDivElement|Map)

8f3bd9ecdc8f4706debcc9ac339fe4ff4bf89a7f · 2026-05-10 12:43:21 -0700 · Steve Abrams

The PlacesService constructor threw InvalidValueError on init, killing the
rest of the async IIFE — toolbar buttons, route chips, position_changed
listener, and auto-drive timer never wired up. Page rendered the panorama
but nothing else worked.

Fix: add hidden #places-attr div, pass that to PlacesService.
Also: surface init errors into the overlay so future failures are visible
instead of silently disappearing.

Files touched

M public/streetview.html

Diff

commit 8f3bd9ecdc8f4706debcc9ac339fe4ff4bf89a7f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun May 10 12:43:21 2026 -0700

    fix(streetview): PlacesService got StreetViewPanorama (must be HTMLDivElement|Map)
    
    The PlacesService constructor threw InvalidValueError on init, killing the
    rest of the async IIFE — toolbar buttons, route chips, position_changed
    listener, and auto-drive timer never wired up. Page rendered the panorama
    but nothing else worked.
    
    Fix: add hidden #places-attr div, pass that to PlacesService.
    Also: surface init errors into the overlay so future failures are visible
    instead of silently disappearing.
---
 public/streetview.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/streetview.html b/public/streetview.html
index ce0be51..9cb732a 100644
--- a/public/streetview.html
+++ b/public/streetview.html
@@ -53,6 +53,7 @@
   <div id="pano">
     <div class="toolbar" id="toolbar"></div>
     <div class="overlay" id="overlay">Loading…</div>
+    <div id="places-attr" style="position:absolute;width:1px;height:1px;overflow:hidden;left:-9999px"></div>
   </div>
   <aside>
     <section id="routes-section">
@@ -79,6 +80,13 @@
 <script>
 (async () => {
   const overlay = document.getElementById('overlay');
+  const die = (e) => {
+    console.error('[streetview] init failed:', e);
+    overlay.innerHTML = `<strong style="color:#ff6b6b">Init error:</strong> ${String(e && e.message || e)}`;
+  };
+  window.addEventListener('error', ev => die(ev.error || ev.message));
+  window.addEventListener('unhandledrejection', ev => die(ev.reason));
+  try {
   const here = document.getElementById('here');
   const nearby = document.getElementById('nearby');
   const toolbar = document.getElementById('toolbar');
@@ -126,7 +134,9 @@
   });
   const svService  = new google.maps.StreetViewService();
   const geocoder   = new google.maps.Geocoder();
-  const placesSvc  = new google.maps.places.PlacesService(panorama); // panorama works as map surrogate
+  // PlacesService requires HTMLDivElement|google.maps.Map — passing the panorama
+  // throws InvalidValueError and kills the rest of this IIFE. Use a hidden div.
+  const placesSvc  = new google.maps.places.PlacesService(document.getElementById('places-attr'));
 
   // Toolbar controls
   let autoDrive = true;
@@ -240,6 +250,7 @@
   panorama.addListener('status_changed', () => {
     if (panorama.getStatus() === 'OK' && autoDrive) scheduleStep();
   });
+  } catch (e) { die(e); }
 })();
 </script>
 </body>

← 923beeb fix: direction-aware nextStopFor — westbound bus 'Next stop' · back to Ventura Bus 3d · add: pre-stage Meta Pixel snippet (placeholder; flip via _dw c83ce9f →