# SimpleMap

A simplified wrapper for common map use cases where you only need a single marker and basic configuration.

---

## Import

```tsx
import { SimpleMap } from 'xertica-ui';
```

---

## Usage

### Map with Marker and Info

```tsx
<SimpleMap
  center={{ lat: -23.5505, lng: -46.6333 }}
  markerTitle="Head Office"
  markerInfo="Paulista Avenue, 1000"
  zoom={15}
/>
```

---

## Props

The `SimpleMap` component extends all non-advanced props from the base `<Map>` component.

| Prop          | Type                           | Default      | Description                                                   |
| ------------- | ------------------------------ | ------------ | ------------------------------------------------------------- |
| `center`      | `{ lat: number, lng: number }` | _(required)_ | The coordinates where the map is centered.                    |
| `address`     | `string`                       | —            | Shortcut for setting both the `markerTitle` and `markerInfo`. |
| `markerTitle` | `string`                       | —            | The title tooltip of the marker pin.                          |
| `markerInfo`  | `string`                       | —            | The HTML-safe string shown in the InfoWindow when clicked.    |
| `showMarker`  | `boolean`                      | `true`       | Whether to display the location marker at the center.         |
| `zoom`        | `number`                       | `15`         | Initial zoom level.                                           |
| `height`      | `string`                       | `"350px"`    | The height of the map container.                              |

---

## AI Rules

> [!IMPORTANT]
>
> - **Center Requirement**: Always provide a valid `center` object with `lat` and `lng`.
> - **Simplicity first**: Use `SimpleMap` for 90% of business use cases (contact pages, single store locations). Use the base `Map` only if you need polygons, circles, or multiple dynamic markers.