Тестовое задание на 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.

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