API GoogleMaps V3: InfoWindow mal dimensionné
il semble que mon InfoWindow, lorsque vous cliquez sur l'icône home sur mon Google Maps v3, n'est pas correctement auto-dimensionné au contenu de L'InfoWindow.
il donne des barres quand il ne devrait pas. La fenêtre Infow doit être correctement auto-dimensionnée.
une idée de pourquoi?
par requête, le JavaScript correspondant qui injecte le HTML pour L'InfoWindow:
listing = '<div>Content goes here</div>';
mise à JOUR
ce bug a été géré par Google dans la publication
https://issuetracker.google.com/issues/35823659
le correctif a été implémenté en février 2015 dans la version 3.19 de L'API JavaScript Maps.
30 réponses
Ajouter un div dans votre infowindow
<div id=\"mydiv\">YourContent</div>
définit ensuite la taille en utilisant css. fonctionne pour moi. Tous les infowindows sont de la même taille!
#mydiv{
width:500px;
height:100px;
}
réponse Courte: définir la maxWidth options de propriété dans le constructeur . Oui, même si définir la largeur maximale n'était pas ce que vous vouliez faire.
plus longue histoire:
La migration d'une carte v2 vers v3, j'ai vu exactement le problème décrit. Les fenêtres variaient en largeur et en hauteur, et certaines avaient des barres verticales et d'autres pas. Certains avaient
incorporé dans les données, mais au moins un avec cette taille OK.
Je ne pensais pas que le InfoWindowsOptions.la propriété maxWidth était pertinente, puisque je ne me souciais pas de limiter la largeur... mais en le paramétrant avec le constructeur InfoWindow, j'ai obtenu ce que je voulais, et les fenêtres se positionnent maintenant (verticalement) et montrent le contenu complet sans barre de défilement verticale. Ne fait pas beaucoup de sens pour moi, mais ça fonctionne!
vous devez donner le contenu à InfoWindow de l'objet jQuery.
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}
ça marche pour moi
ÉDITÉ (hors concours): faites-moi Confiance, de la centaine d'autres réponses à cette question, c'est le seul bon qui explique aussi POURQUOI il se passe
Ok, donc je sais que ce fil est vieux, et a mille réponses, mais aucun d'eux n'est correct et je sens le besoin de poster la réponse correcte.
tout D'abord, vous ne pas jamais besoin de préciser width's ou height's sur quoi que ce soit afin d'obtenir votre infoWindow à afficher sans barres de défilement, bien que parfois vous pouvez accidentellement le faire fonctionner en le faisant (mais il est finira par échouer).
Deuxièmement, Google Maps API infoWindow's ne pas ont un bug de défilement, il est juste très difficile de trouver les informations correctes sur la façon dont ils fonctionnent.
lorsque vous dites à L'API GoogleMaps D'ouvrir 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, il crée un detached DOM tree - mais il est conceptuellement plus facile de comprendre si je dis que vous imaginez un div étant des endroits à la fin de votre page ) avec le contenu HTML que vous avez spécifié. Il mesure alors que div (ce qui signifie que, dans cet exemple, quelles que soient les règles CSS dans mon document s'appliquent à h1 et p étiquettes seront appliquées à elle) pour obtenir son width et height . Google prend alors que div , attribue les mesures qu'il a obtenu quand 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 HTML qui ressemble à ceci:
<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>
et, pour quelque raison que ce soit, 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 partie h1 du contenu aura une taille de 18px (parce que le" DIV de mesure "temporaire est ajouté au corps), mais lorsque l'API place réellement le infoWindow sur la carte, le sélecteur #map-canvas h1 aura priorité faisant en sorte que la taille de la police soit très différente de ce qu'elle était quand L'API a mesuré la taille du infoWindow et dans ce cas, vous toujours obtenir des barres de défilement.
il peut y avoir des nuances légèrement différentes pour la raison spécifique pourquoi vous avez des barres de défilement dans votre infoWindow , mais la raison derrière cela est à cause de cela:
les mêmes règles CSS doivent s'appliquer au contenu à l'intérieur de votre
infoWindowindépendamment du lieu où le l'élément HTML apparaît dans le markup. Si ils ne le font pas, alors vous serez garanti pour obtenir des barres de défilement dans votre infoWindow
alors 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...
donc peu importe où L'API ajoute sa mesure div - avant la fermeture body ou à l'intérieur d'un #map-canvas , les règles CSS appliqué sera toujours le même.
ÉDITION RE: Police des Familles
Google semble travailler activement sur la question du chargement de police (décrit ci-dessous) et la fonctionnalité a changé très récemment de sorte que vous pouvez ou non voir le chargement de police Roboto lorsque votre infoWindow s'ouvre la première fois, en fonction de la version de l'API que vous utilisez. Il y a un rapport de Bogue ouvert (même si dans le "changelog 15191000920" ce rapport de bogue était déjà signalé comme étant corrigé), ce qui montre que google éprouve toujours des difficultés avec ce problème.
ENCORE UNE CHOSE: FAITES ATTENTION À 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 gens qui n'ont pas compris les règles que j'ai expliquées ci-dessus, cela n'a pas vraiment aider, et, dans certains cas, il est encore pire. Les barres de défilement apparaîtraient presque toujours la première fois qu'un infoWindow était ouvert, mais si vous ouvrez à nouveau un infoWindow , même avec le même contenu exact les barres de défilement disparaîtraient. Sérieusement, si tu n'étais pas confus avant, ça te ferait perdre la tête. Voici ce qui se passait:
si vous regardez les styles que google charge sur la page quand il est chargé API, vous pourrez voir ceci:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
Ok, donc Google a voulu rendre ses cartes un peu plus cohérentes en leur faisant toujours utiliser la Roboto font-famille. Le problème est, pour la majorité des gens, l'avant que vous avez ouvert un infoWindow , le navigateur n'avait pas encore téléchargé la police Roboto (parce que rien d'autre sur votre page utilisé de sorte que le navigateur est assez intelligent pour savoir qu'il n'a pas besoin de télécharger cette police). Télécharger cette police n'est pas instantanée, même si il est très rapide. La première fois que vous ouvrez un infoWindow et que l'API ajoute le div avec votre infoWindow contenu au corps pour prendre ses mesures, il commence à télécharger la police Roboto , mais vos infoWindow's mesures sont prises et la fenêtre est placée sur la carte avant que Roboto finisse le téléchargement. Le résultat, assez souvent, a été un infoWindow dont les mesures ont été prises quand son contenu a été rendu en utilisant Arial ou une police sans-serif , mais quand elle a été affichée sur la carte (et Roboto avait terminé le téléchargement) son contenu était affiché dans une police qui était une taille différente - et voila - scrollbars apparaissent la première fois que vous ouvrez le infoWindow . Ouvrez la même infoWindow une deuxième fois - à ce moment-là le Roboto a été téléchargé et sera utilisé lorsque L'API prend ses mesures de infoWindow contenu et vous ne verrez pas de barres de défilement.
j'ai essayé chacune des réponses énumérées. Aucun n'a fonctionné pour moi.
Cela a finalement corrigé de façon permanente.
Le code que j'ai hérité avait un DIV enveloppant toutes les entrées <h#> et <p> . J'ai simplement forcé un certain " style "dans la même DIV, en tenant compte d'une largeur maximale désirée, a jeté dans le changement de hauteur de la ligne juste au cas où (la solution de quelqu'un d'autre) et mon propre white-space: nowrap , qui a ensuite fait le débordement automatique faire les ajustements corrects. Pas de barre de défilement, pas de troncature et pas de problèmes de!
html = '<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">';
je sais que c'est un vieux fil, mais je viens de rencontrer le même problème. J'ai eu <h2> et <p> éléments dans le InfoWindow, et tous les deux avaient des marges inférieures. J'ai enlevé les marges, et InfoWindow correctement dimensionné. Aucun des autres corrections suggérées travaillé. Je soupçonne que le calcul de la taille InfoWindow ne tient pas compte des marges.
va ajouter ma réponse à la liste, car aucun de ceux-ci n'a réglé mon problème. J'ai fini par emballer mon contenu dans un div, en donnant à ce div une classe, et en spécifiant le min-width sur le div, et en spécifiant le maxWidth sur l'infoWindow, et ils avaient tous les deux besoin d'être de la même taille, sinon soit la largeur ou la hauteur serait débordant sur les boîtes avec juste la mauvaise quantité de contenu.
Javascript:
// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";
// create a map info box
var infoWindow = new google.maps.InfoWindow({
maxWidth: 350,
content: content
});
CSS:
div.infowindow-content {
min-width: 350px;
}
j'ai essayé toutes ces solutions, et aucune n'a fonctionné. Après quelques essais et erreurs, j'ai compris.
<style type="text/css">
#map_canvas {
line-height:normal;
}
</style>
Set line-height:normal pour la carte toile div.
Il semble que le problème est avec le Roboto webfont.
l'infowindow est rendu avec des propriétés de largeur et de hauteur en ligne basées sur le contenu fourni. Cependant, il n'est pas calculé avec le webfont déjà rendu/chargé. Une fois que la police est rendue après que la carte entière est imprimée à l'écran, elle fait apparaître les barres de défilement à cause des propriétés "overflow:auto" dans les DIVs de la fenêtre.
la solution que j'ai trouvée travailler consiste à envelopper le contenu dans une DIV et ensuite appliquer CSS pour outrepasser le webfont:
.gmap_infowin {
font-family: sans-serif !important;
font-weight: normal !important;
}
<div class="gmap_infowin">Your info window content here.</div>
assez drôle, alors que le code suivant corrigera la barre de défilement de la largeur:
.gm-style-iw
{
overflow: hidden !important;
line-height: 1.35;
}
il a fallu ceci pour corriger la barre de défilement de la hauteur:
.gm-style-iw div
{
overflow: hidden !important;
}
EDIT: Ajouter blanc-espace: nowrap; à l'un ou l'autre style pourrait corriger la question d'espacement qui semble s'attarder lorsque les barres de défilement sont supprimés. Excellent point de Nathan.
ça me va.
Mettez un div dans le setContent
sh_map.infoWindow.setContent([
'<div id=\"mydiv\">',
'Your content goes here',
].join(''));
puis ajouter ce CSS à votre page:
<style type="text/css">
#map-canvas {
text-align: center;
vertical-align: middle;
}
#mydiv {
font-family: "Comic Sans MS", cursive;
font-size: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
word-spacing: normal;
}
</style>
par exemple, voir http://www.student-homes-northampton.co.uk ; cliquez sur les liens sous les photos de la maison pour afficher la carte de Google.
cela a complètement résolu mon problème:
.gm-style-iw {
overflow: visible !important;
height: auto !important;
width: auto !important;
}
j'avais le même problème avec IE et j'ai essayé plusieurs des corrections détaillées dans ces réponses, mais j'ai été incapable d'enlever les barres verticales dans IE de façon fiable.
ce qui marchait le mieux pour moi était de passer à des tailles de police fixes à l'intérieur de la fenêtre infowindow -- 'px'... J'ai été en utilisant ems. En fixant la taille de police Je n'avais plus besoin de déclarer explicitement la largeur infowindow ou la hauteur et les barres de défilement étaient partis pour de bon.
également importante est la hauteur du conteneur de la carte. Si à petite infoWindow sera toujours sur la hauteur de 80px. Sinon maxWidth et #innerDiv fix fonctionne comme un charme.
si rien d'autre, essayez d'ajouter le contenu après que la fenêtre a été ouverte. Cela devrait le forcer à redimensionner.
infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)
utilisez l'événement domready et rouvrez la fenêtre info et montrez le contenu caché après que l'événement domre à deux reprises pour vous assurer que tous les éléments dom ont été chargés.
// map is created using google.maps.Map()
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; }
infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);
// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
if (infowindow.get("isdomready")) {
// show the infowindow by setting css
jQuery('.infowin-content').css('visibility', 'visible');
}
else {
// trigger a domready event again.
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.set("isdomready", true);
}
}
j'ai essayé juste de faire un setTimeout(/* show infowin callback */, 100), mais parfois cela ne fonctionnait pas encore si le contenu (i.e.: images) prenait trop de temps à charger.
Espérons que cela fonctionne pour vous.
j'avais le même problème, particulièrement perceptible lorsque mon élément <h2> était enroulé sur une deuxième ligne.
j'ai appliqué une classe à un <div> dans l'infoWindow, et j'ai changé les polices pour une police système générique (dans mon cas, Helvetica) par rapport à une police web @font-face qu'il avait utilisé. Problème résolu.
//infowindow.setContent(response);
var infowindowopts = {
maxWidth: 274,
content: response
};
infowindow.setOptions(infowindowopts);
Ajouter un min-height à votre élément de classe infoWindow.
qui résoudra le problème si vos infoWindows sont tous de la même taille.
si ce n'est pas le cas, ajoutez cette ligne de jQuery à votre fonction de clic pour l'infoWindow:
//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');
Je n'ai pas pu le faire fonctionner d'une façon ou d'une autre, j'ai inclus 3 divs dans la boîte. Je les ai enveloppés dans une div externe, avec des largeurs et des hauteurs toutes réglées correctement, et rien n'a fonctionné.
à la fin je l'ai corrigé en positionnant le div comme absolut top left, et puis avant le div, j'ai mis deux images, une de 300px de large et 1px de haut, une de 120px de haut et 1px de large, d'un gif transparent.
il a pris la bonne échelle alors!
son laid mais il fonctionne.
vous pouvez aussi faire une image et définir un zindex que j'attends, ou même une seule image si votre fenêtre n'a pas d'interaction, mais celle-ci contient une forme, donc, ce n'était pas une option...
je pense que ce comportement est en raison d'un certain style css dans un conteneur extérieur, j'ai eu le MÊME PROBLÈME, MAIS je l'ai résolu en utilisant une div an intérieure ajouter un peu de rembourrage à elle, je sais que c'est bizarre, mais il a résolu le problème
<div id="fix_height">
<h2>Title</h2>
<p>Something</p>
</div>
et dans mon style.css
div#fix_height{
padding: 5px;
}
j'avais un élément en ligne (une étiquette a) directement à l'intérieur du div avec style="overflow:auto"[... enveloppé que dans une étiquette p et l'ai fixé.
ressemble à n'importe quel élément en ligne qui n'est pas imbriqué dans un élément de bloc directement à l'intérieur de la fenêtre infowindow va causer cela.
ma réponse est d'ajouter un écouteur (en utilisant addListenerOnce) pour vérifier si l'infoWindow a été ajouté au DOM, puis d'ouvrir l'infoWindow à nouveau (pas besoin de le fermer).
// map, marker and infoWindow code, we'll call them
// myMap, myMarker and myInfoWindow
myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
myInfoWindow.open(myMap, myMarker);
});
ajouter ce qui suit à mon CSS a fait l'affaire pour moi:
white-space: nowrap;
juste pour résumer toutes les solutions qui ont fonctionné pour moi dans tous les navigateurs:
- N'utilisez pas de marges à l'intérieur de la fenêtre, seulement du rembourrage.
-
définissez une largeur maximale pour l'infowindow:
this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 }); -
envelopper le contenu de l'infowindow avec
<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>(changer la min-width pour la valeur que vous situé sur l'infowindow maxWidth)
Je l'ai testé et il a fonctionné sur chaque navigateur, et j'avais plus de 400 marqueurs...
je sais que beaucoup d'autres personnes ont trouvé des solutions qui ont fonctionné pour leur cas particulier, mais comme aucun d'eux n'a travaillé pour mon cas particulier, j'ai pensé que cela pourrait être utile à quelqu'un d'autre.
quelques détails:
J'utilise Google maps API v3 sur un projet où css inline est quelque chose que nous voulons vraiment, vraiment éviter. Mes infowindows fonctionnaient pour tout sauf pour IE11, où la largeur n'était pas calculé correctement. Il en est résulté des débordements de div, qui ont déclenché des barres de défilement.
j'ai dû faire trois choses:
-
supprimer toutes les règles de style display: inline-block à partir de tout ce qui se trouve à l'intérieur du contenu infowindow (j'ai remplacé par display: block) - j'ai eu l'idée d'essayer ceci à partir d'un thread (que je ne peux plus trouver) où quelqu'un avait le même problème avec IE6.
-
Pass le contenu comme un noeud DOM au lieu d'une chaîne. J'utilise jQuery, donc je pourrais le faire en remplaçant:
infowindow.setContent(infoWindowDiv.html());parinfowindow.setContent($(infoWindowDiv.html())[0]);Ceci s'est avéré être plus facile pour moi, mais il ya beaucoup d'autres façons d'obtenir le même résultat. -
utilisez l'option" setMaxWidth "hack - set L'option MaxWidth dans le constructeur - paramétrer l'option plus tard ne fonctionne pas. Si vous ne voulez pas vraiment une largeur maximale, il suffit de régler un très grand nombre.
Je ne sais pas pourquoi cela a fonctionné, et je ne sais pas si un sous-ensemble d'entre eux fonctionnerait. Je sais qu'aucun d'entre eux ne fonctionne pour tous mes cas d'utilisation individuellement, et que 2 + 3 ne fonctionne pas. Je n'ai pas eu le temps de tester 1 + 2 ou 1 + 3.
il n'était pas acceptable pour moi de coder en dur la largeur et la hauteur de la fenêtre d'information, ou de mettre white-space: nowrap , la solution maxWidth ne m'a pas aidé et tout le reste ne fonctionnait pas ou était autrement inapproprié pour mon cas d'utilisation.
ma solution a été de définir le contenu, ouvrir la fenêtre et puis quand l'événement domready est lancé, définir la propriété height CSS sur le contenu à quelle que soit la hauteur est, et puis forcer Google Maps à redimensionner le InfoWindow en conséquence.
infoWindow est L'objet InfoWindow, $infoWindowContents est un objet Jquery du contenu que je veux y mettre, map est mon objet Map. marker est un marqueur qui a été cliqué.
infoWindow.setContent($infoWindowContents.get(0));
var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
// Stop listening, otherwise the listeners stack up if the window is opened again
google.maps.event.removeListener(listener);
// Set the height on the container to however tall the browser is currently rendering it
$infoWindowContents.height($infoWindowContents.height());
// Force Google Maps to recalculate the InfoWindow height
infoWindow.setContent($infoWindowContents.get(0));
});
infoWindow.open(map, marker);
(j'ai posté la même solution sur une question similaire Comment puis-je obtenir un InfoWindow google-maps pour redimensionner pour correspondre au contenu qui est placé à l'intérieur de celui-ci? )
après avoir perdu du temps et de la lecture pendant un certain temps, je voulais juste quelque chose de simple, ce css a fonctionné pour mes besoins.
.gm-style-iw > div { overflow: hidden !important; }
N'est pas non plus une solution instantanée, mais mettre en vedette/commenter sur la question pourrait les faire corriger, comme ils croient qu'il est fixé: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713
Eh bien, c'est celui qui a fait l'affaire pour moi:
.gm-style-iw>div {
overflow: visible !important;
}
seul le réglage overflow: visible sur .gm-style-iw a en fait aggravé le problème! J'ai remarqué dans le Chrome developer tools inspector qu'il y a deux div à l'intérieur de l'élément .gm-style-iw , les deux ayant overflow: auto défini par défaut.
j'affiche pas mal de texte HTML dans Mes InfoWindows, c'est peut-être pour cela que les autres solutions ne fonctionnaient pas du tout pour moi.