Map update.

Author: nikoshell

src/components/Map.astro

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributeReferrerPolicy } from 'react';
+
 interface Props {
   location?: string;
   embedCode?: string;
@@ -8,15 +10,8 @@ interface Props {
   zoom?: number;
   mapType?: "roadmap" | "satellite" | "hybrid" | "terrain";
   title?: string;
-  width?: string;
-  maxWidth?: string;
-  aspectRatio?: string;
-  borderWidth?: string;
-  borderColor?: string;
-  rounded?: string;
-  shadow?: string;
   loading?: "eager" | "lazy";
-  referrerPolicy?: string;
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
 }
 
 const {
@@ -64,17 +59,11 @@ else if (location) {
     <iframe
       src={src}
       title={title}
-      class="w-full aspect-video "
-      allowFullScreen={true}
+      class="w-full aspect-video"
+      allowfullscreen={true}
       loading={loading}
-      referrerPolicy={referrerPolicy}
+      referrerpolicy={referrerPolicy}
       style="border:0;"
     ></iframe>
   )}
 </div>
-
-<style>
-  .astro-map-container {
-    width: 100%;
-  }
-</style>

src/content/pages/test.mdx

@@ -281,3 +281,89 @@ 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 Location and Custom Map Type</h2>
+<Map
+  location="Grand Canyon, Arizona"
+  mapType="satellite"
+  zoom={12}
+/>
+
+<h2>Example 3: Map with Coordinates (Latitude & Longitude)</h2>
+<Map
+  lat={48.8584}
+  lng={2.2945}
+  zoom={16}
+  title="Eiffel Tower, Paris"
+/>
+
+<h2>Example 4: Map with Coordinates and Terrain Map Type</h2>
+<Map
+  lat={36.1069}
+  lng={-112.1129}
+  mapType="terrain"
+  zoom={13}
+  title="Grand Canyon"
+/>
+
+<h2>Example 5: Map with Hybrid Map Type</h2>
+<Map
+  location="Sydney Opera House"
+  mapType="hybrid"
+  zoom={17}
+/>
+
+<h2>Example 6: Map with Map ID</h2>
+<Map
+  mapId="0x89c259a944867e5b:0xb2c96748fa5e9cf"
+  title="Central Park, New York"
+/>
+
+<h2>Example 7: Map with Embed Code from Google Maps</h2>
+<Map
+  embedCode='<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937586!2d2.2922926156740954!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel%20Tower!5e0!3m2!1sen!2sus!4v1621536319249!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>'
+  title="Eiffel Tower Embed"
+/>
+
+<h2>Example 8: Map with Loading Performance Options</h2>
+<Map
+  location="Golden Gate Bridge, San Francisco"
+  loading="eager"
+  referrerPolicy="strict-origin"
+/>
+
+<h2>Example 9: Map with All Default Values</h2>
+<Map
+  location="Statue of Liberty, New York"
+/>
+
+<h2>Example 10: Full Custom Configuration</h2>
+<Map
+  lat={40.7484}
+  lng={-73.9857}
+  zoom={16}
+  mapType="hybrid"
+  title="Empire State Building"
+  loading="eager"
+  referrerPolicy="no-referrer"
+/>
+
+<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>