Создание кастомного InfoWindow в Google Maps: углы

Быстрый ответ

Для начала займемся созданием своего InfoWindow. Неглубокое погружение: наследуем google.maps.OverlayView, определяем HTML-строку, добавляем CSS-стили и используем методы onAdd, draw, onRemove из цикла жизненного цикла для управления отображением на карте.

Вот пример кода:

function CustomInfoWindow(content, position) {
    this.setPosition(position);
    google.maps.OverlayView.call(this);
    this.content_ = content;
}

CustomInfoWindow.prototype = Object.create(google.maps.OverlayView.prototype);

CustomInfoWindow.prototype.onAdd = function() {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.innerHTML = this.content_;
    this.div_ = div;

    this.getPanes().floatPane.appendChild(div);
};

CustomInfoWindow.prototype.draw = function() {
    var projection = this.getProjection();
    var pixelPosition = projection.fromLatLngToDivPixel(this.getPosition());

    this.div_.style.left = `${pixelPosition.x}px`;
    this.div_.style.top = `${pixelPosition.y}px`;
};

CustomInfoWindow.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
};

// Пример использования
var myInfoWindow = new CustomInfoWindow('<p style="color:red;">Мой собственный контент</p>', myLatLng);
myInfoWindow.setMap(map);

Профессиональный совет: Настройте метод setPosition(), чтобы InfoWindow следовал за маркером или оставался на строго определенном месте на карте.

Обзор сторонних библиотек

Попробуйте сторонние библиотеки, например js-info-bubble или InfoBox, чтобы украсить и обогатить функционал своих InfoWindows.

Освоение библиотеки js-info-bubble

js-info-bubble предоставляет изощренные стилистические возможности, недоступные стандартным InfoWindow от Google Maps. Здесь вы найдете подробности и примеры использования в репозитории js-info-bubble.

Подробнее об этом расскажет наш спикер на видео

Исследование InfoBox

InfoBox обладает более гибкими стилистическими возможностями по сравнению с API Google Maps. Для его использования перейдите к репозиторию google-maps-utility-library-v3. Пример создания InfoBox:

var boxOptions = {
  content: '<div id="custom-content">Мое содержимое</div>',
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: { 
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "closebutton.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
};

var ib = new InfoBox(boxOptions);
ib.open(map, marker);

Точность стилизации

Используйте мощь CSS для создания уникальных InfoWindows на картах Google.

Создание четких углов

Применяйте CSS, чтобы придать вашему InfoWindow четкие прямоугольные углы:

#custom-content {
    border-radius: 0;
    border: 1px solid #ccc;
    /* Место для проявления вашего творчества */
}

Кастомизация кнопки закрытия

Стильную и выразительную кнопку закрытия можно создать с помощью CSS:

.infoBoxClose {
    background: url('custom-close.png');
    width: 16px;
    height: 16px;
}

Управление видимостью стрелки

Возможно, вам не понадобится стрелка в InfoWindow, уберите ее, задав смещение:

infoWindowOptions.pixelOffset = new google.maps.Size(0, -25);

Совместимость и взаимодействие

Обеспечивайте безукоризненную работу вашего InfoWindow в различных браузерах. Используйте jQuery или чистый JavaScript для усовершенствования взаимодействия с пользователем:

google.maps.event.addListener(infoWindow, 'domready', function() {
    // Здесь начинается волшебство!
});

Время практики

Изучите примеры пользовательских InfoWindows сделанных с помощью InfoBubble и экспериментируйте на JS Fiddle, чтобы ваше InfoWindow стало узнаваемым.

Визуализация

Ваша цель — придать карте индивидуальность с помощью собственных InfoWindows. Вы — художник, который с помощью CSS-стилей (палитры), HTML-структуры (скелета) и уникального содержимого превращает карту в произведение искусства.

Принципы качественного кода

На пути создания собственных InfoWindows следите за качеством кода и готовностью к будущим обновлениям.

Чистый код

Поддерживайте упорядоченность в коде, отделяя JavaScript, CSS и HTML для удобства обслуживания.

Будущие обновления

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

Полезные материалы

1. Руководство JavaScript API V3 для Google Maps: официальное руководство по InfoWindow.
2. Информационные окна | JavaScript API для карт: инструкции по настройке пользовательских InfoWindows.
3. GitHub – js-info-bubble: библиотека для создания настраиваемых InfoWindows.
4. Информационное окно с maxWidth: пример использования InfoWindows.
5. Обработка событий | JavaScript API для карт: взаимодействие с Google Maps.
6. Пользовательские всплывающие окна | JavaScript API для карт: мастер-класс по созданию InfoWindow.