В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализована возможность добавления функционала Google Maps
Расположение компонента
Файлы компонента находятся в папке src/components/layout/map, здесь вы найдете JS-файлы компонента и настроек, файл HTML с примером кода, а также SCSS-файл для стилизации компонента.
Использование компонента
Для начала вы можете получить свой KEY для полноценного использования функционала Google Maps и добавить его в константу MAP_KEY в файле _settings.js в папке компонента. Или отложить этот шаг и работать с карты в режиме разработчика.
Для добавления карты в нужном месте HTML воспользуйтесь снипетом map или постройте структуру используя определенные дата-атрибуты.
Этот пример выведет карту с одним маркером:
<div data-fls-map class="map"><div data-fls-map-marker class="map__marker" data-fls-map-lat="50.449688" data-fls-map-lng="30.52348" data-fls-map-title="Заголовок 1"></div><div data-fls-map-body class="map__body" data-fls-map-lat="50.449688" data-fls-map-lng="30.52348"></div></div>Настройка компонента
- data-fls-map — прилагается к оболочке конструкции карты
- data-fls-map-marker — добавляется к элементу, являющемуся маркером на карте
- data-fls-map-body — добавляется к выводящему карту элементу
- data-fls-map-lat и data-fls-map-lng — устанавливают координаты центра карты и вывода маркера
- data-fls-map-title – выводит подсказку для маркера
- data-fls-map-icon – выводит собственное изображение маркера
- data-fls-map-marker-zoom – при наличии атрибута для маркера, делает зум на маркер при клике по нему
- data-fls-map-marker-popup – при наличии атрибута для маркера, открывает модальное окно (popup), указанное в значении атрибута, при клике по маркеру. Смотри компонент «Модальное окно»
Дополнительно можно указать свой стиль Google Maps в файле _settings.js в папке компонента.