Создание кастомного элемента управления на гугл карте

Штатные элементы управления карт google практически невозможно кастомизировать, потому приходится создавать кастомные элементы, которым можно придать нужный внешний вид.

Проблема с кастомизацией штатных элементов заключается в том, что все оформление гугл map API формирует за счет инлайновых стилей. Зацепиться при написании CSS просто не за что, нет ни имен классов, ни характерных ID.

Но Google Map API разрешает создавать кастомные элементы управления и даже предлагает небольшой гайд на эту тему (см. доки).

Давайте заменим кнопки zoom control на собственные, чтобы разобраться в процессе что к чему. А процесс будет состоять из трех частей:

  • Инициализация карты без штатного zoom control элемента
  • Создание DOM объекта для кастомного элемента
  • Подключение нашего элемента к карте

+ бонус написание стилей

Инициализация google карты без zoom control

Эта секция самая простая, у нас есть контейнер карты:

Не забудьте подключить google map api с вашим ключом. На div#map мы цепляем карту:

Создание DOM объекта для кастомного ZOOM Control

Я воспользовался заготовкой от Google и оформил создание управляющего элемента в виде функции. Здесь нужно создать общую оболочку (wrapper контейнер) и две кнопочки «+» и «-» внутри него.

Функция позволит нам создавать кастомный контрол для любой карты на нашем сайте. На вход функции мы будем отправлять контейнер, в котором нужно создать элемент управления и объект карты.

Для кастомизации внешнего вида мы добавили кнопкам имена классов (фактически только ради этого все и делалось).

Подключение кастомного элемента управления к карте

Карта готова, функция для генерации элемента есть. Осталось подключить его на карту. В общем, не обязательно подключать его на карту, можно просто вставить куда то в верстку вашего документа, но я буду подключать к карте.

Я хочу разместить элемент в правом нижнем углу карты. У гугла есть две константы со словами RIGHT и BOTTOM, но важен их порядок. В моём случае нужно RIGHT_BOTTOM, а не BOTTOM_RIGHT. :)

На картинке вы можете поглядеть все возможные варианты. Итак, добавляем кастомный контрол на карту:

Дальше — бонус со стилями и демка того, что получилось.

Стили

Эта секция уже не так важна, но для полноты примера я покажу вариант стилей оформления. Я подключил Awesome Font, чтобы взять от туда пару иконок для + и -. Кнопочки меньше стандартных и имеют «скругление» по границе и легкую тень у контейнера.

В формате LESS стили выглядят так:

Рабочий пример:

Написать комментарий

Мало букафф? Читайте есчо !

Используем API Яндекс карт для геокодирования

Май 1, 2017 г.

Функция geocode из API карт Яндекс работает в обе стороны. Получив строку адреса - сервис будет искать известные адреса и сообщит вам гео-коордитаны среди ...

Читать

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ...

Читать

 

Комментарии к «Создание кастомного элемента управления на гугл карте»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: