# Подключение бесплатной карты

Карта и JavaScript SDK работают без регистрации и API-ключа.

## Минимальный пример

Сохраните HTML и откройте его через веб-сервер. Контейнеру карты нужна явная высота. JS и CSS подключайте из одной версии SDK — **1.0.0-rc.9**.

```html
<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Карта Ммаппс</title>
<link rel="stylesheet" href="https://cdn.mmapps.ru/sdk/1.0.0-rc.9/index.css">
<div id="map" style="height:400px"></div>
<script type="module">
import { createClient } from 'https://cdn.mmapps.ru/sdk/1.0.0-rc.9/index.js';

const geo = createClient();
const map = await geo.createMap({
  element: document.getElementById('map'),
  mapId: 'ru',
  view: { center: { latitude: 55.75, longitude: 37.61 }, zoom: 10 },
  controls: { navigation: true, scale: true },
});
await map.ready;

// При удалении компонента страницы:
// map.destroy();
// geo.destroy();
</script>
</html>
```

Подложка загружается с публичного CDN. Не добавляйте к этим запросам API-ключ, заголовок Authorization или cookies. Если подключаете файлы SDK со своего сервера, сохраняйте весь комплект выпуска, включая worker рядом с `index.js` и лицензионные файлы.

## Добавьте метку

Следующий код выполняется после создания карты:

```javascript
const marker = map.objects.add({
  id: 'office',
  kind: 'marker',
  point: { latitude: 55.75, longitude: 37.61 },
  label: 'Пример офиса',
  style: { color: '#1187ff' },
});
marker.on('click', () => {
  marker.popup.open({ text: 'Пример карточки места' });
});
```

Замените координаты на положение Вашего офиса. Используйте `text` для текста карточки, а для собственного оформления — DOM-элемент. [Объекты, коллекции, GeoJSON и кластеры](https://mmapps.ru/docs/sdk#obieekty-i-kollekcii).

## Подключите поиск

[Зарегистрируйтесь](https://mmapps.ru/app/register) и создайте ключ «На сайте» с правами `search`, `geocode`, `reverse` и добавьте адрес Вашего сайта в разрешённые. `YOUR_BROWSER_KEY` ниже заменяется этим браузерным ключом.

```javascript
import { createSearchController } from 'https://cdn.mmapps.ru/sdk/1.0.0-rc.9/index.js';

const services = createClient({
  apiBaseUrl: 'https://mmapps.ru',
  apiKey: 'YOUR_BROWSER_KEY',
});
const controller = createSearchController({
  client: services.geocoder,
  map,
  fitResults: true,
});
const search = map.controls.addSearch({
  controller,
  position: 'top-left',
  onSelect(selection) {
    // Сохраните selection.ref и selection.point в состоянии приложения.
  },
});

// При удалении компонента:
// search.remove(); controller.destroy(); services.destroy();
```

Выбор строки — локальное действие без повторного геокодинга. `selection.point` может быть `null`, `selection.queryPoint` сохраняет исходную точку обратного поиска. Кнопки маршрута и передачи результата подключаются через `onRoute` и `onShare`. [Все методы поиска](https://mmapps.ru/docs/sdk#poisk-i-vybor-adresa).

## Тема и номера домов

`theme: 'light'` или `'dark'` задаёт тему при создании, `map.setTheme()` меняет её позже. Для поддерживаемой подложки настройка `houseNumbers` управляет появлением и размером номеров:

```javascript
const map = await geo.createMap({
  element: document.getElementById('map'),
  mapId: 'ru',
  houseNumbers: { minZoom: 15.5, sizeScale: 0.88 },
});
```

`minZoom` — масштаб появления подписей, `sizeScale` — множитель размера шрифта. Настройка не добавляет отсутствующие номера в данные. Не создавайте две карты в одном контейнере: пример выше заменяет параметры первого вызова.

## Готовый виджет и дополнительные возможности

`createMapWidget()` объединяет карту, поиск, редактор маршрута, меню точки и при необходимости таймлайн. Передайте только сервисы, которые нужны приложению. Бесплатная карта работает и без них.

SDK также поддерживает собственные маркеры, карточки, линии, полигоны, окружности, кластеры, управление камерой и воспроизведение Ваших временных данных. [Полный справочник SDK RC9](https://mmapps.ru/docs/sdk).

## Освобождение ресурсов

При удалении карты вызывайте `map.destroy()`. Если использовали виджет — `widget.destroy()`. Отдельно созданные контроллеры, таймлайн и API-клиент освобождайте через их `destroy()`; функции, возвращённые `on()`, отменяют подписку на событие.

Перемещение карты, отображение объектов и готовой линии маршрута бесплатны. Поиск, расчёт маршрута и матрицы — отдельные запросы сервисного API. [Тарифы](https://mmapps.ru/docs/billing).