Custom style for a googlemaps info window (background)

Question

I'm building a map with google maps and I have a problem. I'm trying to style the infowindow which is opened when some user will click on the pin. My problem is that it actually works but it is rendered with a strange effect on a father div of the window itself (when someone click multiple times on my window, the window display a weird white border, which is the color of the background of the father of my div with a class of gm-style-iw).

My code is the following:

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

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

Plus I want to style the weird triangle at the bottom of the map which is also white because of the native color of the background.

I'm gonna add a picture to explain as better my problem

Thank you in advance for any help

Solution

I strongly recommend using Snazzy Info Window here. The accepted answer recommends a very hacky and undocumented approach, which might break as soon as Google updates their structure.

With Snazzy Info Window you can simply specify your attributes and then customize the styling even with 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,
});

And then add in your SCSS:

$si-content-bg: #000;

See https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss for more styling options and here for the full example.

It's 2018 people, no need to beat yourself up by overwriting 10 times nested divs.

Comments

[Michael]

sorry, but why would i want to pull in yet more code and not use the infowindow Google intended?

[doup]

Because you don't get any guarantee the customisation hack will work in the future. Trade-offs.