web-dev-qa-db-fra.com

Style personnalisé pour une infowindow Google Maps (arrière-plan)

Je construis une carte avec Google Maps et j'ai un problème. J'essaie de dénommer l'infowindow qui est ouvert lorsqu'un utilisateur clique sur l'épingle. Mon problème est que cela fonctionne réellement mais il est rendu avec un effet étrange sur un père div de la fenêtre elle-même (quand quelqu'un clique plusieurs fois sur ma fenêtre, la fenêtre affiche une bordure blanche étrange père de ma div avec une classe de gm-style-iw).

Mon code est le suivant:

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

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

De plus, je souhaite styler le triangle étrange au bas de la carte, qui est également blanc en raison de la couleur native de l'arrière-plan.

Je vais ajouter une photo pour expliquer mieux mon problème

 My info window

Merci d'avance pour toute aide

javascriptcss3google-mapsgoogle-maps-api-3
5
Matto

Vous devez utiliser les attributs CSS suivants pour styliser correctement la fenêtre d’information:

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

Exemple JSfiddle: http://jsfiddle.net/hLenqzmy/18/

5
user7138697

Je recommande fortement d'utiliser Snazzy Info Window ici. La réponse acceptée recommande une approche très informelle et non documentée, qui pourrait se rompre dès que Google mettra à jour sa structure.

Avec Snazzy Info Window, vous pouvez simplement spécifier vos attributs, puis personnaliser le style même avec SCSS:

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

Et ajoutez ensuite dans votre SCSS:

$si-content-bg: #000;

Voir https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss pour plus d'options de style et ici pour l'exemple complet.

En 2018, inutile de vous battre en écrasant 10 fois les divs imbriqués.

1
Kevin Goedecke