Как добавить карту на сайт: Google Maps, Яндекс Карты, Leaflet

Короткий ответ

Для страницы «Контакты» с одним адресом достаточно встроенного iframe от Google Maps или Яндекс Карт: никакого кода, пара минут работы. Если на карте должно быть много точек (филиалы, пункты выдачи), фильтры или своё оформление меток, нужна интерактивная JS-карта: Google Maps JavaScript API, API Яндекс Карт или открытая библиотека Leaflet.

В любом варианте карта тяжёлая: скрипты, тайлы, шрифты. Поэтому главное правило — не грузить её сразу, а только когда она понадобится.

Сравнение провайдеров

Тарифы и лимиты у всех провайдеров периодически меняются, поэтому перед запуском сверьтесь с актуальными условиями. Покрытие тоже проверяйте на своих адресах: откройте карту нужного района в каждом сервисе и посмотрите, есть ли там номера домов и названия улиц, которые знают ваши клиенты.

Вариант 1: iframe за пять минут

1. Найдите адрес на карте.
2. В Google Maps: «Поделиться» → «Встраивание карт». В Яндекс Картах: Конструктор карт, где можно поставить метку и подпись.
3. Скопируйте код и вставьте в страницу.

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="100%" height="400"
  style="border:0"
  loading="lazy"
  title="Карта проезда к офису"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Атрибут loading="lazy" уже даёт заметный выигрыш: браузер не загружает iframe, пока он далеко за пределами экрана. Не забывайте title — его читает скринридер.

Вариант 2: интерактивная карта с метками на Leaflet

Leaflet — лёгкая открытая библиотека. Тайлы (картинки карты) она берёт у любого провайдера.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<div id="map" style="height:400px"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map("map").setView([41.311, 69.279], 12);
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  const offices = [
    { name: "Офис 1", coords: [41.311, 69.279] },
    { name: "Офис 2", coords: [41.338, 69.334] }
  ];
  offices.forEach(o => L.marker(o.coords).addTo(map).bindPopup(o.name));
</script>

Важно: публичные тайлы OpenStreetMap имеют политику использования и не рассчитаны на нагруженные коммерческие проекты. Для продакшена подключите коммерческого провайдера тайлов или поднимите свой сервер. Атрибуцию источника данных убирать нельзя.

С Google и Яндексом логика та же: подключаете скрипт с ключом, создаёте карту в контейнере, добавляете метки из массива. Ключ ограничьте по домену (HTTP referrer) в консоли провайдера, иначе его смогут использовать на чужих сайтах за ваш счёт.

Как не замедлить страницу

• Ленивая загрузка. Подключайте скрипт карты только когда контейнер появился рядом с экраном.
• Фасад. Покажите статичную картинку карты с кнопкой «Открыть карту», а настоящую карту грузите по клику.
• Фиксированная высота контейнера, чтобы при загрузке не прыгал макет (CLS).
• Не ставьте карту в первый экран, если она не главная цель страницы.
• Кластеризация меток, если точек сотни: иначе карта будет тормозить на телефонах.

const el = document.getElementById("map");
const io = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  io.disconnect();
  const { initMap } = await import("./map.js");
  initMap(el);
}, { rootMargin: "200px" });
io.observe(el);

Частые ошибки

• Ключ API без ограничений по домену.
• Карта на всю ширину на мобильном, из-за которой невозможно прокрутить страницу: палец «застревает» в карте. Отключите перетаскивание одним пальцем или сделайте карту ниже.
• Нет текстового адреса рядом с картой. Адрес текстом нужен и людям, и поисковикам.
• Несколько провайдеров карт на одном сайте — лишний вес без пользы.