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

Question

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

Answer 1

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

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

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

---

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

---

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

Answer 2

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

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

Здесь элемент

будет действовать как хук в реальном информационном окне. Как только сработает domready, элемент станет активным и доступным с помощью javascript / jquery, например $('#hook').parent().parent().parent().parent().

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

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

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

Answer 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 на вашу страницу

Answer 4

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

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, поэтому любые мысли, комментарии, критика приветствуются:)

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

Вот статья <<a href="http://www.coolcoder.in/2014/03/how-to-locate-multiple-addresses-on.html" rel="nofollow"> Как найти несколько адресов на картах Google с идеальным увеличением >, которая помогла мне добиться этого. Вы можете сослаться на него для работы ссылки JS Fiddle и завершить пример.

Answer 6

Вы можете использовать код ниже, чтобы удалить стиль информационного окна по умолчанию.После вы можете использовать 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
});

Answer 7

Я не уверен, как FWIX.com делает это конкретно, но я бы поспорил, что они используют Пользовательские оверлеи .

Answer 8

Вот чистое решение 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

Answer 9

Вы даже можете добавить свой собственный класс 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 на события и многое другое ..

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

Answer 10

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

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

Запишите вызов:

InfoWindow() // constructor