Custom Style für ein googlemaps Infofenster (Hintergrund)

Question

Ich baue eine Karte mit Google Maps und ich habe ein Problem. Ich versuche, das Infowindow zu stylen, 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 Vater div des Fensters selbst gerendert (wenn jemand mehrmals auf mein Fenster klickt, zeigt das Fenster einen seltsamen weißen Rand an, der die Farbe des Hintergrunds des Vater meines Div mit einer Klasse von gm-style-iw).

Mein Code ist folgende:

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 Ich will das seltsame Dreieck am unteren Rand der Karte gestalten, das ist wegen der natürlichen Farbe des Hintergrundes auch weiß.

Ich werde ein Bild hinzufügen, um besser

Danke mein Problem für jede Hilfe im Voraus zu erklären

Answer 1

Sie benötigen die folgenden CSS-Attribute korrekt die Informationen zum ursprünglichen Stil Fenster:

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