Как интегрировать во фронтенд-проект сторонние сервисы, например Яндекс.Карты или Google Maps?

Интеграция сторонних сервисов — это подключение внешнего JavaScript SDK (карты, платежи, чаты, аналитика) к вашему приложению. Главная сложность в том, что такой код живёт вне вашего бандла: он загружается по сети, имеет собственный глобальный объект (например, ymaps или google.maps) и требует API-ключа.

Способы подключения

• Статический тег script в index.html — просто, но скрипт грузится всегда, даже если карта не нужна.
• Динамическая загрузка через document.createElement('script') — грузим только когда нужно, экономим трафик.
• Готовые обёртки (react-yandex-maps, @react-google-maps/api) — берут на себя жизненный цикл и типизацию.

Пример динамической загрузки в React

function loadScript(src) {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve();
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

function Map() {
  const ref = useRef(null);
  useEffect(() => {
    let map;
    loadScript('https://api-maps.yandex.ru/2.1/?apikey=KEY&lang=ru_RU')
      .then(() => window.ymaps.ready(() => {
        map = new window.ymaps.Map(ref.current, { center: [55.75, 37.61], zoom: 10 });
      }));
    return () => map && map.destroy();
  }, []);
  return <div ref={ref} style={{ width: '100%', height: 400 }} />;
}

Ключевые моменты

1. API-ключ храните в переменных окружения и ограничивайте по referer/домену.
2. Загружайте скрипт асинхронно (async), чтобы не блокировать первую отрисовку.
3. Проверяйте, не загружен ли скрипт повторно — иначе SDK инициализируется дважды.
4. В SPA очищайте инстанс карты при размонтировании, иначе утечка памяти.
5. Учитывайте CSP: домены SDK нужно добавить в script-src.

Итог: применяйте динамическую загрузку с обёрткой в компонент, когда сервис нужен не на всех страницах; для простых случаев достаточно тега script в HTML с корректным API-ключом.