API Google Maps v3 : l'InfoWindow ne se dimensionne pas correctement

Question

Il semble que ma fenêtre d'information, lorsque vous cliquez sur l'icône d'accueil de mon Google Maps v3, ne s'adapte pas automatiquement au contenu de la fenêtre d'information.

Il donne des barres de défilement alors qu'il ne devrait pas. La fenêtre d'information devrait avoir une taille automatique correcte.

Une idée de la raison ?

Par demande, le JavaScript pertinent qui injecte le HTML de la fenêtre d'information :

listing = '<div>Content goes here</div>';

Answer 1

Ajoutez un div dans votre fenêtre d'information

<div id=\"mydiv\">YourContent</div>

Puis définissez la taille à l'aide de css. Cela fonctionne pour moi. Cela suppose que toutes les infofenêtres ont la même taille !

#mydiv{
width:500px;
height:100px;
}

Answer 2

Réponse courte : définir la propriété des options maxWidth dans le constructeur . Oui, même si la définition de la largeur maximale n'était pas ce que vous vouliez faire.

Une histoire plus longue : Lors de la migration d'une carte v2 vers v3, j'ai rencontré exactement le problème décrit. Windows varied in width and height, and some had vertical scrollbars and some didn't. Some had <br /> embedded in the data, but at least one with that sized OK.

Je ne pensais pas que la propriété InfoWindowsOptions.maxWidth était pertinente, étant donné que je ne me souciais pas de contraindre la largeur... mais en la fixant avec le constructeur de l'InfoWindow, j'ai obtenu ce que je voulais, et les fenêtres se redimensionnent maintenant automatiquement (verticalement) et affichent le contenu complet sans barre de défilement verticale. Cela n'a pas beaucoup de sens pour moi, mais cela fonctionne !

Ver: http://fortboise.org/maps/sailing-spots.html

Answer 3

Vous devez donner le contenu de la fenêtre d'information à partir de l'objet jQuery.

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

Answer 4

.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

cela fonctionne pour moi

Answer 5

J'ai essayé chacune des réponses énumérées. Aucune n'a fonctionné pour moi. Ceci a finalement réglé le problème de façon PERMANENTE. Le code dont j'ai hérité avait un DIV autour de toutes les <h#> y <p> entrées. J'ai simplement forcé un certain "style" dans le même DIV, en tenant compte d'une largeur maximale souhaitée, j'ai ajouté le changement de hauteur de ligne juste au cas où (la correction de quelqu'un d'autre) et ma propre correction. white-space: nowrap ce qui a permis au débordement automatique de faire les ajustements nécessaires. Pas de barre de défilement, pas de troncature et pas de problèmes !

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';