feat(AdvancedMarker): support slot custom content

* feat(AdvancedMarker): Support slot custom content

* chore: clean

* style: format advanced marker code

* docs: update advanced marker docs

---------

Co-authored-by: Husam Elbashir <[email protected]>

Author: coderwyd

docs/components/advanced-marker.md

@@ -18,6 +18,8 @@ You can pass a [AdvancedMarkerElementOptions](https://developers.google.com/maps
 
 You can also pass a [PinElementOptions interface](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions) object to custumize pin used by the marker.
 
+Additionally, `AdvancedMarker` supports default slot content, allowing you to use custom HTML or Vue components inside the marker.
+
 ```vue
 <script setup>
 import { GoogleMap, AdvancedMarker } from 'vue3-google-map'
@@ -36,6 +38,11 @@ const pinOptions = { background: '#FBBC04' }
     :zoom="15"
   >
     <AdvancedMarker :options="markerOptions" :pin-options="pinOptions"/>
+    <AdvancedMarker :options="markerOptions">
+       <div style="background: white; color: black; padding: 5px; border-radius: 5px">
+        Custom Content
+      </div>
+    </AdvancedMarker>
   </GoogleMap>
 </template>
 ```
@@ -49,6 +56,11 @@ const pinOptions = { background: '#FBBC04' }
     :zoom="15"
   >
     <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }" :pin-options="{ background: '#FBBC04' }" />
+    <AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }">
+       <div style="background: white; color: black; padding: 5px; border-radius: 5px;">
+        Custom Content
+      </div>
+    </AdvancedMarker>
   </GoogleMap>
 </ClientOnly>
 

playground/App.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { GoogleMap, AdvancedMarker } from '../src'
+import { GoogleMap, AdvancedMarker } from "../src";
 
-const center = { lat: 40.689247, lng: -74.044502 }
-const markerOptions = { position: center, title: 'LADY LIBERTY' }
-const pinOptions = { background: '#FBBC04' }
+const center = { lat: 40.689247, lng: -74.044502 };
+const markerOptions = { position: center, title: "LADY LIBERTY" };
 </script>
 
 <template>
   <GoogleMap mapId="DEMO_MAP_ID" style="width: 100%; height: 500px" :center="center" :zoom="15">
-    <AdvancedMarker :options="markerOptions" :pin-options="pinOptions" />
+    <AdvancedMarker :options="markerOptions">
+      <div style="border: 1px solid red">advanced marker slot</div>
+    </AdvancedMarker>
   </GoogleMap>
 </template>

src/components/AdvancedMarker.ts renamed to src/components/AdvancedMarker.vue

@@ -1,4 +1,25 @@
-import { defineComponent, PropType, toRef, provide, computed, inject, markRaw, onBeforeUnmount, ref, watch } from "vue";
+<template>
+  <div v-if="hasSlotContent" class="advanced-marker-wrapper">
+    <div ref="markerRef" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  toRef,
+  provide,
+  computed,
+  inject,
+  markRaw,
+  onBeforeUnmount,
+  ref,
+  watch,
+  Comment,
+} from "vue";
 import { markerSymbol, apiSymbol, mapSymbol, markerClusterSymbol } from "../shared/index";
 import equal from "fast-deep-equal";
 
@@ -18,6 +39,9 @@ export default defineComponent({
   },
   emits: markerEvents,
   setup(props, { emit, expose, slots }) {
+    const markerRef = ref<HTMLElement>();
+    const hasSlotContent = computed(() => slots.default?.().some((vnode) => vnode.type !== Comment));
+
     const options = toRef(props, "options");
     const pinOptions = toRef(props, "pinOptions");
 
@@ -45,7 +69,11 @@ export default defineComponent({
           const { map: _, content, ...otherOptions } = options.value;
 
           Object.assign(marker.value, {
-            content: pinOptions.value ? new PinElement(pinOptions.value).element : content,
+            content: hasSlotContent.value
+              ? markerRef.value
+              : pinOptions.value
+                ? new PinElement(pinOptions.value).element
+                : content,
             ...otherOptions,
           });
 
@@ -54,7 +82,9 @@ export default defineComponent({
             markerCluster.value?.addMarker(marker.value);
           }
         } else {
-          if (pinOptions.value) {
+          if (hasSlotContent.value) {
+            options.value.content = markerRef.value;
+          } else if (pinOptions.value) {
             options.value.content = new PinElement(pinOptions.value).element;
           }
 
@@ -92,6 +122,17 @@ export default defineComponent({
 
     expose({ marker });
 
-    return () => slots.default?.();
+    return { hasSlotContent, markerRef };
   },
 });
+</script>
+
+<style>
+.advanced-marker-wrapper {
+  display: none;
+}
+
+.mapdiv .advanced-marker-wrapper {
+  display: inline-block;
+}
+</style>

src/components/index.ts

@@ -1,5 +1,5 @@
 export { default as GoogleMap } from "./GoogleMap.vue";
-export { default as AdvancedMarker } from "./AdvancedMarker";
+export { default as AdvancedMarker } from "./AdvancedMarker.vue";
 export { default as Marker } from "./Marker";
 export { default as Polyline } from "./Polyline";
 export { default as Polygon } from "./Polygon";