Skip to content

Commit db0515f

Browse files
devleesch001HusamElbashir
devleesch001
and
HusamElbashir
authored
feat(AdvancedMarker): content slot for custom content
Also fixes a regression with info windows in the default slot --------- Co-authored-by: Husam Elbashir <[email protected]>
1 parent 100361b commit db0515f

File tree

5 files changed

+181
-24
lines changed

5 files changed

+181
-24
lines changed

‎README.md

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ You can pass a [AdvancedMarkerElementOptions](https://developers.google.com/maps
120120
121121
You can also pass a [PinElementOptions interface](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions) object to customize pin used by the marker.
122122
123-
Additionally, `AdvancedMarker` supports default slot content, allowing you to use custom HTML or Vue components inside the marker.
123+
Additionally, `AdvancedMarker` supports custom slot content via the `content` slot, allowing you to use custom HTML or Vue components inside the marker.
124124
125125
```vue
126126
<script setup>
@@ -141,9 +141,11 @@ const pinOptions = { background: '#FBBC04' }
141141
>
142142
<AdvancedMarker :options="markerOptions" :pin-options="pinOptions"/>
143143
<AdvancedMarker :options="markerOptions">
144-
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
145-
Custom Content
146-
</div>
144+
<template #content>
145+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
146+
Custom Content
147+
</div>
148+
</template>
147149
</AdvancedMarker>
148150
</GoogleMap>
149151
</template>
@@ -458,6 +460,56 @@ const center = { lat: -25.363, lng: 131.044 }
458460
</template>
459461
```
460462

463+
#### Use with AdvancedMarker
464+
465+
You can nest the `InfoWindow` component inside the `AdvancedMarker` component to display an info window when the marker is clicked.
466+
467+
```vue
468+
<script setup>
469+
import { GoogleMap, AdvancedMarker, InfoWindow } from 'vue3-google-map';
470+
471+
const center = { lat: -25.363, lng: 131.044 };
472+
473+
const centerSydney = { lat: -33.873220, lng: 151.206176 };
474+
const makerOptionsSydney = { position: centerSydney, title: 'SYDNEY' };
475+
476+
const centerPerth = { lat: -31.954877, lng: 115.860462 };
477+
const markerOptionsPerth = { position: centerPerth, title: 'PERTH' };
478+
</script>
479+
480+
<template>
481+
<GoogleMap
482+
mapId="DEMO_MAP_ID"
483+
style="width: 100%; height: 500px"
484+
:center="center"
485+
:zoom="3"
486+
>
487+
<AdvancedMarker :options="makerOptionsSydney">
488+
<InfoWindow>
489+
<h1>Sydney</h1>
490+
<div>
491+
Default AdvancedMarker With Custom InfoWindow
492+
</div>
493+
</InfoWindow>
494+
</AdvancedMarker>
495+
496+
<AdvancedMarker :options="markerOptionsPerth">
497+
<template #content>
498+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
499+
Perth
500+
</div>
501+
</template>
502+
<InfoWindow>
503+
<h1>Perth</h1>
504+
<div>
505+
Custom Content AdvancedMarker With Custom InfoWindow
506+
</div>
507+
</InfoWindow>
508+
</AdvancedMarker>
509+
</GoogleMap>
510+
</template>
511+
```
512+
461513
#### Open and close the Info Window
462514

463515
You can use `v-model` to manage the state of the info window programmatically or to know whether it's open or closed

‎docs/components/advanced-marker.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ You can pass a [AdvancedMarkerElementOptions](https://developers.google.com/maps
3030

3131
You can also pass a [PinElementOptions interface](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions) object to customize pin used by the marker.
3232

33-
Additionally, `AdvancedMarker` supports default slot content, allowing you to use custom HTML or Vue components inside the marker.
33+
Additionally, `AdvancedMarker` supports custom slot content via the `content` slot, allowing you to use custom HTML or Vue components inside the marker.
3434

3535
```vue
3636
<script setup>
@@ -51,9 +51,11 @@ const pinOptions = { background: '#FBBC04' }
5151
>
5252
<AdvancedMarker :options="markerOptions" :pin-options="pinOptions"/>
5353
<AdvancedMarker :options="markerOptions">
54-
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
55-
Custom Content
56-
</div>
54+
<template #content>
55+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
56+
Custom Content
57+
</div>
58+
</template>
5759
</AdvancedMarker>
5860
</GoogleMap>
5961
</template>
@@ -69,9 +71,11 @@ const pinOptions = { background: '#FBBC04' }
6971
>
7072
<AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }" :pin-options="{ background: '#FBBC04' }" />
7173
<AdvancedMarker :options="{ position: { lat: 40.689247, lng: -74.044502 } }">
72-
<div style="background: white; color: black; padding: 5px; border-radius: 5px;">
73-
Custom Content
74-
</div>
74+
<template #content>
75+
<div style="background: white; color: black; padding: 5px; border-radius: 5px;">
76+
Custom Content
77+
</div>
78+
</template>
7579
</AdvancedMarker>
7680
</GoogleMap>
7781
</ClientOnly>

‎docs/components/info-window.md

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { GoogleMap, Marker, InfoWindow } from '@lib'
2+
import { GoogleMap, AdvancedMarker, Marker, InfoWindow } from '@lib'
33
import { apiPromise } from '@docs/shared'
44
</script>
55

@@ -125,6 +125,88 @@ const center = { lat: -25.363, lng: 131.044 }
125125
</GoogleMap>
126126
</ClientOnly>
127127

128+
## Use with AdvancedMarker
129+
130+
You can nest the `InfoWindow` component inside the `AdvancedMarker` component to display an info window when the marker is clicked.
131+
132+
```vue
133+
<script setup>
134+
import { GoogleMap, AdvancedMarker, InfoWindow } from 'vue3-google-map';
135+
136+
const center = { lat: -25.363, lng: 131.044 };
137+
138+
const centerSydney = { lat: -33.873220, lng: 151.206176 };
139+
const makerOptionsSydney = { position: centerSydney, title: 'SYDNEY' };
140+
141+
const centerPerth = { lat: -31.954877, lng: 115.860462 };
142+
const markerOptionsPerth = { position: centerPerth, title: 'PERTH' };
143+
</script>
144+
145+
<template>
146+
<GoogleMap
147+
mapId="DEMO_MAP_ID"
148+
style="width: 100%; height: 500px"
149+
:center="center"
150+
:zoom="3"
151+
>
152+
<AdvancedMarker :options="makerOptionsSydney">
153+
<InfoWindow>
154+
<h1>Sydney</h1>
155+
<div>
156+
Default AdvancedMarker With Custom InfoWindow
157+
</div>
158+
</InfoWindow>
159+
</AdvancedMarker>
160+
161+
<AdvancedMarker :options="markerOptionsPerth">
162+
<template #content>
163+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
164+
Perth
165+
</div>
166+
</template>
167+
<InfoWindow>
168+
<h1>Perth</h1>
169+
<div>
170+
Custom Content AdvancedMarker With Custom InfoWindow
171+
</div>
172+
</InfoWindow>
173+
</AdvancedMarker>
174+
</GoogleMap>
175+
</template>
176+
```
177+
178+
<ClientOnly>
179+
<GoogleMap
180+
:api-promise="apiPromise"
181+
mapId="DEMO_MAP_ID"
182+
style="width: 100%; height: 500px"
183+
:center="{ lat: -25.363, lng: 131.044 }"
184+
:zoom="3"
185+
>
186+
<AdvancedMarker :options="{ position: { lat: -33.873220, lng: 151.206176 }, title: 'SYDNEY' }">
187+
<InfoWindow>
188+
<h1>Sydney</h1>
189+
<div>
190+
Default AdvancedMarker With Custom InfoWindow
191+
</div>
192+
</InfoWindow>
193+
</AdvancedMarker>
194+
<AdvancedMarker :options="{ position: { lat: -31.954877, lng: 115.860462 }, title: 'PERTH' }">
195+
<template #content>
196+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">
197+
Perth
198+
</div>
199+
</template>
200+
<InfoWindow>
201+
<h1>Perth</h1>
202+
<div>
203+
Custom Content AdvancedMarker With Custom InfoWindow
204+
</div>
205+
</InfoWindow>
206+
</AdvancedMarker>
207+
</GoogleMap>
208+
</ClientOnly>
209+
128210
## Open and close the Info Window
129211

130212
You can use `v-model` to manage the state of the info window programmatically or to know whether it's open or closed

‎playground/App.vue

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
11
<script setup>
2-
import { GoogleMap, AdvancedMarker } from "../src";
2+
import { GoogleMap, AdvancedMarker, InfoWindow } from "../src";
33
4-
const center = { lat: 40.689247, lng: -74.044502 };
5-
const markerOptions = { position: center, title: "LADY LIBERTY" };
4+
const center = { lat: -25.363, lng: 131.044 };
5+
6+
const centerSydney = { lat: -33.87322, lng: 151.206176 };
7+
const makerOptionsSydney = { position: centerSydney, title: "SYDNEY" };
8+
9+
const centerPerth = { lat: -31.954877, lng: 115.860462 };
10+
const markerOptionsPerth = { position: centerPerth, title: "PERTH" };
611
</script>
712

813
<template>
9-
<GoogleMap mapId="DEMO_MAP_ID" style="width: 100%; height: 500px" :center="center" :zoom="15">
10-
<AdvancedMarker :options="markerOptions">
11-
<div style="border: 1px solid red">advanced marker slot</div>
14+
<GoogleMap mapId="DEMO_MAP_ID" style="width: 100%; height: 500px" :center="center" :zoom="4">
15+
<AdvancedMarker :options="makerOptionsSydney">
16+
<InfoWindow>
17+
<h1>Sydney</h1>
18+
<div>Default AdvancedMarker With Custom InfoWindow</div>
19+
</InfoWindow>
20+
</AdvancedMarker>
21+
22+
<AdvancedMarker :options="markerOptionsPerth">
23+
<template #content>
24+
<div style="background: white; color: black; padding: 5px; border-radius: 5px">Perth</div>
25+
</template>
26+
<InfoWindow>
27+
<h1>Perth</h1>
28+
<div>Custom Content AdvancedMarker With Custom InfoWindow</div>
29+
</InfoWindow>
1230
</AdvancedMarker>
1331
</GoogleMap>
1432
</template>

‎src/components/AdvancedMarker.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
2-
<div v-if="hasSlotContent" class="advanced-marker-wrapper">
2+
<div v-if="hasCustomSlotContent" class="advanced-marker-wrapper">
33
<div ref="markerRef" v-bind="$attrs">
4-
<slot />
4+
<slot name="content" />
55
</div>
66
</div>
7+
<slot />
78
</template>
89

910
<script lang="ts">
@@ -40,7 +41,7 @@ export default defineComponent({
4041
emits: markerEvents,
4142
setup(props, { emit, expose, slots }) {
4243
const markerRef = ref<HTMLElement>();
43-
const hasSlotContent = computed(() => slots.default?.().some((vnode) => vnode.type !== Comment));
44+
const hasCustomSlotContent = computed(() => slots.content?.().some((vnode) => vnode.type !== Comment));
4445
4546
const options = toRef(props, "options");
4647
const pinOptions = toRef(props, "pinOptions");
@@ -69,7 +70,7 @@ export default defineComponent({
6970
const { map: _, content, ...otherOptions } = options.value;
7071
7172
Object.assign(marker.value, {
72-
content: hasSlotContent.value
73+
content: hasCustomSlotContent.value
7374
? markerRef.value
7475
: pinOptions.value
7576
? new PinElement(pinOptions.value).element
@@ -82,7 +83,7 @@ export default defineComponent({
8283
markerCluster.value?.addMarker(marker.value);
8384
}
8485
} else {
85-
if (hasSlotContent.value) {
86+
if (hasCustomSlotContent.value) {
8687
options.value.content = markerRef.value;
8788
} else if (pinOptions.value) {
8889
options.value.content = new PinElement(pinOptions.value).element;
@@ -122,7 +123,7 @@ export default defineComponent({
122123
123124
expose({ marker });
124125
125-
return { hasSlotContent, markerRef };
126+
return { hasCustomSlotContent, markerRef };
126127
},
127128
});
128129
</script>

0 commit comments

Comments
 (0)