Карты Google с React

Какой пакет узлов мне следует использовать?

Ситуация

Вы работаете над приложением на основе React и хотите реализовать Карты Google для отображения местоположения вашего бизнеса или предоставления маршрутов пользователю. На этом этапе вы переходите к документации Google Maps JavaScript API и быстро поражаетесь обилием доступной информации. Несомненно, такие популярные платформы, как React и Google Maps, имеют готовые пакеты узлов, которые облегчают обучение, необходимое для реализации карты.

Быстрый поиск в Google показывает несколько вариантов, которые кажутся очень похожими, как показано на рисунке 1. Теперь вы столкнулись с другим вопросом, какой из них соответствует вашим потребностям? Что ж, ответ на этот вопрос действительно зависит от ваших потребностей, но в большинстве случаев я бы рекомендовал пропустить пакеты узлов и использовать ванильный Google Maps JavaScript API.

Сравнение пакетов узлов

Быстрое сравнение доступных пакетов узлов, показанных на рисунке 1, показано на рисунке 2 ниже. Обратите внимание, что это не глубокое погружение в каждую доступную функцию, а просто осмотр на уровне поверхности. Из рисунка 2 видно, что, хотя «react-google-maps» является наиболее многофункциональным, прошло несколько лет с момента его обновления. Другие пакеты не так богаты, но поддерживают отображение карты и размещение некоторых маркеров, что часто бывает всем, что вам нужно. Также можно увидеть, что еженедельные загрузки всех этих пакетов относительно невелики по сравнению с популярностью Google Maps. Наконец, также стоит отметить, что, хотя все пакеты узлов имеют документацию, качество документации различается и, по моему опыту, может немного сбивать с толку.

Итак, эти пакеты поддерживают основные функции карты, но что, если вы хотите нарисовать пользовательские полилинии, получить данные о высоте, настроить интерфейс и внешний вид карты? Скорее всего, пакеты узлов не будут поддерживать эту функцию, встроенную в Google Maps JavaScript API.

Заключение

По моему опыту, проще, быстрее и многофункциональнее использовать обычный Google Maps JavaScript API. Кривая обучения не так крута, как может показаться, а документация очень тщательна. В документации также есть несколько примеров, описывающих распространенные варианты использования. Использование API от Google гарантирует, что у вас есть самые последние данные и версия карты, а также сэкономит ваше время на изучение сторонних пакетов, которые могут не поддерживаться.

Единственное, чего не покрывает документация Google, - это добавление ключа API способом React. На экране 3 показан пример добавления необходимого скрипта Google Maps с ключом API при загрузке компонента. Обратите внимание, что в этом примере ключ API хранится как переменная среды React REACT_APP_GOOGLE_MAP_API.

useEffect(() => {
  if (!document.getElementById("googleMapScript")) {
    const googleMapScript = document.createElement('script')
    googleMapScript.id = "googleMapScript"
    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAP_API}&libraries=places`      
    window.document.body.appendChild(googleMapScript)
  }
},[])
Figure 3: React Way to add Google Maps API Script on Component Load