How to set gmap-info-window of vue2-google-map that will place in the bottom of the marker.?

Question

I have a marker with two info windows but they are same placed above the marker. I want to "oyeee" info window must be in the bottom side. this is my code:

<gmap-marker :position="toLocation" icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png">

       <gmap-info-window :opened="true"
                         :options="{
                                     pixelOffset: { width: 0, height: 0 },
                                     content: `<b>Destination Address <br>
                                     ${toLocation.lat} , ${toLocation.lng}</b>`,
                          }"
        ></gmap-info-window>
        
        <gmap-info-window :opened="true"
                          :options="{
                                      pixelOffset: { width: 0, height: 0 },
                                      content: `<b>OYEEEEEEEEEEEEEEEEEEEEEEEEEE </b>`,
                           }"
        ></gmap-info-window>

</gmap-marker

output:

Anyone can help me how must be "oyeeeee" info window must be in the bottom side of the marker?

You may want to check this similar question: https://stackoverflow.com/questions/38167162/google-map-infowindow-position-on-right-side — jabamataro, Jan 11 '21 at 04:51
its almost similar but my question is about for gmap_info_window vue component of vue2-google-map node package — AbingPj, Jan 11 '21 at 12:03

Vadim Gremyachev · Accepted Answer · 2021-02-23T20:22:21.407

Since vue-google-maps library supports pixelOffset property for info-window component, info window position could be adjusted like this:

Note: to prevent overlapping, height offset should exceed info window height

<gmap-map :center="center" :zoom="zoom" ref="map">
      <gmap-marker
        :position="{ lat: location.lat, lng: location.lng }"
        :clickable="true"
        icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
        @click="openInfoWindow(location)"
      />
      <gmap-info-window
        :position="{ lat: location.lat, lng: location.lng }"
        :options="{
          pixelOffset: {
            width: 0,
            height: -25,
          },
        }"
        :opened="infoBoxOpen"
        @closeclick="infoBoxOpen = false"
      >
        <div class="infoWindow">
          {{ location.name }}
        </div>
      </gmap-info-window>

      <gmap-info-window
        :position="{ lat: location.lat, lng: location.lng }"
        :options="{
          pixelOffset: {
            width: 0,
            height: -75,
          },
        }"
        :opened="infoBoxOpen"
        @closeclick="infoBoxOpen = false"
      >
        <div class="infoWindow">
          {{ location.name }}
        </div>
      </gmap-info-window>
</gmap-map>

Result

How to set gmap-info-window of vue2-google-map that will place in the bottom of the marker.?

1 Answers1