How i can open google map infowindow on click the button in vuejs3?

Question

When i click on google marker it's opening the infowindow with content but with this functionality i want to open infowindow on another button click, for this i'm calling the those function which are calling on the marker click. According to this approach it is calling the function but not opening the infowindow.

Info window opening on marker click but i want another functionality that open the infowindow on the button click.

                <Marker v-for="(location, i) in locations" :options="{ position: location }" :key="i"
                  @click="handleMarkerClick(location)">
                  <InfoWindow v-if="this.openInfoWindowIndex === location.id">
                    <div>
                      <div class="gm-style-iw-d" style="overflow: scroll; max-height: 261px;">
                        <div>
                          <div class="border-0 row activity-listing-card p-0 mr-sm-0 ml-sm-0 position-relative">
                            <div class="col-md-auto pl-md-0 pr-md-0 d-none d-md-block">
                              <img v-if="this.actvityPicture" :src="this.imageurl + '/' + this.actvityPicture"
                                class="activity-img-block img-fluid">
                              <img v-else src="@/assets/img/org_placeholder.png" class="activity-img-block img-fluid">
                            </div>
                            <div class="col-md pl-2 pr-md-0">
                              <div class="activity-info-text text-left">
                                <h4 class=" mb-1 mt-1 mt-md-0 text-truncate-2">
                                  <a target="_blank" :href="baseUrl + '/activities/' + this.actvitySlug">{{
                                    this.actvityName }}</a>
                                </h4>
                                <p class="p-0 mb-1">{{ this.activityType }} by <span
                                    class="color-green text-truncate-2">{{ this.activityOwner }}</span></p>
                              </div>
                            </div>
                            <div class="row mx-0 px-0 mt-3 w-100 ">
                              <div class="col-lg-6 d-flex flex-column align-items-left px-1">
                                <span>Date</span><strong>{{ this.actrivtyDate }}</strong>
                              </div>
                              <div class="col-lg-6 d-flex flex-column align-items-left px-1">
                                <span>Time</span><strong>{{ this.actrivtyTime }}</strong>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <a title="View Activity" :href="baseUrl + '/activities/' + this.actrivtySlug"
                        class="btn btn-primary-sm px-1 fs-7 flex-grow-1">
                        <i class="fa-solid fa-eye pr-1"></i>View Activity
                      </a>
                    </div>
                  </InfoWindow>
                </Marker>

when i click on marker it is opening this infowindow. below code is for on marker click:

 handleMarkerClick(location) {

      if (this.openInfoWindowIndex !== null) {
        // Close the previously opened InfoWindow
        this.openInfoWindowIndex = location.id;
      }

      this.openInfoWindowIndex = location.id ? location.id : location.event_locations_id;

      this.selectedRow = this.allEvents.find((event) => event.id === location.event_id);
      this.actvityName = this.selectedRow.name;
      this.activityOwner = this.selectedRow.OwenerDetail[0].name;
      this.activityType = this.selectedRow.event_type.name;

      if (this.selectedRow.start_date && this.selectedRow.end_date) {
        this.actrivtyDate = this.selectedRow.start_date + ' - ' + this.selectedRow.end_date;
      }
      else if (this.selectedRow.start_date && !this.selectedRow.end_date) {
        this.actrivtyDate = this.selectedRow.start_date
      }
      else {
        this.actrivtyDate = null;
      }
      if (this.selectedRow.formattedStartTime && this.selectedRow.formattedEndTime) {
        this.actrivtyTime = this.selectedRow.formattedStartTime + ' - ' + this.selectedRow.formattedEndTime;
      }
      else if (this.selectedRow.formattedStartTime && !this.selectedRow.formattedEndTime) {
        this.actrivtyTime = this.selectedRow.formattedStartTime
      }
      else {
        this.actrivtyDate = null;
      }
      this.actrivtySlug = this.selectedRow.slug;
      this.actvityPicture = this.selectedRow.picture;
      // Set the info window content for the clicked marker
    },

And i want to call this handleMarkerClick function on this click :

    panToMarker(selectedMarkerIndex, location){
      this.eventLocationId = location.event_locations_id;
      console.log(location);
      this.handleMarkerClick(location);
      this.locationDailogVisible = false;
    },

This approach calling the method handleMarkerClick but infowindow is not opening