Карты Google: как создать пользовательский InfoWindow?

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

ОТВЕТЫ

Ответ 1

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

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

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

us1bl.png

Google предоставить демонстрационную версию, в которой показано, как реализовать пользовательское информационное окно. Это требует достаточного количества кода, но, похоже, довольно просто.

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

Ответ 2

Вы можете изменить весь 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 или просто добавить новый элемент.

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

Ответ 3

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

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

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

Затем используйте это exmaple: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html

Ответ 4

Укладка инфоиндуста довольно проста с помощью ванильного 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, поэтому любые мысли, комментарии, критические замечания приветствуются:)

Ответ 5

Ниже код может помочь вам.

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 и полный пример.

Ответ 7

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

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
});

Ответ 8

Вы даже можете добавить свой собственный класс css во всплывающий контейнер/холст или как вы хотите. В текущих картах google 3.7 есть всплывающие окна, созданные стилем canvas, который добавляет контейнер popup 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 для событий и т.д.

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

Ответ 9

Вот чистое решение CSS, основанное на текущем примере infowindow в 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

Ответ 10

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

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

Обратите внимание на вызов:

InfoWindow() // constructor