Тестовое задание на Angular. Добавление google maps.
В данной статье подключим google maps и создадим компонент, который будет выводить карту.
Сначала установим зависимости, запустив команды:
yarn add @angular/google-maps
yarn add -D @types/google.maps
Создадим интерфейс для маркеров, которые будем выводить на карте, добавив его в maps/common
:
export interface MapMarkerConfig<T = any> extends google.maps.LatLngLiteral {
label?: string | google.maps.MarkerLabel | null;
data: T;
}
Создадим сервсис, который загрузит google map и позволит использовать GooleMap API
.
Как видно, сервис имеет один метод — load
, которы загружает googlemap api
и устанавливает флаг, который храни состояние загрузки.
ConfigService — сервис, который содержит внешние переменные, которые определяются на уровне деплоя. Для простоты работы вы можете использовать обычные environment’ы Angular. Но так как проект является публичным, github ругается на хранение ключей в репозитории, поэтому мы используем сервис, который берет локальные переменные из .env.
Так как сервис карты нужен только в компоненте отображения карты, сервис не ‘root’. Поэтому создадим модуль и подключим его там:
Теперь создадим компонент самой карты.
Сгененрируем новый компонент в maps/shared
:
ng g c google-maps
И подключим модуль в соответствующем модуле:
GoogleMapsServiceModule
— модуль который загружаетgoogle map API
GoogleMapsModule
— модуль, который выводит карту.
Из-за того, что в Angular/google-maps
уже есть компонент, который выводит карту, нашей задачей является написать wrapper компонент, который будет конфигурировать стандартный компонент нужными нам данными, такими как пины.
Создадим HTML разметку:
options
— параметры самой картыmarkers
— маркеры, которые должны быть выведеныmap-info-window
— окно, которое показывается при клике на маркер
Так как нам нужна адаптивная карта, которая должна подстраиваться под экран, добавим немного стилей:
Теперь реализуем саму логику работы с компонентом:
Из важного:
- Загрузка
GoogleMap API
при инициализации компонента:
ngOnInit(): void {
this.apiLoaded$ = this.googleMapsService.load();
}
- При клике по маркеру, показывается информационное окно:
onMarkerClick(config: MapMarkerConfig, marker: MapMarker): void {
this.markerClicked = config;
this.mapMarkerClicked.emit(config);
this.infoWindow?.open(marker);
}
- Если клик за пределами информационного окна, скрываем информационное окно:
onMapClick(): void {
if (this.markerClicked) {
this.closeInfoWindow();
}
}
- И при закрытии окна испускаем событие о закрытии окна
private closeInfoWindow(): void {
this.markerClicked = null;
this.infoWindow?.close();
this.mapInfoWindowClosed.emit();
}
Пример использования (подробнее будет рассмотрено в статьях дальше):
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Создание State для бронирования варианта.
Предыдущая статья — Создание lazy страницы.
Все исходники на github/fafnur/barinb.
Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur