Styling von Google Maps InfoWindow

116

Ich habe versucht, mein Google Maps zu formatieren InfoWindow, aber die Dokumentation zu diesem Thema ist sehr begrenzt. Wie stylst du ein InfoWindow?

Sieger
quelle

Antworten:

120

Google hat dazu einen Code geschrieben. Hier einige Beispiele: Beispiel mit InfoBubble , gestalteten Markierungen und benutzerdefiniertem Infofenster (mit OverlayView).

Der Code in den obigen Links verwendet unterschiedliche Routen, um ähnliche Ergebnisse zu erzielen. Das Wesentliche dabei ist, dass es nicht einfach ist, InfoWindows direkt zu formatieren, und es möglicherweise einfacher ist, die zusätzliche InfoBubble-Klasse anstelle von InfoWindow zu verwenden oder GOverlay zu überschreiben. Eine andere Möglichkeit wäre, die Elemente des InfoWindow mit Javascript (oder jQuery) zu ändern, wie später von ATOzTOA vorgeschlagen.

Möglicherweise ist das einfachste dieser Beispiele die Verwendung von InfoBubble anstelle von InfoWindow. InfoBubble ist verfügbar, indem Sie diese Datei importieren (die Sie selbst hosten sollten):http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubbles Github-Projektseite .

InfoBubble ist im Vergleich zu InfoWindow sehr stilvoll:

 infoBubble = new InfoBubble({
      map: map,
      content: '<div class="mylabel">The label</div>',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: 'transparent',
      arrowStyle: 2
});

infoBubble.open();

Sie können es auch mit einer bestimmten Karte und Markierung aufrufen, um es zu öffnen:

infoBubble.open(map, marker);

Als weiteres Beispiel erweitert das Beispiel "Benutzerdefiniertes Infofenster" die GOverlay-Klasse aus der Google Maps-API und verwendet diese als Grundlage für die Erstellung eines flexibleren Infofensters. Zuerst wird die Klasse erstellt:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

Danach wird GOverlay überschrieben:

InfoBox.prototype = new google.maps.OverlayView();

Sie sollten dann die Methoden außer Kraft setzen Sie brauchen: createElement, draw, removeund panMap. Es wird ziemlich kompliziert, aber theoretisch zeichnen Sie jetzt selbst ein Div auf der Karte, anstatt ein normales Infofenster zu verwenden.

Herman Schaaf
quelle
@ShyamK Hier ist eine Frage zum Stylen von KML- Infofenstern , die Ihnen helfen könnte. Ich denke, viele der Beispiele in meiner Antwort sind möglicherweise nicht auf KML anwendbar (ich bin mir nicht sicher), können aber auch in diesem Fall problemlos angepasst werden.
Herman Schaaf
11
Es ist zu beachten, dass einer Ihrer Links hier Beispiele für das InfoBox-Objekt (eine andere Art von Infofenster) und nicht für das InfoWindow-Objekt (das ursprüngliche Google-Infofenster) sind. Gut zu wissen, ob Sie es googeln und vielleicht verwirrt sind, warum Sie neue InfoBox () und neues InfoWindow () finden können. InfoBox ist die neuere und lässt sich einfacher an IMO anpassen. Es gibt noch viel mehr, das Sie anpassen können. Ein weiteres Beispiel dafür ist auch in dieser SO-Antwort
Don Vaughn
1
Oh nein, der letzte auch nicht: Hier geht es auch um infoBox.
Matto
Schön, das ist es, wonach ich gesucht habe. Übrigens, wie füge ich eine Schaltfläche zum Schließen hinzu?
Yusuf1494
36

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 ...

ATOzTOA
quelle
4
Dies funktioniert für mich (mit einem Elternteil weniger) und für Acorss-Browser (Oper, ff, dh Safari, Chrome), funktioniert jedoch nicht unter IE9.
johntrepreneur
Requisiten für das Einfügen von zusätzlichem Code, nach dessen Verwendung ich gesucht habe. Danke
MetalPhoenix
Ich erhalte die Meldung "Popup ist nicht definiert", wenn ich es in das Dokument (bereit), in das Fenster (laden) einfüge oder wenn ich es nach dem Laden der Seite direkt in die Konsole einfüge. Vermisse ich eine externe js-Datei oder so?
user1380540
Dies ist keine gute Idee, da die Google Map-Rendering-Logik nicht unbefristet ist. Verwenden Sie stattdessen Popups: developer.google.com/maps/documentation/javascript/examples/…
Ali Sheikhpour
5
google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });

// CSS in Stylesheet einfügen

.gm-style-iw {
  background-color: rgb(237, 28, 36);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    color: rgb(255, 255, 255) !important;
    font-family: gothambook;
    text-align: center;
    top: 15px !important;
    width: 150px !important;
}
Vinod Kumar
quelle
Dieser Code hat ein Problem mit dem Schwanz in Chrome. Sie müssen 2x klicken, damit der Schwanz die richtige Position
anzeigt
3

Ich habe den folgenden Code verwendet, um externes CSS anzuwenden:

boxText = document.createElement("html");
boxText.innerHTML = "<head><link rel='stylesheet' href='style.css'/></head><body>[some html]<body>";

infowindow.setContent(boxText);
infowindow.open(map, marker);
Leochab
quelle
1
Ich konnte das CSS direkt mit .gm-style> div> div: n-tes Kind (3)> div: n-tes Kind (4)> div> div> div: n-tes Kind (2) {
Charlie- Greenman
1

Verwenden Sie das InfoBox- Plugin aus der Google Maps Utility Library. Dies erleichtert das Stylen / Verwalten von Karten-Popups erheblich.

Beachten Sie, dass Sie sicherstellen müssen, dass es nach der Google Maps-API geladen wird:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
<script src="/js/infobox_packed.js" async defer></script>
Yarin
quelle
1

Ich habe Design Google Map Infowindow mit Bild & einigen Inhalten wie unten.

Geben Sie hier die Bildbeschreibung ein

map_script (Nur als Infowindow-HTML-Referenz)

for (i = 0; i < locations.length; i++) { 
    var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: "<?php echo plugins_url( 'assets/img/map-pin.png', ELEMENTOR_ES__FILE__ ); ?>"
    });

    var property_img = locations[i][6],
    title = locations[i][0],
    price = locations[i][3],
    bedrooms = locations[i][4],
    type = locations[i][5],
    listed_on = locations[i][7],
    prop_url = locations[i][8];

    content = "<div class='map_info_wrapper'><a href="+prop_url+"><div class='img_wrapper'><img src="+property_img+"></div>"+
    "<div class='property_content_wrap'>"+
    "<div class='property_title'>"+
    "<span>"+title+"</span>"+
    "</div>"+

    "<div class='property_price'>"+
    "<span>"+price+"</span>"+
    "</div>"+

    "<div class='property_bed_type'>"+
    "<span>"+bedrooms+"</span>"+
    "<ul><li>"+type+"</li></ul>"+
    "</div>"+

    "<div class='property_listed_date'>"+
    "<span>Listed on "+listed_on+"</span>"+
    "</div>"+
    "</div></a></div>";

    google.maps.event.addListener(marker, 'click', (function(marker, content, i) {
        return function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }
    })(marker, content, i));
}

Das Wichtigste ist CSS

 #propertymap .gm-style-iw{
    box-shadow:none;
    color:#515151;
    font-family: "Georgia", "Open Sans", Sans-serif;
    text-align: center;
    width: 100% !important;
    border-radius: 0;
    left: 0 !important;
    top: 20px !important;
}

 #propertymap .gm-style > div > div > div > div > div > div > div {
    background: none!important;
}

.gm-style > div > div > div > div > div > div > div:nth-child(2) {
     box-shadow: none!important;
}
 #propertymap .gm-style-iw > div > div{
    background: #FFF!important;
}

 #propertymap .gm-style-iw a{
    text-decoration: none;
}

 #propertymap .gm-style-iw > div{
    width: 245px !important
}

 #propertymap .gm-style-iw .img_wrapper {
    height: 150px;  
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin: 0px auto;
}

 #propertymap .gm-style-iw .img_wrapper > img {
    width: 100%;
    height:auto;
}

 #propertymap .gm-style-iw .property_content_wrap {
    padding: 0px 20px;
}

 #propertymap .gm-style-iw .property_title{
    min-height: auto;
}
Mayank Dudakiya
quelle
1
Danke! CSS funktionierte nicht, aber es war einfach, Entwickler-Tools zu verwenden und direkt zum Unterricht zu gehen, ohne dass die Sache im .gm-Stil erforderlich war.
user2060451
-1

Sie können auch eine CSS-Klasse verwenden.

$('#hook').parent().parent().parent().siblings().addClass("class_name");

Schönen Tag!

mariofertc
quelle