# Info Window
# Add info window to your components
You can create info window by passing custom HTML or Vue components as the child of Marker component.
<GMapMap> <GMapMarker :key="index" v-for="(m, index) in markers" > <GMapInfoWindow> <div>I am in info window <MyComponent/> </div> </GMapInfoWindow> </GMapMarker> </GMapMap> # Open/close info window
You can pass opened prop to open and close InfoWindows.
<GMapMap> <GMapMarker :key="index" v-for="(m, index) in markers" > <GMapInfoWindow :opened="true" > <div>I am in info window <MyComponent/> </div> </GMapInfoWindow> </GMapMarker> </GMapMap> # Open/close info window on marker click
You can open open and close info windows after marker click, by modifying the :opened prop and maintaining a state variable containing ID of the opened marker.
Check out this interactive example on stackblitz (opens new window).
Example:
<template> <GMapMap :center="center" :zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem"> <GMapMarker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true" @click="openMarker(m.id)" > <GMapInfoWindow :closeclick="true" @closeclick="openMarker(null)" :opened="openedMarkerID === m.id" > <div>I am in info window {{ m.id }} </div> </GMapInfoWindow> </GMapMarker> </GMapMap> </template> <script> export default { data() { return { openedMarkerID: null, center: { lat: 51.093048, lng: 6.84212 }, markers: [ { id: 1, position: { lat: 51.093048, lng: 6.84212 } }, { id: 2, position: { lat: 51.198429, lng: 6.69529 } } ] }; }, methods: { openMarker(id) { this.openedMarkerID = id } } }; </script> <style> body { margin: 0; } </style> # Options
You can pass any Google map InfoWindow component using options prop
<GMapMap> <GMapMarker :key="index" v-for="(m, index) in markers" > <GMapInfoWindow :opened="true" :options=" { pixelOffset: { width: 10, height: 0 }, maxWidth: 320, maxHeight: 320, }" > <div>I am in info window <MyComponent/> </div> </GMapInfoWindow> </GMapMarker> </GMapMap>