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

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

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

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

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

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

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

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

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

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

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

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

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

Кастомный OverlayView

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

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

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

// берем за базу прототип google.maps.OverlayView
INFWOverlay.prototype = new google.maps.OverlayView();

/**
 * Custom Infoview constructor
 */
function INFWOverlay(content, map, point, width) {
 // Инициализация
 this.width_ = width;
 this.point_ = point;
 this.content_ = content;
 this.map_ = map;

 // переменная для хранения DOM контейнера 
 this.div_ = null;

 // подключим overlay к карте
 this.setMap(map);
}

/**
 * Операции при добавлении overlay на карту
 */
INFWOverlay.prototype.onAdd = function() {
  var CIW = this;

  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  // здесь я задал нужный мне класс, для которого буду
  // затем создавать каскадные стили 
  div.classList.add('customInfoWindow');
  // добавим HTML контент
  div.innerHTML = CIW.content_;
  // займемся созданием кнопки Close (крестик в углу)
  var divClose = document.createElement('div');
  divClose.classList.add('close');
  divClose.addEventListener('click', function (e) {
    CIW.toggle();
  });
  // добавим крестик в окно
  div.appendChild(divClose);
  CIW.div_ = div;

  // добавим элемент в набор pane overlayimage нашей карты
  var panes = CIW.getPanes();
  panes.overlayImage.appendChild(CIW.div_);
};

/**
 * эта функция позволяет позиционировать окно на карте
 * во время прорисовки
 */
INFWOverlay.prototype.draw = function() {
  // получим доступ к т.н. проекции окна
  var overlayProjection = this.getProjection();

  // проекция позволяет нам вычислить позицию окна 
  // относительно документа, переводя гео координаты
  // в x,y канваса на экране
  var sw = overlayProjection.fromLatLngToDivPixel(this.point_);
  // т.к я решил показывать треугольник стрелки справа, то окно я
  // сдвину вправо и немного вверх от точки позиционирования
  // Треугольник стрелки имеет размеры в моём случае - 5x10 точек.
  var div = this.div_;
  div.style.left = (sw.x - this.width_ - 5) + 'px';
  div.style.top = (sw.y - 50) + 'px';
  div.style.width = (this.width_) + 'px';
  div.style.height = 'auto';
};

/**
 * Далее идут функции реализующие удаление, скрытие окна
 * они не требуют подробного описания
 * и не отличаются от примера в руководстве от Гугл.
 */
INFWOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
};

// Set the visibility to 'hidden' or 'visible'.
INFWOverlay.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

INFWOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

INFWOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility === 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
INFWOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: setMap(null) calls OverlayView.onRemove()
    this.setMap(null);
  } else {
   this.setMap(this.map_);
  }
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

// берем за базу прототип google.maps.OverlayView

INFWOverlay.prototype = new google.maps.OverlayView();

/**

* Custom Infoview constructor

function INFWOverlay(content, map, point, width) {

// Инициализация

this.width_ = width;

this.point_ = point;

this.content_ = content;

this.map_ = map;

// переменная для хранения DOM контейнера

this.div_ = null;

// подключим overlay к карте

this.setMap(map);

}

/**

* Операции при добавлении overlay на карту

INFWOverlay.prototype.onAdd = function() {

var CIW = this;

var div = document.createElement('div');

div.style.border = 'none';

div.style.borderWidth = '0px';

div.style.position = 'absolute';

// здесь я задал нужный мне класс, для которого буду

// затем создавать каскадные стили

div.classList.add('customInfoWindow');

// добавим HTML контент

div.innerHTML = CIW.content_;

// займемся созданием кнопки Close (крестик в углу)

var divClose = document.createElement('div');

divClose.classList.add('close');

divClose.addEventListener('click', function (e) {

CIW.toggle();

});

// добавим крестик в окно

div.appendChild(divClose);

CIW.div_ = div;

// добавим элемент в набор pane overlayimage нашей карты

var panes = CIW.getPanes();

panes.overlayImage.appendChild(CIW.div_);

};

/**

* эта функция позволяет позиционировать окно на карте

* во время прорисовки

INFWOverlay.prototype.draw = function() {

// получим доступ к т.н. проекции окна

var overlayProjection = this.getProjection();

// проекция позволяет нам вычислить позицию окна

// относительно документа, переводя гео координаты

// в x,y канваса на экране

var sw = overlayProjection.fromLatLngToDivPixel(this.point_);

// т.к я решил показывать треугольник стрелки справа, то окно я

// сдвину вправо и немного вверх от точки позиционирования

// Треугольник стрелки имеет размеры в моём случае - 5x10 точек.

var div = this.div_;

div.style.left = (sw.x - this.width_ - 5) + 'px';

div.style.top = (sw.y - 50) + 'px';

div.style.width = (this.width_) + 'px';

div.style.height = 'auto';

};

/**

* Далее идут функции реализующие удаление, скрытие окна

* они не требуют подробного описания

* и не отличаются от примера в руководстве от Гугл.

INFWOverlay.prototype.onRemove = function() {

this.div_.parentNode.removeChild(this.div_);

};

// Set the visibility to 'hidden' or 'visible'.

INFWOverlay.prototype.hide = function() {

if (this.div_) {

// The visibility property must be a string enclosed in quotes.

this.div_.style.visibility = 'hidden';

}

};

INFWOverlay.prototype.show = function() {

if (this.div_) {

this.div_.style.visibility = 'visible';

}

};

INFWOverlay.prototype.toggle = function() {

if (this.div_) {

if (this.div_.style.visibility === 'hidden') {

this.show();

} else {

this.hide();

}

};

// Detach the map from the DOM via toggleDOM().

// Note that if we later reattach the map, it will be visible again,

// because the containing <div> is recreated in the overlay's onAdd() method.

INFWOverlay.prototype.toggleDOM = function() {

if (this.getMap()) {

// Note: setMap(null) calls OverlayView.onRemove()

this.setMap(null);

} else {

this.setMap(this.map_);

}

};

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

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

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

<div style="width: 500px; height: 450px" id="myMap"></div>

1	<div style="width: 500px; height: 450px" id="myMap"></div>

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

<script>
// какие то координаты
var myPos = new google.maps.LatLng(55.45, 45.77);

// настройки карты
var myOptions = {
  zoom: 7, 
  center: myPos,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

// объект карты
var map = new google.maps.Map(document.getElementById('#myMap'), myOptions);

// кастомный Overlay
var overlay = new INFWOverlay("<span>Тут ваш HTML код для создания описания</span>",
  map, // карта
  myPos, // точка на карте
  200 // ширина окна);

// покажем окно
overlay.show();

</script>

// какие то координаты

var myPos = new google.maps.LatLng(55.45, 45.77);

// настройки карты

var myOptions = {

zoom: 7,

center: myPos,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

// объект карты

var map = new google.maps.Map(document.getElementById('#myMap'), myOptions);

// кастомный Overlay

var overlay = new INFWOverlay("<span>Тут ваш HTML код для создания описания</span>",

map, // карта

myPos, // точка на карте

200 // ширина окна);

// покажем окно

overlay.show();

</script>

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

// Override google MAP API CSS
.customInfoWindow {
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 0 15px 0 rgba(50,50,50,0.5);
}

// треугольная стрелка
// для генерации обычно использую онлайн конструктор
.customInfoWindow:after {
  position: absolute;
  right: -5px;
  top: 45px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #000;
}
// крестик
.customInfoWindow .close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 10px;
  height: 10px;
  float: right;
  // вставьте вашу картинку для крестика :)
  background: url(close-google-popup.png) center center no-repeat;
  opacity: 1;
}

// Override google MAP API CSS

.customInfoWindow {

background-color: #fff;

padding: 15px;

box-sizing: border-box;

box-shadow: 0 0 15px 0 rgba(50,50,50,0.5);

}

// треугольная стрелка

// для генерации обычно использую онлайн конструктор

.customInfoWindow:after {

position: absolute;

right: -5px;

top: 45px;

content: "";

width: 0;

height: 0;

border-style: solid;

border-width: 5px 0 5px 5px;

border-color: transparent transparent transparent #000;

}

// крестик

.customInfoWindow .close {

position: absolute;

top: 15px;

right: 15px;

width: 10px;

height: 10px;

float: right;

// вставьте вашу картинку для крестика :)

background: url(close-google-popup.png) center center no-repeat;

opacity: 1;

}

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

Картежник

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

Данная запись опубликована в 25.01.2018 18:18 и размещена в рубрике javaScript. Вы можете перейти в конец страницы и оставить ваш комментарий.

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

Ошибка Yandex карт net::ERR_ABORTED 429 (Too Many Requests)

Октябрь 9, 2019 г.

Ошибка возникает при использовании сервисов Яндекс карт, вроде геокодинга. Яндекс стал требовать обязательно использовать дополнительный параметр, передаваемый при загрузке скрипта - apikey. Данный параметр позволяет управлять квотами запросов ...

Читать

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

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

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

Читать

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

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

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: