Mapy Google: Jak stworzyć własne okno InfoWindow?

Domyślne okno InfoWindow Map Google dla znacznika mapy jest bardzo okrągłe. Jak utworzyć niestandardowe okno InfoWindow z kwadratowymi narożnikami?

EDYCJA Po krótkich poszukiwaniach wydaje się, że jest to najlepsza opcja:

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

Możesz zobaczyć dostosowaną wersję tego InfoBubble, z której korzystałem w Dive Seven, witrynie internetowej do rejestrowania nurkowań online . To wygląda tak:

Istnieje kilka przykładów tutaj . Jednak na pewno nie wyglądają tak ładnie, jak przykład na twoim zrzucie ekranu.

Możesz zmodyfikować całe okno InfoWindow, używając samego jquery ...

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

Tutaj element <p> będzie działał jako punkt zaczepienia do właściwego okna InfoWindow. Gdy domready odpali, element stanie się aktywny i dostępny za pomocą javascript / jquery, na przykład $('#hook').parent().parent().parent().parent().

Poniższy kod ustawia tylko 2-pikselowe obramowanie wokół okna 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');
        }
    }
});

Możesz zrobić wszystko, na przykład ustawić nową klasę CSS lub po prostu dodać nowy element.

Baw się elementami, aby uzyskać to, czego potrzebujesz ...

InfoBox uważam za idealny do zaawansowanej stylizacji.

InfoBox zachowuje się jak google.maps.InfoWindow , ale obsługuje kilka dodatkowych właściwości do zaawansowanego stylizacji. InfoBox może również służyć jako etykieta mapy. InfoBox uruchamia również te same zdarzenia, co google.maps.InfoWindow .

Uwzględnij http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js na swojej stronie

Stylizacja okna infowindow jest dość prosta dzięki javascriptowi waniliowemu. Pisząc to, wykorzystałem część informacji z tego wątku. Uwzględniłem też ewentualne problemy z wcześniejszymi wersjami tj. (Chociaż nie testowałem tego z nimi).

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

Kod tworzy okno informacyjne jak zwykle (nie ma potrzeby stosowania wtyczek, niestandardowych nakładek ani ogromnego kodu), używając elementu div z identyfikatorem do przechowywania zawartości. Daje to punkt zaczepienia w systemie, którego możemy użyć do uzyskania odpowiednich elementów do manipulacji za pomocą prostego zewnętrznego arkusza stylów.

Jest kilka dodatkowych elementów (które nie są bezwzględnie potrzebne), które obsługują takie rzeczy, jak umieszczanie haka w div z obrazem zamykającego okna informacyjnego.

Ostatnia pętla ukrywa wszystkie części strzałki wskaźnika. Sam tego potrzebowałem, ponieważ chciałem mieć przejrzystość w oknie informacyjnym, a strzała przeszkadzała. Oczywiście za pomocą haka zmiana kodu w celu zastąpienia obrazu strzałki wybranym plikiem png również powinna być dość prosta.

Jeśli chcesz zmienić to na jquery (nie mam pojęcia, dlaczego to zrobiłeś), powinno to być dość proste.

Zwykle nie jestem programistą javascript, więc wszelkie przemyślenia, komentarze, krytyka mile widziane :)

Poniższy fragment kodu może ci w tym pomóc.

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

Oto artykuł < Jak zlokalizować wiele adresów na mapach Google z doskonałym powiększeniem >, który pomógł mi to osiągnąć. Możesz polecić działający link JS Fiddle i pełny przykład.

Nie jestem pewien, jak FWIX.com to robi konkretnie, ale założę się, że używają niestandardowych nakładek .

Możesz użyć poniższego kodu, aby usunąć domyślne okno inforwindow stylu. Po użyciu kodu HTML do 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
});

Oto czyste rozwiązanie CSS oparte na aktualnym przykładzie okienkowym w 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;
}

To szybkie rozwiązanie, które sprawdzi się w przypadku małych okienek informacyjnych. Nie zapomnij głosować wyżej, jeśli to pomaga: P

Możesz nawet dołączyć własną klasę css do wyskakującego kontenera / kanwy lub w dowolny sposób. Obecne mapy Google w wersji 3.7 mają wyskakujące okienka w stylu elementu canvas, który poprzedza w kodzie kontener typu pop-up. Tak więc w googlemaps 3.7 możesz przejść do procesu renderowania przez zdarzenie domready w wyskakującym okienku w następujący sposób:

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 nie występuje w IE8 - więc jeśli chcesz, aby to działało, postępuj zgodnie z tym .

sprawdź najnowszą referencję InfoWindow dotyczącą wydarzeń i nie tylko.

W niektórych przypadkach jest to najbardziej czyste.

Myślę, że najlepszą odpowiedzią, jaką wymyśliłem, jest tutaj: https://codepen.io/sentrathis96/pen/yJPZGx

Nie mogę wziąć za to kredytu, rozwidliłem to od innego użytkownika codepen, aby naprawić zależność map Google, aby faktycznie załadować

Zanotuj wezwanie do:

InfoWindow() // constructor