Api
<ScriptGoogleMapsInfoWindow>
Information window that automatically opens on parent marker click. Place as a child of <ScriptGoogleMapsMarker>.
optionsgoogle.maps.InfoWindowOptionsConfiguration options for the info window.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
>
<ScriptGoogleMapsInfoWindow>
<div>
<h3>Sydney, Australia</h3>
<p>A great city!</p>
</div>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Toggle Behavior
When placed inside a marker, clicking the marker toggles the info window open and closed. Clicking the marker again while open will close it. The built-in close button also works.
Only one info window is open at a time within a <ScriptGoogleMaps> instance. Opening a new info window automatically closes the previous one.
Standalone Info Window
When placed directly inside <ScriptGoogleMaps> (not inside a marker), the info window opens immediately at the specified position.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsInfoWindow
:options="{ position: { lat: -34.397, lng: 150.644 } }"
>
<div>
<h3>Fixed Location</h3>
<p>This info window is always visible at a specific position.</p>
</div>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMaps>
</template>
With Options
Pass google.maps.InfoWindowOptions to customize behavior.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
>
<ScriptGoogleMapsInfoWindow
:options="{
maxWidth: 300,
minWidth: 200,
headerDisabled: true,
}"
@domready="() => console.log('InfoWindow DOM is ready')"
@closeclick="() => console.log('User closed the info window')"
>
<div>
<h3>Custom Width</h3>
<p>This info window has constrained dimensions and no header.</p>
</div>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
For fully custom popups without the default Google Maps info window chrome, use
<ScriptGoogleMapsOverlayView> instead. It gives you complete control over HTML structure and styling.