Кастомизация 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. Вы можете перейти в конец страницы и оставить ваш комментарий.

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

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

Июнь 2, 2016 г.

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

Читать

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

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

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

Читать

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

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

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