v3-gmaps Docs

Popup (gmaps-popup)

The Popup is a basically a borderless Info Window with no close button.

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map>
      <gmaps-popup>
        <p>Any HTML can go here.</p>
      </gmaps-popup>
    </gmaps-map>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { gmapsMap, gmapsPopup } from 'v3-gmaps';

export default defineComponent({
  components: { gmapsMap, gmapsPopup },
});
</script>

Props

PropsTypeDefaultDescription
backgroundstring#EEEEEEBackground CSS to use,
widthstring200pxPopup width.
heightstring200pxPopup height.
position*GmapsPosition-Position of the Popup on the map.

* A position is required.

Events

EventTypeDescription
click-This event is fired when the DOM click event is fired on the Popup.
contextmenu-This event is fired when the DOM contextmenu event is fired on the Popup.
dblclick-This event is fired when the DOM dblclick event is fired on the Popup.
mountedgoogle.maps.OverlayViewOn mounted the component will emit the Google Maps object it represents.
unmountedgoogle.maps.OverlayViewOn unmounted the component will emit the Google Maps object it represents.

Notes

  • This is a custom component and not available using only the Google Maps API.
  • It was largely made using the Custom Overlay Sample provided by Google.