Add new Map component.

src/components/Map.astro

@@ -1,10 +1,38 @@
-  <Fragment is:raw>
-  <iframe
-    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10245.064741908278!2d14.4290206!3d50.0625764!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4d26855708eb61f7!2sPrague%20Congress%20Centre!5e0!3m2!1sen!2suk!4v1676555813425!5m2!1sen!2suk"
-    title="Map"
-    class="w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg"
-    allowFullScreen="true"
-    loading="lazy"
-    referrerPolicy="no-referrer-when-downgrade"
-  ></iframe>
-  </Fragment>
+---
+interface Props {
+  location?: string;
+  lat?: number;
+  lng?: number;
+  zoom?: number;
+  title?: string;
+}
+
+const {
+  location,
+  lat,
+  lng,
+  zoom = 14,
+  title = "Map",
+} = Astro.props;
+
+let src = "";
+if (lat && lng) {
+  src = `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&t=m&output=embed`;
+}
+else if (location) {
+  src = `https://maps.google.com/maps?q=${encodeURIComponent(location)}&t=m&z=${zoom}&output=embed&iwloc=near`;
+}
+---
+<div class="map-container w-full aspect-video max-w-[800px] border-4 border-white rounded-lg shadow-lg">
+  {src && (
+    <iframe
+      src={src}
+      title={title}
+      class="w-full aspect-video"
+      allowfullscreen={true}
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
+      style="border:0;"
+    ></iframe>
+  )}
+</div>

src/content/pages/test.mdx

@@ -281,3 +281,48 @@ Barking up the right tree
 <Accordion title="Finnish-speaking dogs" id="finnish">
   ***Hau hau!***
 </Accordion>
+
+## Maps
+<h2>Example 1: Map with Location</h2>
+<Map
+  location="Empire State Building, New York"
+  zoom={15}
+/>
+
+<h2>Example 2: Map with Coordinates (Latitude & Longitude)</h2>
+<Map
+  lat={48.8584}
+  lng={2.2945}
+  zoom={16}
+  title="Eiffel Tower, Paris"
+/>
+
+<h2>Example 3: Map with Default Zoom Level</h2>
+<Map
+  location="Sydney Opera House"
+/>
+
+<h2>Example 4: Map with Custom Title</h2>
+<Map
+  lat={36.1069}
+  lng={-112.1129}
+  zoom={13}
+  title="Grand Canyon"
+/>
+
+<h2>Example 5: Map with All Default Values</h2>
+<Map
+  location="Statue of Liberty, New York"
+/>
+
+<h2>Usage in Layout</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+  <div>
+    <h3>New York</h3>
+    <Map location="New York, NY" />
+  </div>
+  <div>
+    <h3>London</h3>
+    <Map location="London, UK" />
+  </div>
+</div>

src/content/pages/venue.mdx

@@ -23,7 +23,7 @@ Vyšehrad station (on Line C of the Prague underground railway) is right next to
 the venue and offers convenient public transport from the airport and all major
 rail and bus stations.
 
-<Map />
+<Map location="Prague Congress Centre" zoom={15} />
 
 <address>
 **Entrance 5**