EDITED (pour se démarquer): Croyez-moi, sur les cent autres réponses à cette question, c'est la seule correcte qui explique également POURQUOI cela se produit
Ok, donc je sais que ce fil est vieux et qu'il contient mille réponses, mais aucune d'entre elles n'est correcte et je ressens le besoin de poster la bonne réponse.
Tout d'abord, vous n'avez jamais besoin de spécifier width'sou height'ssur quoi que ce soit pour que votre infoWindow s'affiche sans barres de défilement, bien que parfois vous puissiez accidentellement le faire fonctionner en faisant cela (mais cela finira par échouer).
Deuxièmement, l'API Google Maps n'a infoWindow's pas de bogue de défilement, il est juste très difficile de trouver les informations correctes sur leur fonctionnement. Eh bien, la voici:
Lorsque vous dites à l'API Google Maps d'ouvrir dans infoWindow comme ceci:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
À toutes fins utiles, google maps place temporairement un divà la fin de votre page (en fait, cela crée un detached DOM tree- mais il est conceptuellement plus facile à comprendre si je dis que vous imaginez un divêtre placé à la fin de votre page ) avec le contenu HTML que vous spécifié. Il mesure ensuite ce div (ce qui signifie que, dans cet exemple, quelles que soient les règles CSS de mon document qui s'appliquent h1et les pbalises lui seront appliquées) pour obtenir son widthet height. Google le prend ensuite div, lui attribue les mesures qu'il a obtenues lorsqu'il a été ajouté à votre page et le place sur la carte à l'emplacement que vous avez spécifié.
Voici où le problème se produit pour beaucoup de gens - ils peuvent avoir du HTML qui ressemble à ceci:
<body>
<div id="map-canvas"></div>
</body>
et, pour une raison quelconque, CSS qui ressemble à ceci:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
Pouvez-vous voir le problème? Lorsque l'API essaie de prendre les mesures pour votre infoWindow(immédiatement avant de l'afficher), la h1partie du contenu aura une taille de 18px(car le «div de mesure» temporaire est ajouté au corps), mais lorsque l'API place réellement le infoWindowsur la carte, le #map-canvas h1sélecteur aura la priorité, ce qui rendra la taille de la police très différente de ce qu'elle était lorsque l'API a mesuré la taille du infoWindowet dans ce cas, vous serez toujours barres de défilement.
Il peut y avoir des nuances plus légèrement différentes pour la raison spécifique pour laquelle vous avez des barres de défilement dans votre infoWindow, mais la raison derrière cela est à cause de ceci:
Les mêmes règles CSS doivent s'appliquer au contenu à l'intérieur de votre, infoWindow
quel que soit l'endroit où l'élément HTML réel apparaît dans le balisage. Si ce n'est pas le cas, vous aurez la garantie d'obtenir des barres de défilement dans votre infoWindow
Donc, ce que je fais toujours, c'est quelque chose comme ça:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
et dans mon CSS:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Ainsi, peu importe où l'API ajoute sa mesure div- avant la fermeture bodyou à l'intérieur d'un #map-canvas, les règles CSS qui lui sont appliquées seront toujours les mêmes.
EDIT RE: Familles de polices
Google semble travailler activement sur le problème de chargement des polices (décrit ci-dessous) et la fonctionnalité a changé très récemment, vous pouvez donc ou non voir le chargement de la police Roboto lors de infoWindowla première ouverture, en fonction de la version de l'API que vous utilisez. Il y a un rapport de bogue ouvert (même si dans le journal des modifications, ce rapport de bogue était déjà marqué comme corrigé) qui illustre que Google rencontre toujours des difficultés avec ce problème.
UNE PLUS CHOSE: REGARDEZ VOS FAMILLES DE POLICES !!!
Dans la dernière incarnation de l'API, Google a essayé d'être intelligent et d'envelopper son contenu infoWindow dans quelque chose qui pourrait être ciblé avec un sélecteur CSS - .gm-style-iw. Pour les personnes qui ne comprenaient pas les règles que j'ai expliquées ci-dessus, cela n'a pas vraiment aidé, et dans certains cas, les choses ont même empiré. Les barres de défilement apparaissaient presque toujours la première fois que un infoWindowétait ouvert, mais si vous en rouvriez infoWindow, même avec exactement le même contenu, les barres de défilement disparaîtraient. Sérieusement, si vous n'étiez pas confus auparavant, cela vous ferait perdre la tête. Voici ce qui se passait:
Si vous regardez les styles que Google charge sur la page lors du chargement de l'API, vous pourrez voir ceci:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
Ok, donc Google voulait rendre ses cartes un peu plus cohérentes en les faisant toujours utiliser la Robotofamille de polices. Le problème est que, pour la majorité des gens, avant d'ouvrir un infoWindow, le navigateur n'avait pas encore téléchargé la Robotopolice (car rien d'autre sur votre page ne l'utilisait, donc le navigateur est assez intelligent pour savoir qu'il n'a pas besoin de télécharger cette police). Le téléchargement de cette police n'est pas instantané, même s'il est très rapide. La première fois que vous ouvrez un infoWindowet que l'API ajoute le divavec votre infoWindowcontenu au corps pour prendre ses mesures, il commence à télécharger la Robotopolice, mais vos infoWindow'smesures sont prises et la fenêtre est placée sur la carte avantRoboto fin du téléchargement. Le résultat, assez souvent, était uninfoWindowdont les mesures ont été prises lorsque son contenu a été rendu à l'aide d' Arialune sans-serifpolice ou d'une police, mais lorsqu'il a été affiché sur la carte (et Robotoa terminé le téléchargement), son contenu était affiché dans une police de taille différente vous ouvrez le fichier infoWindow. Ouvrez exactement la même chose infoWindowune deuxième fois - à quel point le Robotoa été téléchargé et sera utilisé lorsque l'API prendra ses mesures de infoWindowcontenu et vous ne verrez aucune barre de défilement.