Info Window (gmaps-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">
<gmaps-info-window>
<p>Any HTML can go here.</p>
</gmaps-info-window>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { gmapsMap, gmapsInfoWindow } from 'v3-gmaps';
export default defineComponent({
components: { gmapsMap, gmapsInfoWindow },
});
</script>
Props
| Props | Type | Description | | :-------- | :----------------------: | :---------: | :-------------------------------------------------------- | | options* | GmapsInfoWindowOptions | - | Object used to define the properties of a gmaps-marker. | | position | GmapsPosition | - | Sets the info window position. | | zIndex | number | - | Vertical layer to use for this component. |
* To see all of the possible options, have a look at the Google Maps InfoWindowOptions interface.
Events
| Event | Type | Description |
|---|---|---|
| closeclick | - | This event is fired when the close button was clicked. |
| content_changed | GmapsPosition | This event is fired when the content property changes. |
| domready | boolean | 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 | GmapsPosition | 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 | This event is fired when the InfoWindow's zIndex changes. |
Notes
gmaps-info-windowhas most of the properties and events Google Maps' Info Window has.- The Info Window's white boarder and close button cannot be removed. If this is what you want check out the custom component gmaps-popup.