Info Window (gm-info-window)

The Info Window is a really simple way to display some custom HTML on the map.

Simple Use (demo)

<template>
  <div style="height: 500px">
    <gm-map>
      <gm-info-window 
        :position="{ lat: -33.9, lng: 151.1 }" 
        header-content="Simple InfoWindow">
        <div class="info-content">
          <p>Any HTML can go here.</p>
        </div>
      </gm-info-window>
    </gm-map>
  </div>
</template>

<script setup lang="ts">
import { gmMap, gmInfoWindow } from 'v3-gmaps';
</script>

Props

Props	Type	Default	Description
position	GmPosition	-	Sets the info window position.
content	string | HTMLElement	-	Content to display in the InfoWindow.
disableAutoPan	boolean	-	Whether auto-panning is disabled when the InfoWindow opens.
headerContent	string	-	Text to display in the InfoWindow header.
headerDisabled	boolean	-	Whether to disable the InfoWindow header completely.
maxWidth	number	-	Maximum width of the InfoWindow in pixels.
minWidth	number	-	Minimum width of the InfoWindow in pixels.
zIndex	number	-	Vertical layer to use for this component.
options*	google.maps.InfoWindowOptions	{}	Google Maps InfoWindowOptions interface

Methods

When using a ref on the gm-info-window component, you can access these methods:

Method	Description
open(options?)	Opens the InfoWindow. Accepts optional options including map, anchor, and shouldFocus.
close()	Closes the InfoWindow.
isOpen()	Returns whether the InfoWindow is currently open.

Events

Event	Type	Description
closeclick	-	This event is fired when the close button was clicked.
content_changed	string | HTMLElement | Text	This event is fired when the content property changes.
domready	HTMLElement	This event is fired when the <div> containing the InfoWindow's content is attached to the DOM.
mounted	google.maps.InfoWindow	On mounted the component will emit its Google Maps object.
position_changed	GmPosition | null	This event is fired when the position property changes.
unmounted	google.maps.InfoWindow	On unmounted the component will emit its Google Maps object.
zindex_changed	number | null	This event is fired when the InfoWindow's zIndex changes.

Notes

• gm-info-window is based on the Google Maps InfoWindow.
• You can provide custom content using the default slot for complete flexibility with your InfoWindow content.
• The headerContent prop provides an easy way to add a title to your InfoWindow, while headerDisabled allows you to remove the header section entirely.
• Accessing the Vue component with a reference also provides the exposed methods of close() and open(), as well as the boolean state of isOpen.