---
metaTitle: Gmap component | AwesCode UI
meta:
  - name: description
    content: The <AwGmap /> component integrates Google Maps into your application - UI Vue component for AwesCode UI.
title: Gmap
---

# AwGmap

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

The `AwGmap` component provides Google Maps integration for displaying interactive maps in your application.

## Overview

- Google Maps API integration
- Marker support
- Custom styling
- Zoom and center controls
- Event handling

## Setup

Before using AwGmap, ensure you have a Google Maps API key configured in your application.

## Usage

### Basic Example

```markup
<AwGmap
  :center="{ lat: 40.7128, lng: -74.0060 }"
  :zoom="12"
  api-key="YOUR_GOOGLE_MAPS_API_KEY"
/>
```

### With Markers

```markup
<AwGmap
  :center="center"
  :zoom="10"
  api-key="YOUR_API_KEY"
>
  <AwGmapMarker
    v-for="location in locations"
    :key="location.id"
    :position="location.position"
    :title="location.name"
  />
</AwGmap>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| center | Map center coordinates | `Object` | `false` | `{ lat: 0, lng: 0 }` |
| zoom | Map zoom level (0-20) | `Number` | `false` | `10` |
| apiKey | Google Maps API key | `String` | `true` | - |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Map markers and overlays | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| click | `event` | Map click event |
| center-changed | `center` | Center position changed |
| zoom-changed | `zoom` | Zoom level changed |

## Related Components

- [AwGmapMarker](aw-gmap-marker.md) - Google Maps marker
- [AwAddress](aw-address.md) - Address input with maps integration

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Requires Google Maps API key
- API key should be stored in environment variables
- Lazy loads Google Maps API