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

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

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

Вот что мы имеем по-дефолту от Гугл.

На следующем слайде выделен прямоугольник, стили которого мы контролируем.

Крестик для закрытия окна хоть визуально и расположен внутри области, на самом деле не является частью контента выделенного контейнера.

Пользуясь одними только стилями, рамку основного окна можно перекрыть с помощью отрицательных значений margin. Остаётся проблема с треугольной стрелкой, которую кастомизировать какими то красивыми способами уже не получится.

Потому вместо InfoWindow попробуем запрограммировать собственное кастомное наложение.

Если хотите разобраться во всем самостоятельно, то начните с этого раздела помощи Google.

Собственное наложение для карты Гугл.

Нам не хватает класса в контейнере, который изображает InfoWindow. Добавив его, мы сможем применить нужные стили.

И давайте также покажем треугольничек стрелки окна, например, не внизу, а справа от окна.

Меня устраивает белый цвет заднего фона, но поменяв стили, я могу задать и другой цвет для всего контейнера:

Кастомный OverlayView

Я взял за начальный вариант, тот код который предлагает Гугл в своём туториале (см. ссылку выше). Мне нужно было передать следующие данные в мой Overlay:

  1. content — HTML код для содержимого окна
  2. map — ссылка на объект карты google.maps.Map
  3. point — координаты, к которым привязан Overlay — google.maps.LatLng
  4. width — ширина окна в пикселях.

Код кастомного InfoWindow

Использование кастомного InfoWindow

Сейчас мы воспользуемся всей этой писаниной сверху. Нам понадобится какая то точка на карте и объект карты.

Я предполагаю, что в HTML присутствует такой контейнер для показа карты:

Тогда в коде инициализации карты, я напишу что то вроде:

Это, конечно, не всё. Нужен ещё код для CSS, который наводит красоту.

В результате всех этих манипуляций в HTML коде гугл будет появляться окно, которые вы сможете полностью кастомизировать.

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

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

Знакомимся с картами Гугл (google maps)

Январь 23, 2010 г.

Сегодня google предлагает такое количество api и инструментов для разработчиков, что уже наверное сами затрудняются придумать что то новое. А моё знакомство ...

Читать

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

Ноябрь 14, 2018 г.

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

Читать

 

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

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



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