Карты Google: как создать собственное окно InfoWindow?

Окно Google Maps InfoWindow по умолчанию для маркера карты очень круглое. Как создать собственное окно InfoWindow с квадратными углами?

РЕДАКТИРОВАТЬ После некоторой охоты это кажется лучшим вариантом:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

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

Есть еще несколько примеров здесь . Однако они определенно не выглядят так красиво, как пример на вашем скриншоте.

Вы можете изменить все InfoWindow, используя только jquery ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

Здесь элемент <p> будет действовать как перехватчик фактического InfoWindow. После срабатывания domready элемент станет активным и доступным с помощью javascript / jquery, например $('#hook').parent().parent().parent().parent().

Приведенный ниже код просто устанавливает 2-пиксельную границу вокруг InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

Вы можете сделать что угодно, например, установить новый класс CSS или просто добавить новый элемент.

Поиграйте с элементами, чтобы получить то, что вам нужно ...

Я нашел InfoBox идеально подходящим для продвинутого стиля.

InfoBox ведет себя как google.maps.InfoWindow , но поддерживает несколько дополнительных свойств для расширенного стиля. Информационное окно также можно использовать как подпись на карте. InfoBox также запускает те же события, что и google.maps.InfoWindow .

Включите http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js на свою страницу.

С помощью vanilla javascript стилизовать информационное окно довольно просто. Я использовал некоторую информацию из этой ветки, когда писал это. Также я учел возможные проблемы с более ранними версиями ie (хотя с ними не тестировал).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

Код создает информационное окно как обычно (нет необходимости в плагинах, настраиваемых наложениях или огромном коде), используя div с идентификатором для хранения содержимого. Это дает системе ловушку, которую мы можем использовать для получения нужных элементов, которыми можно манипулировать с помощью простой внешней таблицы стилей.

Есть пара дополнительных частей (которые не являются строго необходимыми), которые обрабатывают такие вещи, как добавление перехватчика в div с изображением окна с закрытой информацией в нем.

Последний цикл скрывает все части стрелки указателя. Мне это нужно было самому, так как я хотел, чтобы в информационном окне была прозрачность, а стрелка мешала. Конечно, с помощью хука изменение кода для замены изображения стрелки на png по вашему выбору также должно быть довольно простым.

Если вы хотите изменить его на jquery (не знаю, зачем вам это нужно), это должно быть довольно просто.

Обычно я не являюсь разработчиком javascript, поэтому любые мысли, комментарии, критика приветствуются :)

Приведенный ниже фрагмент кода может вам помочь.

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

Вот статья « Как найти несколько адресов на картах Google с идеальным масштабированием», которая помогла мне добиться этого. Вы можете обратиться к нему за рабочей ссылкой JS Fiddle и полным примером.

Я не уверен, как именно это делает FWIX.com, но держу пари, что они используют Custom Overlays .

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

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

Вот чистое решение CSS, основанное на текущем примере информационного окна в Google:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

Это быстрое решение, которое подойдет для небольших информационных окон. Не забудьте проголосовать, если это поможет: P

Вы даже можете добавить свой собственный класс css во всплывающий контейнер / холст или как хотите. В текущих картах Google 3.7 есть всплывающие окна, стилизованные под элемент холста, который добавляет в код всплывающий контейнер div. Итак, в googlemaps 3.7 вы можете войти в процесс рендеринга с помощью события domready всплывающего окна, например:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling отсутствует в IE8, поэтому, если вы хотите, чтобы он работал с ним, следуйте этому .

узнайте о событиях и многом другом в последней справке по InfoWindow .

В некоторых случаях я нашел это наиболее чистым.

Я думаю, что лучший ответ, который я придумал, здесь: https://codepen.io/sentrathis96/pen/yJPZGx

Я не могу поверить в это, я раздвоил это от другого пользователя кода, чтобы исправить зависимость карт Google от фактической загрузки

Запишите звонок:

InfoWindow() // constructor