Открыть все инфо-окна Google Maps Vue

<template>
    <div id="map">
        <gmap-map
            ref="map"
            :center="center"
            :zoom="14"
            :options="{
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                rotateControl: false,
                fullscreenControl: false,
                disableDefaultUi: true
            }"
            style="width:100%;  height: 100vh;"
        >

            <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                @click="toggleInfoWindow(m,index)">
            </gmap-marker>

            <gmap-info-window
                :options="infoOptions"
                :position="infoWindowPos"
                :opened="infoWinOpen"
                @closeclick="infoWinOpen=false"
            >
                <div v-html="infoContent"></div>
            </gmap-info-window>

        </gmap-map>
    </div>
</template>

<script>
    import {gmapApi} from 'vue2-google-maps'
    import $ from "jquery"

    export default {
        name: "GoogleMap",
        data() {
            return { 
                center: {lat: 55.751207, lng: 37.400922},
                map: null,
                infoContent: '',
                infoWindowPos: {
                    lat: 0,
                    lng: 0
                },
                infoWinOpen: false,
                currentMidx: null,
                infoOptions: {
                    pixelOffset: {
                        width: 90,
                        height: 70
                    }
                },
                markers: [
                    {
                        name: "Station 1",
                        description: "2/2",
                        position: {lat: 55.751207, lng: 37.400922}
                    },
                    {
                        name: "Station 2",
                        description: "0/2",
                        position: {lat: 55.751291, lng: 37.406201}
                    },
                ],
            };
        },
        computed: {
            google: gmapApi,
        },
        methods: {
            toggleInfoWindow: function (marker, idx) {
                this.infoWindowPos = marker.position;
                this.infoContent = this.getInfoWindowContent(marker);


                //check if its the same marker that was selected if yes toggle
                if (this.currentMidx == idx) {
                    this.infoWinOpen = !this.infoWinOpen;
                }
                //if different marker set infowindow to open and reset current marker index
                else {
                    this.infoWinOpen = true;
                    this.currentMidx = idx;
                }
            },
            getInfoWindowContent: function (marker) {
                return (`
<div class="body_balloon">
  <div class="body_balloon_inner">
    <img id="bb_1" class="station_img" src="/images/station1.png" alt="" />
    <div id="bb_2" class="flex_outer_div1">
      <div class="flex_inner_div">
        <p class="station_name_title">Название</p>

        <p class="station_name">${marker.name}</p>
      </div>

      <a class="get_favor_btn" href="">
        <svg
          class="favor_svg"
          width="25"
          height="36"
          viewBox="0 0 25 36"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0.5 2C0.5 1.17157 1.17157 0.5 2 0.5H23C23.8284 0.5 24.5 1.17157 24.5 2V33.708C24.5 34.9825 23.0111 35.6763 22.0352 34.8566L14.108 28.1977C13.1782 27.4167 11.8218 27.4167 10.892 28.1977L2.96479 34.8566C1.98889 35.6763 0.5 34.9825 0.5 33.708V2Z"
            stroke="#27AE60"
          />
        </svg>
      </a>
    </div>

    <div id="bb_3" class="station_location_outer">
      <p class="station_location_title">
        Адрес
      </p>

      <p class="station_location">Москва</p>
    </div>

    <div id="bb_4" class="station_status_outer">
      <p class="station_status_title">Свободно</p>

      <p class="station_status">${marker.description}</p>
    </div>

    <div id="bb_5" class="station_work_time_outer">
      <p class="station_work_time_title">Работает</p>

      <p class="station_work_time">7:00-22:30</p>
    </div>

    <div id="bb_6" class="station_distance_outer">
      <p class="station_distance_title">До станции</p>

      <p class="station_distance">1.4 км</p>
    </div>

    <div id="bb_7" class="flex_outer_div2">
      <a class="popup_more_btn" id="popup_more_btn">Подробнее</a>
      <button
        class="get_session_btn"
        id="get_session_btn"
      >
        Начать сессию
      </button>
    </div>
  </div>
</div>
`);
            },
        }
    };
</script>

<style lang="less">
    .gm-style-iw.gm-style-iw-c {
        padding: 0;
    }

    .gm-style .gm-style-iw-d {
        overflow: auto !important;
    }

    #map {
        width: 100%;
        height: 100vh;
        z-index: 8;
    }

    .gm-style-iw-d {
        max-height: fit-content !important;
    }

    .gm-style {
        .gm-style-iw-t {
            &::after {
                display: none !important;
            }
        }
    }
</style>