Карты Google — это веселое и простое дополнение к любому проекту программирования для начинающих, и в этой статье вы узнаете, как реализовать базовую карту на локальной веб-странице. Для начала обязательно установите и импортируйте библиотеку «@google-react-maps/api». Из этой библиотеки мы будем использовать два конкретных элемента: GoogleMap (объект) и useJsApiLoader (функция).
Создайте новый компонент и создайте константу, которая будет содержать ваш ключ API Карт Google. Затем создайте еще одну константу, которая будет содержать географические координаты нашей карты; объект должен быть в форме {lat: XX, lng: XX}. Внутри нашего компонента мы собираемся создать еще одну переменную, которая будет отслеживать, когда карта Google была загружена в элемент javascript, и передавать наш ключ API для проверки, см. ниже:
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: REACT_APP_GOOGLE_MAPS_API_KEY,
})
если (! загружено) {
console.log("Карта не загружена")
возвращаться;
}
После этого мы собираемся создать условный оператор, который обеспечит загрузку нашей карты в наш загрузчик Javascript API. Если API не загружен, то мы хотим вернуть пустой компонент, потому что карта не готова к загрузке. Если наша карта готова к загрузке, мы должны вернуть HTML-элемент Google Map:
возвращаться (
‹GoogleMap center={местоположение} zoom={масштаб} mapContainerStyle={mapContainerStyle}›
‹/GoogleКарта›
)
После этого у вас должно быть все готово, чтобы начать импорт этого нового элемента на новую любую веб-страницу или в приложение, которое вы пожелаете! Переменная zoom всегда будет целым числом от 1 до 12, а mapContainerStyle должен иметь следующее значение: {height: «100%», width: «100%»}. Масштаб регулирует первоначальную перспективу пользователя при загрузке карты, а параметры высоты и ширины определяют, какой процент от родительского ‹div› будет занимать визуально компонент; присвоив обоим значение 100%, мы гарантируем, что карта заполнит фрейм нашего целевого HTML-элемента.
Чтобы еще больше расширить универсальность компонента, передайте элемент props в MapComponent, который будет представлять желаемые координаты данного экземпляра Google Map. Благодаря этому вы сможете динамически передавать географические местоположения и загружать их в карту Google, которая может отображать как общие маршруты общественного транспорта, так и спутниковое изображение координат.
