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

@@ -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">
+                <iframe
-                  {/* Map Pin Icon with animation */}
+                  src={embedUrl}
-                  <div className="relative inline-block mb-4">
+                  width="100%"
-                    <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">
+                  height="300"
-                      <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  style={{ border: 0 }}
-                        <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" />
+                  allowFullScreen
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                  loading="lazy"
-                      </svg>
+                  referrerPolicy="no-referrer-when-downgrade"
-                    </div>
+                  title="Google Maps Preview"
-                    {/* Pulse animation */}
+                />
-                    <div className="absolute inset-0 w-16 h-16 bg-blue-400 rounded-full animate-ping opacity-20"></div>
+                {/* Open in Google Maps overlay button */}
-                  </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"
+                  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-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                  <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 Google Maps
+                  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>
+              </>
-              </div>
             ) : (
-              <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>
             )}