Marker

The Marker component creates and manages markers on the map.

Props

PropTypeDefaultDescription
positiongoogle.maps.LatLng | google.maps.LatLngLiteralGeographical coordinates for the marker
optionsgoogle.maps.MarkerOptionsMarker configuration options
onLoad(marker: google.maps.Marker) => voidCallback when marker is loaded
onUnmount(marker: google.maps.Marker) => voidCallback before marker is destroyed

Event Handler Props

PropTypeDescription
onClick(e: google.maps.MapMouseEvent) => voidClick event handler
onDblClick(e: google.maps.MapMouseEvent) => voidDouble click event handler
onDrag(e: google.maps.MapMouseEvent) => voidDrag event handler
onDragEnd(e: google.maps.MapMouseEvent) => voidDrag end event handler
onDragStart(e: google.maps.MapMouseEvent) => voidDrag start event handler
onMouseDown(e: google.maps.MapMouseEvent) => voidMouse down event handler
onMouseOut(e: google.maps.MapMouseEvent) => voidMouse out event handler
onMouseOver(e: google.maps.MapMouseEvent) => voidMouse over event handler
onMouseUp(e: google.maps.MapMouseEvent) => voidMouse up event handler
onRightClick(e: google.maps.MapMouseEvent) => voidRight click event handler
onClickableChanged() => voidClickable property changed handler
onCursorChanged() => voidCursor property changed handler
onAnimationChanged() => voidAnimation property changed handler
onDraggableChanged() => voidDraggable property changed handler
onFlatChanged() => voidFlat property changed handler
onIconChanged() => voidIcon property changed handler
onPositionChanged() => voidPosition property changed handler
onShapeChanged() => voidShape property changed handler
onTitleChanged() => voidTitle property changed handler
onVisibleChanged() => voidVisible property changed handler
onZindexChanged() => voidZ-index property changed handler

Usage

<script>
  import { APIProvider, GoogleMap, Marker } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 10
  };
  
  const position = { lat: 35.6812362, lng: 139.7649361 };
  const markerOptions = {
    title: 'Tokyo',
    draggable: true
  };
  
  function handleMarkerClick() {
    alert('Marker clicked!');
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
      <Marker 
        position={position} 
        options={markerOptions}
        onClick={handleMarkerClick}
      />
    </GoogleMap>
  </APIProvider>
</div>
svelte

Context

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

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

Example with Multiple Markers

<script>
  import { APIProvider, GoogleMap, Marker } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 8
  };
  
  const locations = [
    { position: { lat: 35.6812362, lng: 139.7649361 }, title: 'Tokyo' },
    { position: { lat: 35.4437078, lng: 139.6380256 }, title: 'Yokohama' },
    { position: { lat: 35.7090259, lng: 139.4631742 }, title: 'Tachikawa' }
  ];
  
  let selectedMarker = null;
  
  function handleMarkerClick(title) {
    selectedMarker = title;
  }
</script>

<div>
  {#if selectedMarker}
    <p>Selected: {selectedMarker}</p>
  {:else}
    <p>Click on a marker to select it</p>
  {/if}
  
  <div style="height: 300px; width: 100%;">
    <APIProvider {apiKey}>
      <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
        {#each locations as location}
          <Marker 
            position={location.position} 
            options={{ title: location.title }}
            onClick={() => handleMarkerClick(location.title)}
          />
        {/each}
      </GoogleMap>
    </APIProvider>
  </div>
</div>
svelte

Notes

  • The Marker component must be a child of the GoogleMap component.
  • It creates a Google Maps marker and attaches it to the map.
  • Event listeners are automatically cleaned up when the component is destroyed.
  • The marker is automatically removed from the map when the component is unmounted.
Last update at: 2025/05/05 16:35:24