Яндекс.Карта

Переменные окружения

Для работы Яндекс.Карт нужно создать файл .env с двумя переменными:

PUBLIC_YMAP_API_KEY — API-ключ Яндекс.Карт

VITE_YMAP_IMAGE_PATH — базовый путь к файлам фронтенда

API-ключ Яндекс.Карт

В кабинете разработчика в настройках ключа нужно добавить адрес сайта в поле Ограничение по HTTP Referer https://developer.tech.yandex.ru/services

Базовый путь к файлам фронтенда

Во время локальной разработки поле следует оставить пустым

Для загрузки на маркап нужно поставить .

Для реально развёрнутого сайта нужно указать путь к теме /app/themes/space-app/frontend/build

.env

PUBLIC_YMAP_API_KEY=1234578-1234-1234-123456789
VITE_YMAP_IMAGE_PATH=/app/themes/space-app/frontend/build

Подключение на странице

Нужно добавить пропс ymap в компонент Layout и импортировать компонент <YandexMap/> с обязательным указанием id.

pages/contact.astro

---
import Layout from "@components/Layout.astro";
import YandexMap from "@components/YandexMap.astro";
---

<Layout title="Контакты" scripts={["contact"]} ymap>
    <YandexMap id="map" />
</Layout>

Инициализация скрипта

В файле скрипта страницы нужно вызвать функцию initYandexMap c указанием параметров:

selector — селектор DOM-элемента карты

YMapProps — опции Яндекс.Карты: https://yandex.com/maps-api/docs/js-api/ref/index.html#YMapProps

points — точки-маркеры на карте

src/scripts/entity/contact.ts

import { initYandexMap } from "@lib/init-yandex-map";

initYandexMap({
  selector: "#map",
  YMapProps: { location: { center: [37.762704, 55.454751], zoom: 12 } },
  points: [
    {
      coordinates: [37.762504, 55.455711],
      height: 40,
      width: 40,
      image: "/img/marker.svg",
    },
  ],
});

Кастомизация

Вы можете модифицировать src/scripts/lib/init-yandex-map.ts, если нужно больше возможностей.