Есть ли российская карта?

Работа с картами в фронтенд приложениях: Российские карты

Это хороший вопрос о практическом использовании map API в приложениях. Да, существуют решения для работы с российскими картами.

Основные сервисы карт

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

Самый популярный выбор для российского рынка.

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

interface MapProps {
  latitude: number;
  longitude: number;
  zoom?: number;
}

export function RussianMap({ latitude, longitude, zoom = 12 }: MapProps) {
  return (
    <YMaps>
      <Map
        defaultState={{
          center: [latitude, longitude],
          zoom: zoom,
        }}
        width="100%"
        height="500px"
      >
        <Placemark geometry={[latitude, longitude]} />
      </Map>
    </YMaps>
  );
}

API ключ:

// .env.local
NEXT_PUBLIC_YANDEX_MAP_API_KEY=your_api_key_here

// next.config.js
module.exports = {
  env: {
    NEXT_PUBLIC_YANDEX_MAP_API_KEY: process.env.NEXT_PUBLIC_YANDEX_MAP_API_KEY,
  },
};

Установка пакета:

npm install @pbe/react-yandex-maps yandex-map-react

2. Google Maps (International)

Работает в России, но требует VPN для некоторых регионов.

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

interface GoogleMapProps {
  latitude: number;
  longitude: number;
}

export function InteractiveMap({ latitude, longitude }: GoogleMapProps) {
  const center = { lat: latitude, lng: longitude };

  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}>
      <GoogleMap
        mapContainerStyle={{
          width: '100%',
          height: '500px',
        }}
        center={center}
        zoom={12}
      >
        <Marker position={center} />
      </GoogleMap>
    </LoadScript>
  );
}

Установка:

npm install @react-google-maps/api

3. OpenStreetMap (OSM)

Бесплатная альтернатива, работает везде, включая Россию.

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

interface OSMMapProps {
  latitude: number;
  longitude: number;
  title?: string;
}

export function OpenStreetMap({ latitude, longitude, title = 'Location' }: OSMMapProps) {
  const position: [number, number] = [latitude, longitude];

  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={false}
      style={{ width: '100%', height: '500px' }}
    >
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>{title}</Popup>
      </Marker>
    </MapContainer>
  );
}

Установка:

npm install react-leaflet leaflet

4. 2GIS (Двугис)

Российский сервис с хорошим покрытием России.

// Через WebGL API 2GIS
export function TwoGisMap({ latitude, longitude }: MapProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://maps.2gis.com/js/2gis.js';
    script.async = true;
    script.onload = () => {
      const map = (window as any).DG.map('map', {
        center: [latitude, longitude],
        zoom: 13,
      });
      (window as any).DG.marker([latitude, longitude]).addTo(map);
    };
    document.body.appendChild(script);
  }, [latitude, longitude]);

  return <div id="map" style={{ width: '100%', height: '500px' }} />;
}

Сравнение сервисов

Практический пример: Выбор сервиса

// Определяем сервис в зависимости от региона
type MapProvider = 'yandex' | 'google' | 'osm';

interface MapComponentProps {
  latitude: number;
  longitude: number;
  provider?: MapProvider;
}

export function SmartMap(props: MapComponentProps) {
  const provider = props.provider || detectBestProvider();

  switch (provider) {
    case 'yandex':
      return <YandexMap {...props} />;
    case 'google':
      return <GoogleMapComponent {...props} />;
    case 'osm':
      return <OSMMap {...props} />;
    default:
      return <OSMMap {...props} />; // fallback
  }
}

function detectBestProvider(): MapProvider {
  // Проверяем локацию пользователя
  // В России приоритет Яндекс > 2GIS > OSM
  // В мире: Google > OSM
  return 'osm'; // Универсальное решение
}

Типизированный компонент с Яндекс

interface Location {
  latitude: number;
  longitude: number;
  title: string;
  description?: string;
}

interface YandexMapProps {
  locations: Location[];
  onMarkerClick?: (location: Location) => void;
  initialZoom?: number;
}

export function AdvancedYandexMap({
  locations,
  onMarkerClick,
  initialZoom = 12,
}: YandexMapProps) {
  const [activeMarker, setActiveMarker] = useState<number | null>(null);

  if (!locations.length) {
    return <div>Нет локаций для отображения</div>;
  }

  const center = [
    locations[0].latitude,
    locations[0].longitude,
  ] as [number, number];

  return (
    <YMaps>
      <Map defaultState={{ center, zoom: initialZoom }} width="100%" height="500px">
        {locations.map((location, index) => (
          <Placemark
            key={`${location.latitude}-${location.longitude}`}
            geometry={[location.latitude, location.longitude]}
            properties={{
              balloonContent: `
                <div>
                  <h3>${location.title}</h3>
                  <p>${location.description || ''}</p>
                </div>
              `,
            }}
            onClick={() => {
              setActiveMarker(index);
              onMarkerClick?.(location);
            }}
            options={{
              preset:
                activeMarker === index
                  ? 'islands#redIcon'
                  : 'islands#blueIcon',
            }}
          />
        ))}
      </Map>
    </YMaps>
  );
}

Performance Оптимизация

// Ленивая загрузка карты
dynamic(() => import('@/components/maps/YandexMap'), {
  ssr: false,
  loading: () => <div>Загрузка карты...</div>,
});

// Мемоизация
const MemoMap = React.memo(YandexMap, (prev, next) => {
  return (
    prev.latitude === next.latitude &&
    prev.longitude === next.longitude &&
    prev.zoom === next.zoom
  );
});

Best Practices

1. Выбор сервиса:

   • Для России: Яндекс.Карты или OpenStreetMap
   • Для международного: Google Maps или OpenStreetMap
   • Fallback всегда: OpenStreetMap (бесплатно, везде работает)

2. API Keys:

   • Никогда не коммитить в код
   • Хранить в .env.local
   • Для фронтенда нужны публичные ключи (NEXT_PUBLIC_*)

3. Performance:

   • Ленивая загрузка карт
   • Мемоизация компонентов
   • Кеширование tile'ов

4. Accessibility:

   • Добавлять aria-label к контейнерам
   • Клавиатурную навигацию
   • Альтернативный текст для маркеров

На собеседовании

Полный ответ должен показать:

• Знание вариантов — какие сервисы существуют в России
• Практический опыт — как интегрировал карты в проектах
• Выбор по контексту — когда использовать какой сервис
• Типизация и качество кода — TypeScript интерфейсы
• Performance — оптимизация загрузки и рендеринга