Кастомизация 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 коде гугл будет появляться окно, которые вы сможете полностью кастомизировать.

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

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

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

Май 4, 2017 г.

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

Читать

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

Июнь 2, 2016 г.

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

Читать

 

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

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



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