Интеграция Google Maps в ваше приложение React

При создании приложения, позволяющего пользователям находить центры переработки, которые будут принимать любой конкретный материал, от которого они пытаются избавиться, мне пришло в голову, что было бы НАМНОГО полезнее, если бы пользователь мог видеть, где центры переработки находятся на карте. ….. войдите в Google Maps! Но как вообще можно интегрировать карту в приложение React?

Прежде всего, вам нужно запросить ключ API у Google.

Документация Google очень подробная, включая инструкции по получению ключа API и простые учебные пособия, которые проведут вас через процесс реализации карты в простом проекте javascript.

Затем вам нужно установить пакет google-maps-react, чтобы ваш проект мог генерировать карту на вашей веб-странице через

npm install --s google-maps-react

Вы можете ознакомиться с официальной документацией по пакету google-maps-react здесь.

Теперь самое интересное — заставить все это отображаться на самом деле. Поскольку я специально использую карту для отображения местоположения центров переработки, возвращенных из пользовательского поиска, я создал файл-контейнер с именем RecycleCentersMapContainer.js. В этом контейнере вы будете указывать размер своей карты, использовать API Google-Maps-Javascript и передавать реквизиты, которые вы хотите отображать на карте, в объект карты, как показано ниже:

import React from "react";
import Map from "../components/maps/RecycleCentersMap";
const KEY = process.env.REACT_APP_GOOGLE_API_KEY;
export default class RecycleCenterssMapContainer extends React.Component {
  render() {
     return (
        <div className="map-container">
        <Map
           recycleCenters={this.props.recycleCenters}
           googleMapURL={`https://maps.googleapis.com/maps/api/js?   key=${KEY}&v=3.exp&libraries=geometry,drawing,places`}
           loadingElement={<div style={{ height: `100%` }} />}
           containerElement={<div style={{ height: `600px`, width: `100%` }} />}
           mapElement={<div style={{ height: `100%` }} />}
        />
       </div>
     );
  }
}

Я слышал ужасные истории о том, как злоумышленники-боты украли ключи API Google из общедоступных репозиториев Github, а невинные разработчики внезапно получили буквально тысячи долларов, списанных с обратного счета, связанного с их аккаунтом Google. Так что ни при каких обстоятельствах никогда не помещайте свой ключ в форму, где кто-то может получить к нему доступ через ваши общедоступные репозитории!!! Мой здесь скрыт в файле .env, который затем указывается в моем файле gitignore и доступен с помощью пакета dotenv.

Но откуда взялся компонент Map? RecycleCentersMapContainer импортирует карту из компонента RecycleCentersMap.

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";
const Map = withScriptjs(withGoogleMap((props) =>{
const recycleCenters = props.recycleCenters
   return (
       <GoogleMap zoom={4.5} center={ { lat:  39.6693, lng: -98.3476 } } />
       {recycleCenters.map(center => (
            <Marker
                 key={center.id}
                 position={{
                     lat: center.latitude,
                     lng: center.longitude
                 }}
            />
        ))};
        </GoogleMap>
}))
export default Map;

Внутри открывающего тега GoogleMap вы должны установить начальный масштаб и сообщить карте, где вы хотите, чтобы она была центрирована через широту и долготу. Масштаб работает таким образом, что чем ближе вы приближаетесь к 1, тем дальше вы приближаетесь. Чтобы показать всю страну, я выбрал довольно низкий зум, 4,5. Затем, чтобы центрировать карту, чтобы США отображались должным образом, я выбрал в качестве центра небольшой город под названием Иония, штат Канзас.

Как вы можете видеть в приведенном выше коде, я использую функцию «карта» JS для сопоставления данных центра переработки, которые ранее были извлечены из моего внешнего API и переданы в качестве реквизита в мой компонент карты, чтобы создать маркеры, которые отображаются на Google Map. Вы можете передавать любую информацию, которую хотите, из внешнего или внутреннего API или даже закодировать непосредственно во внешнем интерфейсе вашего приложения. Пожалуйста, не запутайтесь в многократном использовании слова «карта»!

Круто, теперь у меня есть рабочая карта с маркерами для каждого из центров утилизации, найденных в моем поиске! Было бы здорово, если бы я мог нажимать на маркеры, чтобы получить больше информации о каждом отдельном центре? Узнайте, как это сделать, в моем следующем блоге Clickable markers in a react-google-maps component.