it-swarm.com.de

Benutzerdefinierter Stil für ein Google Maps-Infofenster (Hintergrund)

Ich baue eine Karte mit Google Maps und habe ein Problem. Ich versuche, das Infofenster zu gestalten, das geöffnet wird, wenn ein Benutzer auf den Pin klickt. Mein Problem ist, dass es tatsächlich funktioniert, aber es wird mit einem seltsamen Effekt auf einem väterlichen Div des Fensters selbst gerendert (wenn jemand mehrmals auf mein Fenster klickt, wird im Fenster ein seltsamer weißer Rand angezeigt, der die Hintergrundfarbe des Fensters darstellt Vater meines Div mit einer Klasse von gm-style-iw).

Mein Code lautet wie folgt:

MEIN JAVASCRIPT:

function initMap() {

        var styledMapType=new google.maps.StyledMapType([{my custom style}]);

        var mycompany = {lat: 44.348534, lng: -79.669197};

        var map = new google.maps.Map(document.getElementById('map'), {
            center: mycompany,
            zoom: 14,
            scrollwheel: false,
            mapTypeControl: false
        });

        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');

        var contentString = '<div class="iw-content">' + '<div class="iw-subTitle">My company </div>' + '<p>455 street</p>' + '<p>City, World</p>' + '<p>Canada, Postalcode</p>' + '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: mycompany,
            map: map,
            title: 'My company'
        });



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

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });

        google.maps.event.addListener(infowindow, 'domready', function() {

            var iwOuter = $('.gm-style-iw');

            var iwBackground = iwOuter.prev();

            iwBackground.children(':nth-child(2)').css({'background' : '#252525'});

            var iwmain = iwBackground.children(':nth-child(2)');

            iwBackground.children(':nth-child(4)').css({'display' : 'none'});

            var iwCloseBtn = iwOuter.next();

        });
    }
    initMap();

MEIN CSS:

#map .gm-style-iw {
  background-color: #252525;
  padding: 2% 11%;
}
#map .iw-content p {
  color: #a5a5a5;
}
#map .iw-subTitle {
  color: white;
  font-size: 16px;
  font-weight: 700;
  padding: 5px 0;
}

Außerdem möchte ich das seltsame Dreieck am unteren Rand der Karte gestalten, das aufgrund der nativen Farbe des Hintergrunds ebenfalls weiß ist.

Ich werde ein Bild hinzufügen, um mein Problem besser zu erklären

 My info window

Vielen Dank im Voraus für jede Hilfe

5
Matto

Sie müssen die folgenden CSS-Attribute verwenden, um das Informationsfenster korrekt zu formatieren:

          /*style the box which holds the text of the information window*/  
         .gm-style .gm-style-iw {
            background-color: #252525 !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 120px !important;
            padding-top: 10px;
            display: block !important;
         }    

         /*style the paragraph tag*/
         .gm-style .gm-style-iw #google-popup p{
            padding: 10px;
         }


        /*style the annoying little arrow at the bottom*/
        .gm-style div div div div div div div div {
            background-color: #252525 !important;
            margin: 0;
            padding: 0;
            top: 0;
            color: #fff;
            font-size: 16px;
        }

        /*style the link*/
        .gm-style div div div div div div div div a {
            color: #f1f1f1;
            font-weight: bold;
        }

JSfiddle-Beispiel: http://jsfiddle.net/hLenqzmy/18/

5
user7138697

Ich empfehle dringend die Verwendung von Snazzy Info Window hier. Die akzeptierte Antwort empfiehlt einen sehr hackigen und undokumentierten Ansatz, der möglicherweise abbricht, sobald Google ihre Struktur aktualisiert.

Mit dem Snazzy-Infofenster können Sie einfach Ihre Attribute angeben und das Styling sogar mit SCSS anpassen:

let map = new google.maps.Map(document.getElementById('map-canvas'));

let latLng = new google.maps.LatLng(1, 1);

let marker = new google.maps.Marker({
    position: latLng,
    map: map
});

let headline = 'Amazing Location';
let content = 'Put your great great content here';

let info = new SnazzyInfoWindow({
    marker: marker,
    content: `<h1>${headline}</h1><span class="info-content">${content}</span>`,
    closeOnMapClick: false,
    pointer: false,
    shadow: false,
});

Und fügen Sie dann in Ihrem SCSS hinzu:

$si-content-bg: #000;

Siehe https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss für weitere Stylingoptionen und hier für das vollständige Beispiel.

Es sind 2018 Leute, keine Notwendigkeit, sich selbst durch 10 Überschreiben von verschachtelten Divs zu verprügeln.

1
Kevin Goedecke