Как подключить google maps в React приложение? 2022

Поділитися
Вставка
  • Опубліковано 19 сер 2024

КОМЕНТАРІ • 67

  • @dmitry_st
    @dmitry_st 14 днів тому

    Спасибо за детальный разбор этой важной темы.

  • @MonkyKseniya
    @MonkyKseniya 2 роки тому +6

    Понравилось видео. Видно, что опытный разработчик с приличным стажем и красивым кодом. Спасибо, что делишься своими знаниями)

  • @user-tu8jt8ih5q
    @user-tu8jt8ih5q 2 роки тому +4

    Топовый видос! Очень помог разобраться. Спасибо! Продолжай снимать дальше. Удачи тебе.

  • @ghost91827
    @ghost91827 2 роки тому +3

    Гарна подача, хороший приклад.
    P.S. на 55:26-55:33 певно контент який планували вирізати

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому

      Так, планував вирізати :) Буває...

  • @zaobriy
    @zaobriy 2 роки тому +1

    Дякую за відео, було дуже корисно. Чекаємо перемогу і новий контент:)

    • @boringfrontend9037
      @boringfrontend9037  Рік тому +4

      Новий контент буде, але зараз не начасі, є чим займатись... Але новий контент буде 100% украінською

  • @podpalmoi
    @podpalmoi 9 місяців тому

    Благодарю автора за классное и подробное видео. Как у тебя сейчас дела, как с работой? Видно, что ты умный и толковый программист.

  • @user-xt9nl7no8e
    @user-xt9nl7no8e 2 роки тому +1

    Круто, автору большое спасибо!! google maps react

  • @user-dv9de7ul4m
    @user-dv9de7ul4m Рік тому

    сегодня впервые вижу ваши видео. я как понимаю перестали делать контент и очень жаль. на мой взгляд могли бы неплохо развиться в этом плане!!! спасибо за полезный туториал

    • @boringfrontend9037
      @boringfrontend9037  11 місяців тому +1

      Ну після 24/02 якось немає бажання і трохи заклопотаний війною

  • @kubrakivan1579
    @kubrakivan1579 8 місяців тому

    Відео дуже корисне! Дякую!
    Було б дуже добре подивитись відео на тему useCallback(), Directions API and Routes API. Як витягувати дані з маркера чи з інфо windows google і створювати довідник адрес.

  • @vitaliinnest
    @vitaliinnest Рік тому

    Приємне відео, дякую. Всього найкращого!

  • @boringfrontend9037
    @boringfrontend9037  2 роки тому +1

    Группа instagram в instagram.com/fun_front_end/
    Канал в ТГ t.me/boringfe
    Patreon: www.patreon.com/boringfrontend

  • @user-iy2hd6ix9j
    @user-iy2hd6ix9j 2 роки тому +1

    Супер! Спасибо большое!

  • @vadym_za
    @vadym_za Рік тому +1

    Дякую! Контент топ

  • @ernesttrachuk6931
    @ernesttrachuk6931 2 роки тому +2

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

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому +1

      Хорошая идея, постараюсь подготовить

    • @user-mm3sd3uh6y
      @user-mm3sd3uh6y 2 роки тому +1

      @@boringfrontend9037 реально скучный фронтенд у тебя получается, разнообразь что ли интонацию хотя бы, подачу немного оживи

    • @user-hk1lk6ty6v
      @user-hk1lk6ty6v 2 роки тому

      @@user-mm3sd3uh6y А вы учиться чему-то пришли или развлекаться?

    • @user-mm3sd3uh6y
      @user-mm3sd3uh6y 2 роки тому

      @@user-hk1lk6ty6v лучше всего учится и запоминается развлекаючись. Прочитай что такое геймификация, это совместимые вещи

  • @user-mt1cm3ue3t
    @user-mt1cm3ue3t 2 роки тому +2

    сделайте пожалуйста видно по рефам

  • @MrTruth-rc2fr
    @MrTruth-rc2fr 2 роки тому +1

    A нельзя без Гугл клауда? Нет карты банковской у меня -_-

  • @petroradchenko6666
    @petroradchenko6666 2 місяці тому

    Коллеги, кто собрал проект по этому уроку и он работает? Дайте, пожалуйста ссылку на гит

  • @taras8068
    @taras8068 Рік тому

    Дякую за відео)

  • @andersonalmeydat7715
    @andersonalmeydat7715 2 роки тому +1

    gracias amigo, me sirvió mucho!

  • @madmat8825
    @madmat8825 2 роки тому

    Спасибо за видео!

  • @mhersimonyan974
    @mhersimonyan974 Рік тому

    Может кто-то скинуть пожалуйста полный код видео? Ссылка репозитория например

  • @evloev4821
    @evloev4821 Рік тому +1

    Привет! а откуда взялся API_KEY ?

  • @tahyc9492
    @tahyc9492 Рік тому

    почему не работает оба установщика карты?( я уже всё перепробовал, постоянно выдает одну и ту же ошибку

  • @simpsomk
    @simpsomk 5 місяців тому

    Marker is deprecated :(

  • @artemis1634
    @artemis1634 8 місяців тому

    Відосик база

  • @podpalmoi
    @podpalmoi 9 місяців тому

    Товарищ автор, я сделал дипломный проект и улучшаю его. Верно ли понимаю, что если вдруг случится атака ботов, то с меня могут списать круглую сумму? И сколько там вообще платить надо в случае превышения лимитов?

  • @askoldtsentseusti-1122
    @askoldtsentseusti-1122 2 роки тому +1

    для тех у кого Marker пропадает после обновления страницы(ре-рендера), используйте MarkerF, и если это не поможет добавьте к нему key =)

    • @alexeyartush6827
      @alexeyartush6827 Рік тому

      спасибо тебе, добрый человек:)

    • @viktordikovich6058
      @viktordikovich6058 Рік тому

      @@alexeyartush6827 кто ты воин! я 2 дня не мог понять что за ерунда!!!!

  • @viktordikovich6058
    @viktordikovich6058 Рік тому

    Блин нифига не отображается карта! ошибок в консоле нет, счетчик запросов в гугле растёт, но карты нет. Уже и разные библиотеки качал , начинал все сначала , открывал в разных браузерах, и ничего !!! Я пользую webStorm , может из за этого ,,,,)))) уже не знаю. что думать

  • @c4973
    @c4973 2 роки тому

    Илья, подскажите, пожал. почему может не переходить по адресу и не консолятся гео-координаты? нашёл проблему в data приходит пустой массив.

  • @user-ox6yn3ze1k
    @user-ox6yn3ze1k 2 роки тому +1

    С рефами было не совсем понятно почему мы выкинули строчку bounds… , видео по рефам будет полезно.

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому

      Буду готовить, спасибо за фид бэк

  • @user-xl3bg9ib4f
    @user-xl3bg9ib4f 2 роки тому

    Очень крутое видео, спасибо. А есть что-то по построению маршрутов на карте, как это правильно делать?

  • @codding1144
    @codding1144 8 місяців тому

    Дякую за відео!
    А де код цього проєкту?

  • @user-ox6yn3ze1k
    @user-ox6yn3ze1k 2 роки тому +1

    Спасибо за видео! Подскажи как можно соединять линией маркеры, что бы при добавлении нового маркера появлялась линия от предыдущего и мы получали что то типа маршрута? Есть ли стандартное решение?

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому +1

      Это нужно подключить routes api developers.google.com/maps/documentation/javascript/directions, вот это по идее обертка для реакт react-google-maps-api-docs.netlify.app/#directionsrenderer

    • @user-ox6yn3ze1k
      @user-ox6yn3ze1k 2 роки тому

      @@boringfrontend9037 спасибо!

  • @dmytroihnatushko8802
    @dmytroihnatushko8802 Рік тому

    В мене одного не працює Autocomplete? Може хтось допомогти? написав все як у відео

  • @c4973
    @c4973 2 роки тому

    Добрый день! Снимите, пожал. еще видео по хукам.

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому +4

      Як тільки переможемо московію так одразу продовжу знімати, зараз не до цього

  • @user-pr5bv7vh4w
    @user-pr5bv7vh4w 2 роки тому

    Записываю свой API через process.env.REACT_APP_API_KEY. Пытаюсь отконсолить,чтобы проперить видет ли API, а он пишет undefined. Все правильно прописал, но не работает. В чем может быть проблема?

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому

      Возможно нужно сборку перезагрузить, или проверь что у тебя фаил называется .env и находится в корне проекта

    • @user-pr5bv7vh4w
      @user-pr5bv7vh4w 2 роки тому

      кто будет на NEXT, то вот ссылка с решением проблемы nextjs.org/docs/basic-features/environment-variables

    • @askoldtsentseusti-1122
      @askoldtsentseusti-1122 2 роки тому

      он должен лежать в папке где находится package.json

    • @user-hp2xs9qu6g
      @user-hp2xs9qu6g Рік тому

      @@boringfrontend9037 спасибо помогло !!!

  • @user-pv1vo6vx2j
    @user-pv1vo6vx2j 2 роки тому

    Здравствуйте, Google cloud больше не регистрирует жителей из России, как тогда добавить карту в свой сайт?

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому +25

      Вивести війська з территоріі України та піти у напрямку "Русского военного корабля"

    • @danildemchenko6004
      @danildemchenko6004 2 роки тому +3

      @@boringfrontend9037 Прекрасный ответ:) по факту

  • @xXXBetManXXx
    @xXXBetManXXx 2 роки тому

    В чем отличие файлов формата js и jsx?

    • @user-tx5yk4nk7b
      @user-tx5yk4nk7b 2 роки тому

      jsx это файлы стандартного React, совмещает в себе js и html если простым языком

    • @xXXBetManXXx
      @xXXBetManXXx 2 роки тому

      @@user-tx5yk4nk7b ну можно же все создать в формате js и ошибки не будет, почему автор разбивает их?

    • @boringfrontend9037
      @boringfrontend9037  Рік тому

      Для того щоб візуально було одразо помітно що за що відповідає + кращє працює автокомлінт в VSCode

  • @vitamarys
    @vitamarys 2 роки тому

    С маркёром есть проблема.
    Он отображается только после старта приложения, но если обновить страницу больше не появляется.

    • @birmi
      @birmi 2 роки тому

      в LocalStorage сохранить попробуй

  • @fastcoolmans
    @fastcoolmans 2 роки тому

    так

  • @egorpobylets6597
    @egorpobylets6597 2 роки тому +3

    Вельмi цiкавае вiдэа! Слава Украiнi!!!!!

  • @user-ox6yn3ze1k
    @user-ox6yn3ze1k 2 роки тому

    Не совсем пойму почему пароли записанные в .env после build , можно вполне спокойно найти в вкладке Sources => Static / js / main.... .js Почему они там не скрываются и как их можно скрыть от пользователя? При этом файле по типу firebase.ts , действительно паролей не видно.

    • @boringfrontend9037
      @boringfrontend9037  2 роки тому +1

      Добавляются в бандл потому что иначе в браузер никак не прокинуть для использования, скрыть можно если их попробовать хешировать, что возможно firebase-cli и делает, в любом случае хранить данные которые могут нанести вашему приложению вред при похищении на фронте не стоит. Если говорить о приложении которое должно быть безопасным продакши реди, та сказать, то надо придумывать механизмы по кодированию/декодированию перемеенные, конечно если это того стоит