Я только что завершил трехнедельный период изучения React, создания приложений и проектов с использованием этой новой (для меня!) мощной и интуитивно понятной библиотеки JavaScript. В моем крупнейшем проекте мы с партнером создали веб-приложение для изучения пунктов назначения вокруг Сиэтла — мы заполнили нашу собственную базу данных пунктами назначения по всему городу, использовали семантический пользовательский интерфейс для построения с чистым стилем и использовали API Карт Google, чтобы показать каждый пункт назначения. на карте Сиэтла.

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

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

В моем проекте я начал с документации для Google Maps JavaScript API React Wrapper и этого руководства на платформе Google Maps. Обязательно установите пакет React Wrapper, запустив
npm install @googlemaps/react-wrapper
в каталоге вашего проекта. После установки пакета внутри компонента, который вы хотите использовать для отображения карты, импортируйте библиотеку с помощью import { Wrapper } from «@googlemaps/react-wrapper. /сильный>

Вы заметите в документации обоих источников, что можно импортировать и использовать Статус для обработки случаев ошибок и для временного отображения чего-либо до загрузки карты. Я не использовал Status в своем проекте, потому что он включает в себя использование типов и TypeScript, в которые у меня, честно говоря, еще не было времени вникать — нет необходимости обрабатывать ошибки с помощью Status, поэтому я пока пропустил его. Это была первая проблема с TypeScript, с которой я столкнулся, когда изучал варианты.

Цель компонента Wrapper — обернуть дочерние компоненты, которые будут использовать JavaScript Maps API, используя предоставленный нам ключ API. Внутри вашего компонента, где вы хотите видеть свою карту, поместите компонент Wrapper. Нам нужно создать новый компонент (который я назвал WrapperMap) и поместить этот компонент внутрь компонента Wrapper. Я поместил компонент Marker внутрь моего компонента WrapperMap — мы вернемся к этому чуть позже. Убедитесь, что вы передаете свой ключ API в качестве реквизита для компонента карты, это должна быть строка. Вот мой код для справки:

Теперь давайте создадим компонент Map. В документации платформы Карт говорится:

Базовый функциональный компонент для рендеринга карты, скорее всего, будет использовать useRef, useState и useEffect хуки React.

Мой код начинается с кода, представленного в документации, в котором используются все три упомянутых хука React. Этот раздел кода, по сути, говорит, что если ref является текущим, а карты еще нет, установите состояние карты в новое окно карты Google и обновите состояние всякий раз, когда обновляются переменные ref или map. Вы можете добавить стили внутри JSX при возврате компонента или обрабатывать стили с помощью CSS, или и то, и другое!

Я включил два параметра, перечисленных в документации Node Package, center и zoom, потому что без этих двух атрибутов наше окно отображало бы пустой компонент. Обратите внимание, что я передал эти два параметра из моего родительского компонента в качестве свойств — если вы хотите использовать данные из базы данных или внешнего источника, доступ к которому осуществляется через приложение, вы, вероятно, захотите использовать этот метод, но вы также можете определить center и zoom в качестве переменных внутри этого компонента карты. Center должен быть объектом с ключами lat и lng, например:
const center = { «lat»: 47.63129, « lng”: -122.31642 }
Масштаб может быть любым числом от 1 до 20 — чем больше значение, тем больше масштаб.

В моем веб-приложении мы создали отдельные страницы для отображения подробной информации по каждому пункту назначения, и я отобразил карту, сосредоточенную вокруг нашего пункта назначения, с маркером на самом пункте назначения. Каждый из наших пунктов назначения хранился в базе данных, и у каждого пункта назначения был ключ «местоположение» со значением, установленным в объект, содержащий необходимые ключи и значения «широта» и «длина». Имея все данные о пункте назначения, доступные в моем родительском компоненте, я мог установить «местоположение» пункта назначения как Центр и передать эту информацию компоненту карты в качестве реквизита. Независимо от того, следовали ли вы вместе со мной и передавали центральные данные в качестве опоры, или устанавливали центр и увеличивали масштаб компонента карты, вы должны увидеть визуализацию карты Google на странице!

Теперь о маркере. Документация платформы Google Maps предоставляет нам код JavaScript для включения в возврат нашего компонента карты в разделе «Добавить маркеры в качестве дочернего компонента». Включение этого кода в возврат позволяет нашим маркерам или любым другим дочерним компонентам получать доступ к отображаемой карте, передавая объект google.maps.Map в качестве реквизита. Я включил этот код в свой отчет и добавил компонент Marker в свой компонент WrapperMap, где его позиция установлена ​​​​в «местоположение», определенное в каждом пункте назначения. Мой компонент Marker по сути скопирован из документации, хотя мне нужно было внести одно изменение, чтобы добавить «окно» в строке 8.

Если вы определили Центр и Масштаб для карты и положение/центр для маркера, вы должны увидеть карту с маркером!

Есть и другие пакеты, которые позволяют разработчикам использовать Google Maps в своих проектах: не стесняйтесь проверить Google Map React или @react-google-maps/api. Я пропустил Google Map React, потому что в то время, когда я работал над этим проектом, Google Map React не работал в React 18. Во всех примерах, представленных в документации react-google-maps/api, использовался TypeScript, поэтому я продолжал искать другой вариант. Но это не значит, что они вам не пригодятся, если вы знакомы с TypeScript!

На канале Ли Холлидея есть несколько чрезвычайно подробных и полезных видеоуроков — я, возможно, мог бы использовать некоторые из его туториалов для этого проекта, но Ли также использует TypeScript в большинстве своих видео, и я был довольно упрям, чтобы придерживаться на JavaScript и React. Фактически, платформа Google Maps недавно опубликовала видео, в котором Ли подробно описывает свой процесс использования Maps JavaScript API с React Hooks с использованием нового пакета от Ubilabs. Я уверен, что это видео было бы чрезвычайно полезным для этого проекта, но, к сожалению для меня, оно вышло менее чем через 24 часа после того, как я нашел решение! Ну что ж.

Очень благодарен моему приятелю John Rusch за помощь в изучении пакетов Node и переводе документации в то, что я мог понять с ограниченным опытом. Спасибо, Джон!

Надеюсь, этот блог был вам полезен — если вы сделаете что-то классное, я буду рад на это посмотреть!