Карти Google: Як створити спеціальне інформаційне вікно?

Інформаційне вікно Google Maps для маркера картки за замовчуванням дуже кругле. Як створити нестандартне інформаційне вікно з квадратними кутами?

EDIT Після деякого полювання навколо, здається, це найкращий варіант:

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

Ви можете побачити індивідуальну версію цього InfoBubble, яку я використав на Dive Seven, веб-сайті для онлайн-реєстрації підводних занурень . Це виглядає приблизно так:

Є ще кілька прикладів тут . Однак вони точно не виглядають так добре, як приклад на екрані екрана.

Ви можете змінити все InfoWindow, використовуючи лише jquery ...

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

Тут елемент <p> діятиме як гачок у фактичне InfoWindow. Як тільки вже запущена версія, елемент стане активним та доступним за допомогою 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 або просто додати новий елемент.

Пограйте з елементами, щоб отримати те, що вам потрібно ...

Я знайшов 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 на свою сторінку

Створення інформаційного вікна досить просте з ванільним 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 з ідентифікатором для вмісту вмісту. Це дає гачок у системі, який ми можемо використовувати для отримання правильних елементів для маніпулювання простим зовнішнім таблицею стилів.

Є кілька додаткових фрагментів (які не є суворо необхідними), які керують такими речами, як подача гачка в діву із зображенням вікна з близьким інформаційним зображенням.

Заключна петля приховує всі шматки стрілки вказівника. Мені це було потрібно саме тому, що я хотів мати прозорість на інформаційному вікні, і стрілка заважала. Звичайно, за допомогою гачка зміна коду для заміни зображення стрілки на вибраний вами 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 робить це спеціально, але я ставлю на заклад, що вони використовують користувацькі накладки .

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

Ось чисте рішення 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 містять спливаючі вікна, стильовані елементом canvas, який передує спливаючому контейнеру div у коді. Тож у googlemaps 3.7 Ви можете вступити в процес візуалізації за допомогою події, що з'явилася у такий спосіб:

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

Я не можу взяти на це кредит, я відправив це від іншого користувача Codepen, щоб виправити залежність google Maps фактично завантажуватися

Зверніть увагу на дзвінок:

InfoWindow() // constructor