Componente Mappe
Componente Mappe reattive con supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
<h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
<div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
<div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
class="absolute top-0 left-0"
></iframe>
</div>
</div>
<p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</div>Componenti correlati
Componente minimalista monocromatico delle mappe aziendali
Un componente mappa reattivo e interattivo progettato per siti Web aziendali e aziendali, caratterizzato da un design piatto minimalista, combinazione di colori monocromatica e supporto per la modalità scura. Include un'immagine segnaposto, una mappa e segnaposto con i dettagli di contatto.
Gradient_Forest_Maps_Component
Un componente di mappa semplice e reattivo per piattaforme educative, con una tavolozza sfumata verde foresta e transizioni fluide, con supporto per la modalità scura.