InfoWindow

The InfoWindow component creates and manages info windows on the map, which can display content when opened.

Props

PropTypeDefaultDescription
positiongoogle.maps.LatLng | google.maps.LatLngLiteralGeographical coordinates for the info window
optionsgoogle.maps.InfoWindowOptionsInfo window configuration options
onLoad(infoWindow: google.maps.InfoWindow) => voidCallback when info window is loaded
onUnmount(infoWindow: google.maps.InfoWindow) => voidCallback before info window is destroyed
anchorgoogle.maps.MVCObjectnullThe anchor to which the info window is attached

Event Handler Props

PropTypeDescription
onCloseClick() => voidClose click event handler
onContentChanged() => voidContent changed event handler
onDomReady() => voidDOM ready event handler
onPositionChanged() => voidPosition changed event handler
onZindexChanged() => voidZ-index changed event handler

Usage

<script>
  import { APIProvider, GoogleMap, Marker, InfoWindow } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 12
  };
  
  const position = { lat: 35.6812362, lng: 139.7649361 };
  let showInfoWindow = true;
  let markerRef;
  
  function handleMarkerLoad(marker) {
    markerRef = marker;
  }
  
  function toggleInfoWindow() {
    showInfoWindow = !showInfoWindow;
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
      <Marker 
        position={position}
        onLoad={handleMarkerLoad}
        onClick={toggleInfoWindow}
      />
      
      {#if showInfoWindow && markerRef}
        <InfoWindow anchor={markerRef} onCloseClick={toggleInfoWindow}>
          <div>
            <h3>Tokyo</h3>
            <p>The capital city of Japan</p>
          </div>
        </InfoWindow>
      {/if}
    </GoogleMap>
  </APIProvider>
</div>
svelte

Using with Position

You can also use the InfoWindow with a position instead of anchoring it to a marker:

<script>
  import { APIProvider, GoogleMap, InfoWindow } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 12
  };
  
  const position = { lat: 35.6812362, lng: 139.7649361 };
  let showInfoWindow = true;
  
  function toggleInfoWindow() {
    showInfoWindow = !showInfoWindow;
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
      {#if showInfoWindow}
        <InfoWindow position={position} onCloseClick={toggleInfoWindow}>
          <div>
            <h3>Tokyo</h3>
            <p>The capital city of Japan</p>
          </div>
        </InfoWindow>
      {/if}
    </GoogleMap>
  </APIProvider>
</div>
svelte

Context

The InfoWindow component consumes the context set by GoogleMap to access the map instance:

const { getMap } = getContext('map') ?? {};
let map = getMap();
javascript

Notes

  • The InfoWindow component must be a child of the GoogleMap component.
  • It can be anchored to a marker or other MVCObject, or positioned directly on the map.
  • The content of the info window is provided as a slot.
  • Event listeners are automatically cleaned up when the component is destroyed.
  • The info window is automatically removed from the map when the component is unmounted.
Last update at: 2025/05/05 16:35:24