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

Штатные элементы управления карт 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 стили выглядят так:

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

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

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

Инициализация карты google после изменения размеров контейнера карты

Февраль 2, 2018 г.

Столкнулся с данной проблемой в своей работе. Опишу более подробно. Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...

Читать

Определить город по IP адресу

Май 4, 2017 г.

Писал ранее об API ipinfo.io. Сервис позволяет вытащить как гео координаты, так и названия города, региона, страны. Единственный недостаток - информация на английском языке. В данной статье рассмотрим пару примеров использования сервиса. Обращение ...

Читать

 

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

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



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