alezmad/whyrating-engine-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore Google Maps iframe preview

Browse Source 
- 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>
This commit is contained in:
Alejandro Gutiérrez
2026-01-24 16:29:33 +00:00
parent 43fd1515d2
commit afab5127b3
1 changed files with 35 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/ScraperTest.tsx
View File

@@ -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 */}
<>
<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="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>
)}