<ScriptGoogleMapsMarker>

This script is deprecated and may be removed in a future version.

google.maps.Marker is deprecated by Google as of v3.56. <ScriptGoogleMapsAdvancedMarkerElement> replaces it with better performance, accessibility, and customization. google.maps.Marker is not scheduled to be discontinued yet, but will only receive bug fixes for major regressions. At least 12 months notice will be given before support is discontinued.

Classic map marker with icon support. Place inside a <ScriptGoogleMaps> component.

positiongoogle.maps.LatLngLiteral | google.maps.LatLng

optionsOmit<google.maps.MarkerOptions, 'map'>

Usage

<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsMarker
      :position="{ lat: -34.397, lng: 150.644 }"
    />
  </ScriptGoogleMaps>
</template>

With Info Window

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

Edit this page

Markdown For LLMs

useScriptGoogleMaps()

The useScriptGoogleMaps() composable lets you have fine-grained control over the Google Maps SDK. It provides a way to load the Google Maps SDK and interact with it programmatically.

Modern advanced marker with HTML content support. This is the recommended marker type. Place inside a <ScriptGoogleMaps> component.