info-window when mounted and closed

[mohammed-alfarra]

Hello,

When the component mounted this info-window white box show without any action on the marker and when I close it can not open it again when clicking on the marker.

Map when mounted

Vue code

const app = new Vue({
    el: '#app',
    data() {
        return {
            drivers: [],
            infoWindowOptions: {
                pixelOffset: {
                    width: 0,
                    height: -35
                }
            },
            activeDriver: {},
            infoWindowOpened: false,
        }
    },
    created() {
        axios.get('/api/drivers')
            .then((response) => this.drivers = response.data.data)
            .catch((error) => console.error(error));
    },
    methods: {
        getPosition(driver) {
            return {
                lat: parseFloat(driver.latitude),
                lng: parseFloat(driver.longitude)
            }
        },
        handleMarkerClicked(driver) {
            this.activeDriver = driver;
            this.infoWindowOpened = true;
            console.log({infoWindowOpened: this.infoWindowOpened, activeDriver: this.activeDriver});
        },
        handleInfoWindowClose() {
            this.activeDriver = {};
            this.infoWindowOpened = false;
            console.log({infoWindowOpened: this.infoWindowOpened, activeDriver: this.activeDriver});
        }
    },
    computed: {
        mapCenter() {
            if(!this.drivers.length) {
                return {
                    lat: 10,
                    lng: 10
                }
            }

            return {
                lat: parseFloat(this.drivers[0].latitude),
                lng: parseFloat(this.drivers[0].longitude)
            }
        },
        infoWindowPosition() {
            return {
                lat: parseFloat(this.activeDriver.latitude),
                lng: parseFloat(this.activeDriver.longitude)
            }
        }
    }
});

HTML page code

<div id="app">
        <gmap-map
            :center="mapCenter"
            :zoom="10"
            style="width: 100%; height: 320px;"
        >
            <gmap-info-window
                :oprions="infoWindowOptions"
                :position="infoWindowPosition"
                :opend="infoWindowOpened"
                @closeclick="handleInfoWindowClose"
            >
                <div class="info-window">
                    <h5 v-text="activeDriver.vehicle_brand"></h5>
                    <p v-text="activeDriver.licence_number"></p>
                </div>
            </gmap-info-window>
            <gmap-marker
                v-for="(driver, index) in drivers"
                :key="driver.id"
                :position="getPosition(driver)"
                :clickable="true"
                :draggable="false"
                v-on:click="handleMarkerClicked(driver, index)"
            ></gmap-marker>
        </gmap-map>
    </div>

[andriycodes]

@MohammadNehru I don't know if you managed to resolve this but you have 2 typos in your HTML code. Inside your <gmap-info-window> component you have misspelled :oprions, which should be :options and :opend, which should be :opened.