Google Maps: Wie erstelle ich ein benutzerdefiniertes InfoWindow?

Das Standard-InfoWindow von Google Maps für eine Kartenmarkierung ist sehr rund. Wie erstelle ich ein benutzerdefiniertes InfoWindow mit quadratischen Ecken?

BEARBEITEN Nach einigem Herumjagen scheint dies die beste Option zu sein:

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

Sie können eine angepasste Version dieser InfoBubble sehen, die ich bei Dive Seven verwendet habe, einer Website für die Online-Protokollierung von Tauchgängen . Es sieht aus wie das:

Es gibt einige weitere Beispiele hier . Sie sehen jedoch definitiv nicht so gut aus wie das Beispiel in Ihrem Screenshot.

Sie können das gesamte InfoWindow nur mit jquery ändern ...

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

Hier fungiert das <p> -Element als Hook für das eigentliche InfoWindow. Sobald das Domready ausgelöst wird, wird das Element aktiv und über Javascript / JQuery zugänglich $('#hook').parent().parent().parent().parent().

Der folgende Code legt nur einen 2-Pixel-Rand um das InfoWindow fest.

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

Sie können beispielsweise eine neue CSS-Klasse festlegen oder einfach ein neues Element hinzufügen.

Spielen Sie mit den Elementen, um das zu bekommen, was Sie brauchen ...

Ich fand InfoBox perfekt für fortgeschrittenes Styling.

Eine InfoBox verhält sich wie eine google.maps.InfoWindow , unterstützt jedoch mehrere zusätzliche Eigenschaften für das erweiterte Styling. Eine InfoBox kann auch als Kartenbeschriftung verwendet werden. Eine InfoBox löst auch dieselben Ereignisse aus wie eine google.maps.InfoWindow .

Fügen Sie http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js in Ihre Seite ein

Das Styling des Infofensters ist mit Vanille-Javascript ziemlich einfach. Ich habe beim Schreiben einige Informationen aus diesem Thread verwendet. Ich habe auch die möglichen Probleme mit früheren Versionen von dh berücksichtigt (obwohl ich es nicht mit ihnen getestet habe).

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

Der Code erstellt das Infofenster wie gewohnt (keine Plugins, benutzerdefinierten Overlays oder großen Code erforderlich) und verwendet ein div mit einer ID, um den Inhalt zu speichern. Dies gibt einen Haken im System, mit dem wir die richtigen Elemente für die Bearbeitung mit einem einfachen externen Stylesheet erhalten können.

Es gibt ein paar zusätzliche Teile (die nicht unbedingt benötigt werden), die Dinge wie das Einhaken in das Div mit dem Bild zum Schließen des Infofensters behandeln.

Die letzte Schleife verbirgt alle Teile des Zeigerpfeils. Ich brauchte das selbst, da ich Transparenz über das Infofenster haben wollte und der Pfeil im Weg war. Mit dem Hook sollte es natürlich auch ziemlich einfach sein, den Code zu ändern, um das Pfeilbild durch ein PNG Ihrer Wahl zu ersetzen.

Wenn Sie es in jquery ändern möchten (keine Ahnung, warum Sie das tun würden), sollte das ziemlich einfach sein.

Ich bin normalerweise kein Javascript-Entwickler, daher sind Gedanken, Kommentare und Kritik willkommen :)

Der folgende Code kann Ihnen helfen.

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

Hier ist ein Artikel < So finden Sie mehrere Adressen auf Google Maps mit perfektem Zoom >, der mir dabei geholfen hat, dies zu erreichen. Sie können es für den funktionierenden JS Fiddle-Link und das vollständige Beispiel verwenden.

Ich bin nicht sicher, wie FWIX.com es speziell macht, aber ich würde wetten, dass sie benutzerdefinierte Overlays verwenden .

Sie können den folgenden Code verwenden, um die Standard-Stilinformationen zu entfernen. Nachdem Sie HTML-Code für Inforwindow verwenden können:

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

Hier ist eine reine CSS-Lösung, die auf dem aktuellen Infowindow-Beispiel bei Google basiert:

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

Dies ist eine schnelle Lösung, die sich gut für kleine Infofenster eignet. Vergessen Sie nicht, Ihre Stimme zu erhöhen, wenn es hilft: P.

Sie können sogar Ihre eigene CSS-Klasse an den Popup-Container / Canvas anhängen oder wie Sie möchten. Aktuelle Google Maps 3.7 enthält Popups, die nach Canvas-Elementen gestaltet sind und dem Popup-Div-Container im Code voranstellen. Bei googlemaps 3.7 können Sie mit dem Domready-Ereignis von Popup wie folgt in den Renderprozess einsteigen:

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 ist im IE8 nicht vorhanden. Wenn Sie also möchten, dass es funktioniert, befolgen Sie diese Anweisungen .

Überprüfen Sie die neueste InfoWindow-Referenz auf Ereignisse und mehr.

Ich fand das in einigen Fällen am saubersten.

Ich denke, die beste Antwort, die ich gefunden habe, ist hier: https://codepen.io/sentrathis96/pen/yJPZGx

Ich kann dies nicht gutschreiben. Ich habe dies von einem anderen Codepen-Benutzer gegabelt, um die Abhängigkeit von Google Maps zu beheben, die tatsächlich geladen werden soll

Notieren Sie sich den Anruf an:

InfoWindow() // constructor