{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}

/

Api

<ScriptGoogleMapsInfoWindow>

Copy for LLMs

Information window that automatically opens on parent marker click. Place as a child of <ScriptGoogleMapsMarker>.

optionsgoogle.maps.InfoWindowOptions

Configuration 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.

Edit this page

Markdown For LLMs

Map marker with HTML content support. Place inside a <ScriptGoogleMaps> component.

Groups nearby markers into clusters for cleaner map visualization at lower zoom levels. Place inside a <ScriptGoogleMaps> component.