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

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

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

<!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 и лицензионные файлы.

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

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

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 и кластеры.

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

Зарегистрируйтесь и создайте ключ «На сайте» с правами search, geocode, reverse и добавьте адрес Вашего сайта в разрешённые. YOUR_BROWSER_KEY ниже заменяется этим браузерным ключом.

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. Все методы поиска.

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

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

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

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

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

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

SDK также поддерживает собственные маркеры, карточки, линии, полигоны, окружности, кластеры, управление камерой и воспроизведение Ваших временных данных. Полный справочник SDK RC9.

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

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

Перемещение карты, отображение объектов и готовой линии маршрута бесплатны. Поиск, расчёт маршрута и матрицы — отдельные запросы сервисного API. Тарифы.