Can we use CustomMarker With Info Window,

[DWeb-Hitesh]

I tried to implement the Info Window with the custom marker but it is not working

[HusamElbashir]

Can you give an example of your implementation?

[DWeb-Hitesh]

the issue is resolved, i was trying to implement CustomMarker with Info Window

[nhnansari]

Can you paste the example how you made it work?

[DWeb-Hitesh]

Sure

<template>
    <div class="map-wrapper">
        <GoogleMap ref="mapRef" :center="center" :zoom="8" api-key="AIzaSyAiDSJjy3s2oksrSVm5XAUyBy6CUw">
            <MarkerCluster>
            <template v-for="m of markers" :key="m.id">
                <CustomMarker :options="m.options" v-if="!openedMarker || openedMarker.id !== m.id" :key="'marker_' + m.id">
                    <div class="CustomMarker" @click.prevent="openMarker(m)">
                    <p>Marker</p>
                    </div>
                </CustomMarker>
            </template>
            <InfoWindow class="custom-infowindow" v-if="openedMarker" :options="openedMarker.options"
                @closeclick="openMarker(null)">
                <img src="https://cdn//etails-image.jpg"
                    class="w-72 h-28">
               <p>Marker</p>
            </InfoWindow>
        </MarkerCluster>
        </GoogleMap>
</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import {
    GoogleMap,
    Marker,
    CustomMarker,
    MarkerCluster,
    InfoWindow,
} from 'vue3-google-map';
import { VueSidePanel } from 'vue3-side-panel';
import 'vue3-side-panel/dist/vue3-side-panel.css';
import locations from '../../locations.json';
export default defineComponent({
    components: {
        GoogleMap,
        Marker,
        MarkerCluster,
        CustomMarker,
        InfoWindow,
        VueSidePanel
    },
    setup() {
        const mapRef = ref(null);
        return {
            mapRef,
            console,
        };
    },
    data() {
        return {
            isOpened: false,
            open: false,
            center: { lat: 39.02205849132065, lng: -105.79562737955803 },
            openedMarker: false,
            locations: locations,
            information: null
        };
    },

    mounted() { },
    computed: {
        ready() {
            return this.mapRef?.ready || false;
        },
        markers() {
            if (!this.ready) {
                return [];
            }
            return this.locations
        },
    },
    methods: {
        openMarker(marker) {
            if (marker) {
                this.openedMarker = marker;
                this.open = true;
            } else {
                this.openedMarker = false;
                this.open = false;
            }
            return false;
        },
        async openSideBar(openedMarker) {
            this.isOpened = true;
            this.information = openedMarker
        },
    },
});
</script>