From afab5127b3cfed35c436de5f4ec093195d6e13f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sat, 24 Jan 2026 16:29:33 +0000
Subject: [PATCH] Restore Google Maps iframe preview

- Restore original Google Maps embed iframe approach
- URL: maps.google.com/maps?q=...&output=embed&z=15
- Add "Open in Maps" overlay button on the map
- Height 300px for better visibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/components/ScraperTest.tsx | 73 ++++++++++++++++------------------
 1 file changed, 35 insertions(+), 38 deletions(-)

diff --git a/web/components/ScraperTest.tsx b/web/components/ScraperTest.tsx
index e422063..0b40ed6 100644
--- a/web/components/ScraperTest.tsx
+++ b/web/components/ScraperTest.tsx
@@ -423,6 +423,11 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
     }
   };
 
+  // Google Maps embed URL for iframe preview
+  const embedUrl = searchedQuery
+    ? `https://maps.google.com/maps?q=${encodeURIComponent(searchedQuery)}&output=embed&z=15`
+    : '';
+
   // Google Maps link for opening in new tab
   const googleMapsUrl = searchedQuery
     ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(searchedQuery)}`
@@ -528,51 +533,43 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
           </div>
 
           {/* Map Preview Area */}
-          <div className="mb-4 rounded-xl overflow-hidden border-2 border-gray-200 bg-gradient-to-br from-blue-50 to-indigo-50 relative">
+          <div className="mb-4 rounded-xl overflow-hidden border-2 border-gray-200 bg-gray-100 relative">
             {searchedQuery ? (
-              <div className="h-[200px] flex items-center justify-center p-6">
-                <div className="text-center max-w-md">
-                  {/* Map Pin Icon with animation */}
-                  <div className="relative inline-block mb-4">
-                    <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg">
-                      <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                      </svg>
-                    </div>
-                    {/* Pulse animation */}
-                    <div className="absolute inset-0 w-16 h-16 bg-blue-400 rounded-full animate-ping opacity-20"></div>
-                  </div>
-
-                  {/* Search Query Display */}
-                  <p className="text-lg font-bold text-gray-800 mb-2">📍 {searchedQuery}</p>
-                  <p className="text-sm text-gray-500 mb-4">Click Validate to check this business on Google Maps</p>
-
-                  {/* Open in Google Maps button */}
-                  <a
-                    href={googleMapsUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:border-blue-500 hover:bg-blue-50 transition-all shadow-sm"
-                  >
-                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                    </svg>
-                    Open in Google Maps
-                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                    </svg>
-                  </a>
-                </div>
-              </div>
+              <>
+                <iframe
+                  src={embedUrl}
+                  width="100%"
+                  height="300"
+                  style={{ border: 0 }}
+                  allowFullScreen
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                  title="Google Maps Preview"
+                />
+                {/* Open in Google Maps overlay button */}
+                <a
+                  href={googleMapsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="absolute bottom-3 right-3 inline-flex items-center gap-2 px-3 py-1.5 bg-white/90 backdrop-blur border border-gray-300 rounded-lg text-xs font-medium text-gray-700 hover:bg-white hover:border-blue-500 transition-all shadow-md"
+                >
+                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+                  </svg>
+                  Open in Maps
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                  </svg>
+                </a>
+              </>
             ) : (
-              <div className="h-[200px] flex items-center justify-center text-gray-400">
+              <div className="h-[300px] flex items-center justify-center text-gray-400">
                 <div className="text-center">
                   <svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
-                  <p>Search for a business to see location preview</p>
+                  <p>Search for a business to see the map</p>
                 </div>
               </div>
             )}