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

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

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

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

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

Определить гео - координаты города

Июнь 2, 2016 г.

Найти координаты города, точки на карте проще простого. Откройте карту гугл и кликните в нужном месте карты. Появится маркер и подсказка с координатами. ...

Читать

Определение города по ip, российская база

Декабрь 23, 2010 г.

Все таки существует какое то общее информационное пространство идей. То, что носится в воздухе и завладевает умами. В канун нового года решение данной задачи понадобилось как минимум в трех проектах. В связи с чем, мною был найден проект, созданный ...

Читать

 

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

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



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