Custom marker popup going off screen about vue2-gmap-custom-marker HOT 2 CLOSED

<gmap-custom-marker
    :marker="setMarker(pin.lat, pin.lng)"
    :class="{addzIndex : pin.id == selectedId}"
>
   <yout-custom-component/>
 </gmap-custom-marker>

<template>

    <div
      :ref="'marker_el_'+pin.id"
      class="mapmarker"
      tabindex="0"
      @click="toggleBox(pin.id)"
    >
      <div class="price">
        <span class="text">
          €{{ pin.text }}
        </span>
      </div>
      <div
        v-if="selectedMapListing == pin.id"
        class="box"
      >
        <div v-if="pin" class="thumbnail">
          .....
        </div>
        <div class="detail">
          .....
        </div>
      </div>
    </div>
</template>
<script>
export default {
    mounted() {
        console.log('the map item', this.$parent.$map)
        // Do some computation with the map object
    }
}
</script>

toggleBox (id) {
  // clearing the classes before re-adjusting
  this.$refs['marker_el_' + id][0].classList.remove('adjustTop')
  this.$refs['marker_el_' + id][0].classList.remove('adjustLeft')
  this.$refs['marker_el_' + id][0].classList.remove('adjustRight')
  
  // get the positions
  let mapPos = this.$refs['map'].getBoundingClientRect()
  let popupPos = this.$refs['marker_el_' + listingId][0].getBoundingClientRect()
  let position = {}
  position.top = popupPos.top - mapPos.top
  position.right = popupPos.right - mapPos.right
  position.left = popupPos.left - mapPos.left
  
  // set the classes (the numbers used below are what I wanted based on the position of my map and popups
  if (position.top <= 350) {
    this.$refs['marker_el_' + id][0].classList.add('adjustTop')
  }
  if (relativePos.left <= 150) {
    this.$refs['marker_el_' + id][0].classList.add('adjustLeft')
  }
  if (relativePos.right >= -150) {
    this.$refs['marker_el_' + id][0].classList.add('adjustRight')
  }
}