---
metaTitle: GmapMarker component | AwesCode UI
meta:
  - name: description
    content: The <AwGmapMarker /> component displays markers on Google Maps - UI Vue component for AwesCode UI.
title: GmapMarker
---

# AwGmapMarker

**Category:** Organism | **Import:** Dynamic

The `AwGmapMarker` component displays markers on Google Maps within an AwGmap component.

## Overview

- Place markers on map
- Custom icons
- Info windows
- Click events
- Draggable markers

## Usage

### Basic Example

```markup
<AwGmap :center="center" :zoom="12">
  <AwGmapMarker
    :position="{ lat: 40.7128, lng: -74.0060 }"
    title="New York City"
  />
</AwGmap>
```

### Multiple Markers

```markup
<AwGmap :center="center" :zoom="10">
  <AwGmapMarker
    v-for="location in locations"
    :key="location.id"
    :position="location.coordinates"
    :title="location.name"
    @click="handleMarkerClick(location)"
  />
</AwGmap>
```

### Draggable Marker

```markup
<AwGmapMarker
  :position="markerPosition"
  draggable
  @dragend="updatePosition"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| position | Marker coordinates | `Object` | `true` | - |
| title | Marker title (tooltip) | `String` | `false` | `''` |
| draggable | Enable marker dragging | `Boolean` | `false` | `false` |
| icon | Custom marker icon | `String\|Object` | `false` | Default pin |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click | `event` | Marker clicked |
| dragend | `event` | Marker drag ended |

## Related Components

- [AwGmap](aw-gmap.md) - Google Maps component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Must be used within AwGmap component
- Position object: `{ lat: Number, lng: Number }`