Как добавить карту в React приложении?

@Константин345 · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

Делаю интернет-магазин.
Нужно на нескольких страницах создать карту с местонахождением магазина.
То есть не просто картинку в виде скриншота, а чтобы с картой можно было взаимодействовать.
Т.е. yandex.maps или google.maps необходимо интегрировать в приложение.

ВСЕ ТЕ СПОСОБЫ, КОТОРЫЕ Я НАШЕЛ В ГУГЛЕ не работают, либо же они на английском, который у меня не превышает уровень А2.

С меня благодарность!

krvsa · 21.02.2023, 13:46

Сообщение от Константин345

ВСЕ ТЕ СПОСОБЫ, КОТОРЫЕ Я НАШЕЛ В ГУГЛЕ не работают, либо же они на английском

А вот это?
https://dev-gang.ru/article/in... 9y49uxwm8/

@Константин345 · 21.02.2023, 14:19 **[ТС]**

krvsa, Можете мне с этим способом помочь разобраться? Я его и пытаюсь заюзать, но возникает ошибка...

Во-первых, мне непонятно по тому способу следующее:
Вначале они пишут следующее:
"Создайте новый файл внутри вашего приложения Component и назовите его Map.js. Теперь вам нужно импортировать google-maps-rect. Для этого добавьте следующий фрагмент в Map.js."

а затем речь идет о некоем файле Maps.js, о котором ранее не было ни слова:
Вам нужно добавить оператор экспорта по умолчанию в файле Maps.js, как показано ниже

Добавлено через 2 минуты
Во-вторых, я делаю так:

- создаю файл Map.js и в него помещаю

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export class Maps extends React.Component {
  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };
    return (
      <Map
        google={this.props.google}
        zoom={15}
        style={mapStyles}
        initialCenter={{ lat: 9.761927, lng: 79.95244 }}
      />
    );
  }
}
export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(Maps);

Правильно я понимаю, что ЗАТЕМ я должен импортировать там, где надо файл Maps и карта появится на сайте?

Мне непонятно, что происходит здесь:

JavaScript
1
2
3
export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(Maps);

Я реакт месяц изучаю.

Добавлено через 48 секунд
Буду очень благодарен, если подскажите что именно я делаю не так, чего не понимаю.

Добавлено через 12 минут
Такая ошибка возникает

JavaScript
1
Module not found: Error: Can't resolve 'google-maps-react' in 'C:\Users\alon3\OneDrive\Рабочий стол\react\my-app\src'

krvsa · 21.02.2023, 14:23

Сообщение от Константин345

Правильно я понимаю, что ЗАТЕМ я должен импортировать там, где надо файл Maps и карта появится на сайте?

Да. Как-то так.

Сообщение от Константин345

Мне непонятно, что происходит здесь

Нужно иметь свой ключ. И подставить его вместо 'TOKEN HERE'...

Сообщение от Константин345

Такая ошибка возникает

Импортировал google-maps-react?

@Константин345 · 21.02.2023, 14:24 **[ТС]**

krvsa, мне уже подсказали - пакет не совместим с 18 версией реакта... Потому способ нерабочий.

krvsa · 21.02.2023, 14:32

Поспрошал наших ребят... У нас используется React-Leaflet.
https://dev-gang.ru/article/re... ctlql4m0w/

Это их дока (правда аглицкая)
https://react-leaflet.js.org

Там с примерами и все такое...
https://react-leaflet.js.org/d... up-marker/

@Константин345 · 21.02.2023, 14:34 **[ТС]**

krvsa, Спасибо!

@Splaisto · 21.02.2023, 14:37

Сообщение от krvsa

React-Leaflet

лефлет - дело рискованное, это продукт украинских разрабов, в прошлом году они на время отключали доступ для рф, с текущим положением дел нет гарантий на стабильную работу.
openlayers в помощь, правда документация дно пробивает и придется немного запариться.

@Константин345 · 21.02.2023, 14:38 **[ТС]**

Splaisto, а этот способ под реакт можно подогнать, как думаете?
https://developers.google.com/... -map?hl=ru

@gogolik · 21.02.2023, 14:39

Яндекс карты: https://www.npmjs.com/package/... andex-maps

@Константин345 · 21.02.2023, 14:47 **[ТС]**

gogolik, Спасибо!

Добавлено через 5 минут
gogolik, Работает, но есть один нюанс: как размер карты увеличить? Впечатление, что она 200x200 пикселей.

@gogolik · 21.02.2023, 14:48

Константин345, увеличить размер блока, очевидно. Или смотреть документацию.

@Splaisto · 21.02.2023, 14:52

Сообщение от Константин345

под реакт можно подогнать

никто не мешает в проекте на реакт использовать чистый js или ts

@Константин345 · 21.02.2023, 14:57 **[ТС]**

gogolik, спасибо, так и думал

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194

	Как добавить карту в React приложении? 21.02.2023, 13:19. Показов 1688. Ответов 13 Метки нет (Все метки) Делаю интернет-магазин. Нужно на нескольких страницах создать карту с местонахождением магазина. То есть не просто картинку в виде скриншота, а чтобы с картой можно было взаимодействовать. Т.е. yandex.maps или google.maps необходимо интегрировать в приложение. ВСЕ ТЕ СПОСОБЫ, КОТОРЫЕ Я НАШЕЛ В ГУГЛЕ не работают, либо же они на английском, который у меня не превышает уровень А2. С меня благодарность! 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	21.02.2023, 14:24 [ТС]
	krvsa, мне уже подсказали - пакет не совместим с 18 версией реакта... Потому способ нерабочий. 0

krvsa 3832 / 1667 / 431 Регистрация: 14.03.2022 Сообщений: 4,201
	21.02.2023, 14:32
	Поспрошал наших ребят... У нас используется `React-Leaflet`. https://dev-gang.ru/article/re... ctlql4m0w/ Это их дока (правда аглицкая) https://react-leaflet.js.org Там с примерами и все такое... https://react-leaflet.js.org/d... up-marker/ 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	21.02.2023, 14:34 [ТС]
	krvsa, Спасибо! 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	21.02.2023, 14:38 [ТС]
	Splaisto, а этот способ под реакт можно подогнать, как думаете? https://developers.google.com/... -map?hl=ru 0

@gogolik Супер-модератор 3954 / 2067 / 830 Регистрация: 13.03.2010 Сообщений: 6,818
	21.02.2023, 14:39
	Яндекс карты: https://www.npmjs.com/package/... andex-maps 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	21.02.2023, 14:47 [ТС]
	gogolik, Спасибо! Добавлено через 5 минут gogolik, Работает, но есть один нюанс: как размер карты увеличить? Впечатление, что она 200x200 пикселей. 0

@gogolik Супер-модератор 3954 / 2067 / 830 Регистрация: 13.03.2010 Сообщений: 6,818
	21.02.2023, 14:48
	Константин345, увеличить размер блока, очевидно. Или смотреть документацию. 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	21.02.2023, 14:57 [ТС]
	gogolik, спасибо, так и думал 0