AdvancedMarker

The AdvancedMarker component creates and manages advanced markers on the map, allowing for custom HTML content.

Props

PropTypeDefaultDescription
positiongoogle.maps.LatLng | google.maps.LatLngLiteralGeographical coordinates for the marker
optionsgoogle.maps.marker.AdvancedMarkerElementOptionsAdvanced marker configuration options
onLoad(marker: google.maps.marker.AdvancedMarkerElement) => voidCallback when marker is loaded
onUnmount(marker: google.maps.marker.AdvancedMarkerElement) => 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

Usage

<script>
  import { APIProvider, GoogleMap, AdvancedMarker } 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 };
  const markerOptions = {
    title: 'Tokyo',
    draggable: true
  };
  
  function handleMarkerClick() {
    alert('Advanced Marker clicked!');
  }
</script>

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

Custom Content

One of the main advantages of AdvancedMarker is the ability to use custom HTML content:

<script>
  import { APIProvider, GoogleMap, AdvancedMarker } 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 };
  
  // Create a custom element for the marker
  let customElement;
  
  function createCustomElement() {
    const element = document.createElement('div');
    element.className = 'custom-marker';
    element.innerHTML = `
      <div style="background-color: #4285F4; color: white; padding: 8px 12px; border-radius: 4px; font-weight: bold;">
        Tokyo
      </div>
    `;
    return element;
  }
  
  function handleLoad(marker) {
    customElement = createCustomElement();
    marker.content = customElement;
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
      <AdvancedMarker 
        position={position}
        onLoad={handleLoad}
      />
    </GoogleMap>
  </APIProvider>
</div>
svelte

Context

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

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

Notes

  • The AdvancedMarker component must be a child of the GoogleMap component.
  • It requires the Google Maps "marker" library to be loaded.
  • It allows for custom HTML content, making it more flexible than the standard Marker component.
  • 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