title: Custom style for a googlemaps info window (background)
body: <p>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).</p>
  
  <p>My code is the following:</p>
  
  <p>MY JAVASCRIPT:</p>
  
  <pre><code>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 = '&lt;div class="iw-content"&gt;' + '&lt;div class="iw-subTitle"&gt;My company &lt;/div&gt;' + '&lt;p&gt;455 street&lt;/p&gt;' + '&lt;p&gt;City, World&lt;/p&gt;' + '&lt;p&gt;Canada, Postalcode&lt;/p&gt;' + '&lt;/div&gt;';
  
          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();
  </code></pre>
  
  <p>MY CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm gonna add a picture to explain as better my problem</p>
  
  <p><a href="https://i.stack.imgur.com/DmQ7T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DmQ7T.png" alt="My info window"></a></p>
  
  <p>Thank you in advance for any help</p>