Подключение yandex map в react проекте

Для интеграции API Yandex Maps в проект на React удобно воспользоваться сторонней библиотекой, которая упростит процесс. Одним из таких инструментов является React Yandex Maps. Вот пример того, как можно использовать эту библиотеку:

Установи библиотеку с помощью npm:

npm install react-yandex-maps

Импортируй компоненты из библиотеки в файле React-компонента:

import { YMaps, Map, Placemark } from 'react-yandex-maps';

Используй компоненты в JSX:

 function MyMap() {
  return (
    <YMaps>
      <Map defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}>
        <Placemark geometry={[55.751574, 37.573856]} />
      </Map>
    </YMaps>
  );
}

export default MyMap;

Замени значения center и geometry на координаты выбранного местоположения.

Для 3-й версии есть модуль reactify, из него можно получить компоненты примерно так:

import React, {useEffect, useMemo} from "react";
import {features, LOCATION} from './helpers'

function Map() {
  const [data, setData] = useState(); 
  const {
    YMap,
    // ...other components
  } = useMemo(() => {
    if (data?.reactify) {
      return reactify.module(data.ymap);
    }
  }, [data]);

  useEffect(() => {
    const script = document.createElement('script');
    document.body.appendChild(script);
    script.type = "text/javascript";
    script.src = `https://api-maps.yandex.ru/v3/?apikey=${key}&lang=${lang}`;
    script.onload = async () => {
      const ymaps = window.ymaps3
      await ymaps.ready;
      const ymaps3Reactify = await ymaps.import('@yandex/ymaps3-reactify');
      const reactify = ymaps3Reactify.reactify.bindTo(React, ReactDOM);

      setData({
        reactify,
        ymaps
      });
      /*
      and other logic which is not connected with rendering
      to load ymap modules like YMapDefaultMarker
      */
    }
  }, [])
  
  if (!YMap) {
    return null;
  }

  return (
    <YMap location={location}>
      <YMapDefaultSchemeLayer/>
      <YMapDefaultFeaturesLayer/>
      <YMapDefaultMarker
        coordinates={LOCATION.coordinates}
      />
    </YMap>
  );
}

export default Map;

Однако, можно и из библиотеки ymap3-components достать компоненты через import:

import React from "react";
import {
  YMap,
  YMapDefaultSchemeLayer,
  YMapDefaultFeaturesLayer
  // ...other components
} from "ymapv3-components";
import { features, LOCATION } from './helpers'

function Map() {
  return (
    <YMapComponentsProvider apiKey={process.env.REACT_APP_YMAP_KEY}>
      <YMap location={location}>
        <YMapDefaultSchemeLayer />
        <YMapDefaultFeaturesLayer />
        <YMapDefaultMarker
          coordinates={LOCATION.coordinates}
        />
      </YMap>
    </YMapComponentsProvider>
  );
}

export default Map;

Также учитывайте, что для работы с 3-м api нужно выполнить следующие шаги:

1. Получить ключ для map js api
2. Установить домен, где будет работать сайт с картой
3. Для разработки удобно поменять /etc/hosts, потому что карта будет запускаться только на сайте, где referer такой же, как установленный домен