it-swarm.com.de

Google Maps: Wie erstelle ich ein benutzerdefiniertes InfoWindow?

Das standardmäßige Google Maps InfoWindow für eine Kartenmarkierung ist sehr rund. Wie erstelle ich ein benutzerdefiniertes InfoWindow mit eckigen Ecken?

99
SarahBeale

[~ # ~] edit [~ # ~] Nach einigem Hin und Her 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 auf Dive Seven, eine Website für Online-Tauchprotokollierung verwendet habe. Es sieht aus wie das:


Google Demo bereitstellen zeigt, wie ein benutzerdefiniertes Infofenster implementiert wird. Es erfordert eine Menge Code, scheint aber ziemlich einfach zu sein.


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

83
Drew Noakes

Sie können das gesamte InfoWindow ändern, indem Sie nur jquery verwenden ...

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

Hier fungiert das <p> -Element als Hook im eigentlichen InfoWindow. Sobald das domready ausgelöst wird, wird das Element mit Javascript/jquery wie $('#hook').parent().parent().parent().parent() aktiv und zugänglich.

Der folgende Code setzt nur einen 2-Pixel-Rand um das 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');
        }
    }
});

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

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

17
ATOzTOA

Ich fand InfoBox perfekt für fortgeschrittenes Styling.

Eine InfoBox verhält sich wie ein 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 dieselben Ereignisse aus wie ein 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

8
Maulik Bengali

Die Gestaltung des Infofensters ist mit Vanilla Javascript recht einfach. Ich habe einige Informationen aus diesem Thread verwendet, als ich das geschrieben habe. 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 (ohne Plugins, benutzerdefinierte Overlays oder großen Code), wobei ein div mit einer ID verwendet wird, um den Inhalt zu speichern. Dies gibt einen Haken im System, den wir verwenden können, um die richtigen Elemente für die Bearbeitung mit einem einfachen externen Stylesheet zu erhalten.

Es gibt ein paar zusätzliche Teile (die nicht unbedingt benötigt werden), die sich mit Dingen wie dem Einhängen eines Hakens in das Div mit dem Fenster zum Schließen des Info-Fensters befassen.

In der letzten Schleife werden alle Teile des Zeigerpfeils ausgeblendet. Ich brauchte das selbst, weil ich Transparenz über das Infofenster haben wollte und der Pfeil im Weg war. Natürlich sollte es mit dem Haken 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), sollte das ziemlich einfach sein.

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

5
Rafe

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 < Wie man mit perfektem Zoom mehrere Adressen auf Google Maps findet >, der mir dabei geholfen hat, dies zu erreichen. Sie können es für die Arbeit JS beziehen Fiddle Link und komplettes Beispiel.

4
Ashish Gupta

Sie können den folgenden Code verwenden, um das Standard-Fenster für Formatvorlagen 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
});
2
Teo Em

Ich bin mir nicht sicher, wie FWIX.com das konkret macht, aber ich wette, sie verwenden Custom Overlays .

2
Scott Mitchell

Sie können sogar Ihre eigene CSS-Klasse an den Popup-Container/Canvas anhängen oder wie Sie möchten. Current google maps 3.7 hat Popups, die durch Canvas-Elemente gestaltet sind, die dem Popup-Div-Container im Code vorangehen. Bei googlemaps 3.7 können Sie den Rendervorgang durch das domready-Ereignis von popup wie folgt starten:

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, folgen Sie diesen Anweisungen .

siehe die aktuelle InfoWindow-Referenz für Events und mehr ..

Ich fand das in einigen Fällen am saubersten.

1
palmic

Hier ist eine reine CSS-Lösung basierend auf dem aktuellen Infofenster-Beispiel auf 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;
}

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

1
Patch92

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

Ich kann das nicht gutschreiben. Ich habe es von einem anderen Codepen-Benutzer gegeben, um die Abhängigkeit von Google Maps zum tatsächlichen Laden zu korrigieren

Notieren Sie sich den Anruf an:

InfoWindow() // constructor
0
NomNomCameron