Кастомизация 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. Сервис позволяет вытащить как гео координаты, так и названия города, региона, страны. Единственный недостаток - информация на английском языке. В данной статье рассмотрим пару примеров использования сервиса. Обращение ...

Читать

Отключить на yandex карте изменение масштаба колесом прокрутки мыши

Декабрь 21, 2017 г.

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

Читать

Конструктор схемы проезда на Яндекс

Август 31, 2012 г.

Типовые задачи решаются все проще и проще. Когда то  я рассказывал как вставить карту со схемой проезда, используя api google.maps. С тех пор прошло довольно много времени. Теперь я расскажу как сделать примерно тоже самое только проще и с помощью конструктора ...

Читать

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

Январь 23, 2010 г.

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

Читать
 

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

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



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