Google Map .InfoWindow Définir la hauteur et la largeur

Question

Comment définir la taille et la largeur d'une carte google InfoWindow? J'ai regardé on the api page et seulement trouvé une méthode maxWidth.

Modifier: J'ai essayé quelques petites choses. Jusqu'à présent, aucun de ces travaux:

var markerInfoWindow = new google.maps.InfoWindow({ 
     content: markerHTMLString, 
     maxHeight: 400, //Doesn't work 
     maxWidth: 400, //Doesn't work 
     width: 300,  //Doesn't work 
     height: 300  //Doesn't work 
    }); 

disent aussi markerHTMLString est égal à ceci:

<div class = "MarkerPopUp"><div class = "MarkerContext">Text</div></div> 

J'ai essayé ces trois options aussi bien (aucun d'entre eux a travaillé)

1. .MarkerPopUp { 
       height: 300px; 
       width: 300px; 
   } 
   

2. .MarkerPopUp { 
       height: 300px; 
       width: 300px; 
   } 
   
   .MarkerContext { 
       height: 300px; 
       width: 300px; 
   } 
   

3. .MarkerContext { 
       height: 300px; 
       width: 300px; 
   } 
   

Cela aussi ne fonctionnera pas:

document.getElementById('MarkerPopUp')parentNode.style.overflow = ''; 

ou cette

document.getElementById('MarkerPopUp').parentNode.parentNode.style.overflow = ''; 

Je suis à peu près traversais chaque fil que je peux trouver et tout essayer. Simplement pour limiter certaines choses (bien qu'il puisse y avoir un autre problème)

Answer 1

Il se peut que lorsque le code HTML est transmis à l'API de carte et analysé, il n'a pas accès à vos déclarations de feuille de style. Essayez d'ajouter votre largeur en tant que style en ligne sur MarkerPopUp. Je sais, je déteste aussi les styles en ligne, mais cela pourrait résoudre votre problème dans ce cas.

Answer 2

.gm-style-iw{ 
    max-height: 10px; 
} 

Régler le style pour gm-style-iw fait le travail!

Answer 3

Essayez le code suivant:

infowindow = new google.maps.InfoWindow({ 
     content: "", 
     maxWidth: 200 , 
     maxHeight: 400 
    }); 

Answer 4

utilisation importante dans css

.MarkerPopUp { 
    height: 300px !important; 
    width: 300px !important; 
} 

Answer 5

Vous pouvez utiliser wrapper <div> et ajouter du style comme celui-ci <div style='height: 40px; text-align: center'> et ajouter du code CSS .gm-style-iw { max-width: 400px!important;} dans votre fichier css;