infowindow not opening

[asdrubalp9]

I'm basically using this example that when you click a marker, the infowindow opens, but when I try it, is not working. I'm using vue3 and Quasar and when the prop :opened is = to true, all infowindows open.

any help would be appreciated

here is my code:

<script>
/* eslint-disable no-unused-vars */

import { watch, ref, onMounted } from 'vue'
import { useGeolocation } from './../composables/useGeolocation'

export default {
  props: {
    orders: {
      type: Object
    },
    availableStates: {
      type: Object
    }
  },
  setup (props) {
    let center = { lat: -33.4454461, lng: -70.6688097 }
    const { coords } = useGeolocation()
    const activeOrders = []
    let openedMarkerID = null
    const mapOptions = {
      mapId: '11232e2e6ac50a0e'
    }
    const mapRef = ref(null)
    onMounted(() => {
      console.log(mapRef)
    })
    watch(props.orders, (currentValue, oldValue) => {
      currentValue.forEach(order => {
        if (order.coordenadas_destino) {
          // const temp = '-33.4454461,-70.6688097'
          const lat = parseFloat(order.coordenadas_destino.split(',')[0])
          const lng = parseFloat(order.coordenadas_destino.split(',')[1])
          const color = props.availableStates.filter(e => e.nombre === order.estado.estado)
          activeOrders.push({
            tracking_number: order.tracking_number,
            is_flex: order.is_flex,
            es_cobro_destino: order.es_cobro_destino,
            monto_por_cobrar: order.monto_por_cobrar,
            telefonos: order.telefonos,
            costo_flete: order.costo_flete,
            pagado: order.pagado,
            nota: order.nota,
            cliente: order.cliente,
            tipo_envio: order.tipo_envio,
            destino: order.destino,
            estado: { nombre: order.estado.estado, color: color[0].color },
            options: order.options,
            position: { lat, lng }
          })
        }
      })
    })
    function closeMarker (position, trackingNumber) {
      openedMarkerID = null
    }
    function markerClicked (position, trackingNumber) {
      console.log('markerClicked', position, typeof trackingNumber, trackingNumber, openedMarkerID, typeof openedMarkerID, trackingNumber === openedMarkerID)
      center = position
      openedMarkerID = trackingNumber
    }
    return {
      closeMarker,
      markerClicked,
      center,
      mapOptions,
      openedMarkerID,
      activeOrders
    }
  }
}
</script>

<style>
.gm-style .gm-style-iw-c {
    overflow: unset!important;
}
.vue-map-container {
    height: 100%;
}
.cluster span[aria-hidden="true"] {
    color: white!important;
}
</style>

<template>
  <q-dialog
    :maximized="true"
    transition-show="slide-right"
    transition-hide="slide-left"
    >
    <!-- @hide="closingModal" -->
    <q-card :class="`${$q.platform.is.mobile ? '': 'q-dialog-desktop-size'}`">
        <q-card-actions vertical align="right">
            <q-btn @click="$emit('closeMapModal')" label="Cerrar" color="red" />
        </q-card-actions>
        <q-card-section class="position-relative">
          <div style="width: 100%; height: 90vh">
            <GMapMap
                ref="mapRef"
                :center="{ lat: -33.4454461, lng: -70.6688097 }"
                :zoom="12"
                :options="mapOptions"
            >
              <GMapCluster
                :zoomOnClick="true"
                :minimumClusterSize="5"
              >
                <GMapMarker
                    :key="order.tracking_number"
                    v-for="order in activeOrders"
                    :position="order.position"
                    :clickable="true"
                    @click="markerClicked(order.position, order.tracking_number)"
                    :draggable="true"
                >
                  <GMapInfoWindow
                    :closeclick="true"
                    @closeclick="closeMarker"
                    :opened="openedMarkerID === order.tracking_number"
                  >
                    <!-- :opened="openedMarkerID == order.tracking_number" -->
                    <div id="contet">
                      <div id="siteNotice"></div>
                      <div id="bodyContent">
                        <p class="text-center q-pa-md" :style="{'background-color':order.estado.color}">
                          <b>
                          {{ order.estado.nombre }}
                          </b>
                        </p>
                        <p class="text-center q-ma-none">
                          <b>
                          {{order.tracking_number}}
                          </b>
                        </p>
                        <p>
                          <template v-if="order.tipo_envio">
                            <b>
                              {{order.tipo_envio }}
                            </b>
                          <br>
                          </template>
                          <template v-if="order.cliente.nombre_receptor">
                            <b>
                              Receptor:
                            </b>
                              {{order.cliente.nombre_receptor }}
                          <br>
                          </template>
                          <template v-if="order.telefonos">
                            <b>
                              Fonos:
                            </b>
                              {{order.telefonos }}
                          <br>
                          </template>
                          <template v-if="order.costo_flete">
                            <b>
                              Costo flete:
                            </b>
                              {{order.costo_flete }}
                          <br>
                          </template>
                          <template v-if="order.monto_por_cobrar">
                            <b>
                              Valor envio:
                            </b>
                              {{order.monto_por_cobrar }}
                          <br>
                          </template>
                          <template v-if="order.options.nombre_remitente">
                            <b>
                              Nombre remitente:
                            </b>
                              {{order.options.nombre_remitente }}
                          <br>
                          </template>
                          <template v-if="order.nota">
                            <b>
                              Nota:
                            </b>
                              {{order.nota }}
                          <br>
                          </template>
                        </p>
                          <q-btn :href="`https://www.google.com/maps/search/?api=1&query=${order.position.lat},${order.position.lng}`" target="_blank" icon="fas fa-map-marked" label="Abrir" class="text-light full-width" color="red"/>
                      </div>
                    </div>
                  </GMapInfoWindow>
                </GMapMarker>
              </GMapCluster>
            </GMapMap>
          </div>
        </q-card-section>
    </q-card>
  </q-dialog>
</template>

[dpadula]

Hello @asdrubalp9, I think maybe you could use references instead a normal variable in Vue. Plus, maybe you will want to use the panTo() method that creates a smoothier effect when center the screen on the marker

const mapRef = ref({}); const openedMarkerID = ref();

function markerClicked (position, trackingNumber) {
  console.log('markerClicked', position, typeof trackingNumber, trackingNumber, openedMarkerID, typeof openedMarkerID, trackingNumber === openedMarkerID)
  mapRef.value.panTo(position);
  openedMarkerID.value = trackingNumber;
}

Let me know if this works for you.

PS: Tambien hablo español si necesitas. Saludos