AdvancedMarker

Storybook

Open the AdvancedMarker story

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
titlestringRollover and accessibility text
zIndexnumberMarker stacking order
elementHTMLElementCustom marker element
gmpDraggablebooleanEnables dragging
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
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

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,
		mapId: 'DEMO_MAP_ID'
	};

	const position = { lat: 35.6812362, lng: 139.7649361 };

	function handleMarkerClick() {
		alert('Advanced Marker clicked!');
	}
</script>

<div style="height: 400px; width: 100%;">
	<APIProvider {apiKey} libraries={['marker']} mapIds={['DEMO_MAP_ID']}>
		<GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
			<AdvancedMarker {position} title="Tokyo" gmpDraggable 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,
		mapId: 'DEMO_MAP_ID'
	};

	const position = { lat: 35.6812362, lng: 139.7649361 };
</script>

<div style="height: 400px; width: 100%;">
	<APIProvider {apiKey} libraries={['marker']} mapIds={['DEMO_MAP_ID']}>
		<GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
			<AdvancedMarker {position} title="Tokyo">
				<div class="custom-marker">Tokyo</div>
			</AdvancedMarker>
		</GoogleMap>
	</APIProvider>
</div>

<style>
	.custom-marker {
		background: #4285f4;
		border-radius: 4px;
		color: white;
		font-weight: bold;
		padding: 8px 12px;
	}
</style>
svelte

Context

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

const map = getContext('map');
javascript

Notes

  • The AdvancedMarker component must be a child of the GoogleMap component.
  • It requires the Google Maps "marker" library to be loaded.
  • The map must use a mapId; DEMO_MAP_ID is suitable for local testing.
  • 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: 2026/05/31 02:17:23