API Google Maps v3: InfoWindow ne taille pas correctement

83

Il semble que mon InfoWindow, lorsque vous cliquez sur l'icône d'accueil sur mon Google Maps v3, ne soit pas correctement dimensionné automatiquement au contenu de l'InfoWindow.

Il donne des barres de défilement quand il ne le devrait pas. L'InfoWindow doit être correctement dimensionné automatiquement.

Des idées sur pourquoi?

Par requête, le JavaScript pertinent qui injecte le HTML pour l'InfoWindow:

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

MISE À JOUR

Ce bogue a été géré par Google en cause

https://issuetracker.google.com/issues/35823659

Le correctif a été mis en œuvre en février 2015 dans la version 3.19 de l'API JavaScript Maps.

javascript html css google-maps JacobT
la source
mieux vaut copier le code pertinent dans votre question. Sinon, cette question n'a plus de sens lorsque le code de votre site change.
Jonathan Fingland
Eh bien, c'est le point en fait. Je crois comprendre que l'API Google Maps v3 est supposée se dimensionner automatiquement quel que soit mon CSS ... et ce n'est pas le cas. Mais je
posterai quand même
7
Je sais que c'est vieux, mais au cas où quelqu'un arriverait ici et essayait tout et aurait encore un problème (comme je l'ai fait): les infowindows ont une hauteur maximale proportionnelle aux dimensions de votre carte. C'est plus petit que la v2. Donc, si vous passez de la v2 à la v3 et que vous rencontrez ce problème, cela peut être à cause de cela. Rendez votre contenu plus court, ou votre carte plus longue, ou revenez à la version v2.
Cassie

Réponses:

32

Ajouter un div dans votre infowindow

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

Ensuite, définissez la taille en utilisant css. travaille pour moi. Cela suppose que toutes les infowindows sont de la même taille!

#mydiv{
width:500px;
height:100px;
}
Harry
la source
Exactement. Même taille ou vous créez suffisamment de classes dans votre css avec des dimensions différentes.
Elijah Saounkine
selon la façon dont vous travaillez avec vos infowindows, il pourrait être plus sûr d'utiliser une classe plutôt qu'un ID, pour éviter les ID en double flottant sur la même page, par exemple <div class=\"mydiv\">YourContent</div>et.mydiv{ width:500px; height:100px; }
StackExchange What The Heck
Cela fonctionne sur le bureau, mais pas sur les appareils mobiles (Android) /
user2060451
31

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

Histoire plus longue: lors de la migration d'une carte v2 vers la v3, j'ai vu exactement le problème décrit. Les fenêtres variaient en largeur et en hauteur, certaines avaient des barres de défilement verticales et d'autres non. Certains avaient <br /> incorporé dans les données, mais au moins un avec cette taille OK.

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

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

fortboise
la source
2
Au cas où quelqu'un d'autre essaie de définir maxWidthun pourcentage, Google Maps reconnaîtra un flottant en tant que pourcentage du parent et le convertira en équivalent pixel: declare {"maxWidth":0.25}, l'élément parent a une largeur de 1000 pixels, InfoWindow aura un width: 250px. Je ne pense pas qu'il soit possible de forcer la largeur d'InfoWindow à rester un pourcentage (la valeur de maxWidthdoit être un nombre, donc {"maxWidth":"25%"}ne fonctionnera pas et {"maxWidth":25%}est traitée comme un module de 25 non défini et déclenche une erreur de syntaxe).
Jacob
Intéressant. La documentation Google actuelle indique que la propriété google.maps.InfoWindowOptions.maxWidth est "un nombre", et nous avons des unités de pixels déduites. Il n'y a aucune raison pour que l'analyseur ne puisse pas également accepter un nombre décimal et l'interpréter comme une fraction ... et que cela soit laissé comme une "fonctionnalité" non documentée. Sauf peut-être du bon sens.
fortboise le
1
Ok, +1 pour travailler très bien, mais pourquoi est-ce que je me retrouve toujours sur cette page de voile lorsque je recherche la fonctionnalité gMap.
Bill Blankenship
14
Cela peut avoir fonctionné en 2010, mais n'aide pas à partir de 2014.
Simon East
1
@Simon nouvelle année, nouveaux problèmes ... des solutions sur le correctif cette fois-ci?
Phil Cooper
25

Vous devez donner le contenu à InfoWindow à 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]);
Baris Aydinoglu
la source
4
Ok, cela fonctionne très bien, merci beaucoup ... Maintenant, je veux savoir pourquoi :)
Jeremy F.
2
C'est l'une des corrections les plus étranges que j'ai jamais vues. Aucun des autres hacks pour cette question n'a fonctionné pour moi sauf cela. Incroyable.
monoceres
3
Pour une raison quelconque, l'API Maps semble ne pas mettre overflow: autosur InfoWindow DIV lorsque vous passez des nœuds DOM au lieu d'une chaîne. Cela résout le problème si le contenu n'est sorti que de 1 à 2 pixels. Malheureusement, cela signifie qu'un contenu plus long se bloque en fait hors d'InfoWindow au lieu d'avoir des barres de défilement ajoutées.
Simon East
Bien que cela fonctionne, il est assez désagréable de demander aux gens d'inclure jQuery sur la page simplement pour infoWindow'safficher correctement. La réponse complète à la raison pour laquelle cela fonctionne est répertoriée dans ma réponse - jQuerycrée un arbre DOM détaché qui force le contenu à être correctement rendu et sa taille est déterminée avec précision avant que Google tente de placer le infoWindowsur la carte
Adam
22 
.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

ça marche pour moi

Rejeesh Prarath
la source
Ce n'est pas une excellente solution que tout contenu qui est plus grande que la fenêtre d'information sera coupée et caché.
Simon East
Pas parfait pour un contenu de longueur variable, mais mon contenu est à peu près le même pour chaque pointeur en appliquant une largeur! Importante et une hauteur! Importante était une solution suffisante pour moi!
Jimbo Jones
22

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"><!-- google map goes here --></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.

Adam
la source
Quelques grands détails là Adam, et oui j'ai découvert des choses similaires à vous. Cependant, le bogue signalé à Google ne semble réellement persisteront même avec les polices système et pas sélecteurs CSS descendante. Voir cet exemple (a une barre de défilement dans Chrome 40 Win).
Simon East
@Simon - vous avez raison, le lien que vous avez soumis est un bogue (cas extrêmement ardu, mais un bogue quand même). J'imagine que plus de 98% du temps, lorsque les gens rapportent leur infoWindows et qu'ils ne savent pas pourquoi - c'est à cause des problèmes abordés dans cette réponse.
Adam
Adam. Merci beaucoup pour cette réponse. Vous m'avez sauvé un tas de piratage inutile!
Abram
13

J'ai essayé chacune des réponses énumérées. Aucun n'a fonctionné pour moi. Cela a finalement réglé le problème de manière permanente. Le code dont j'ai hérité avait un DIVwrapper autour de toutes les entrées <h#>et <p>. J'ai simplement forcé un certain "style" dans le même DIV, en tenant compte de la largeur maximale souhaitée, j'ai ajouté le changement de hauteur de ligne juste au cas où (le correctif de quelqu'un d'autre) et le mien white-space: nowrap, ce qui a ensuite obligé le débordement automatique à faire les ajustements corrects. 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;
                                       ">';
user2656824
la source
7
Celui-là! J'ai parcouru toutes les réponses sans succès jusqu'à ce que j'arrive ici. Dans mon cas, c'était le white-space: nowrapqui avait la magie - les autres styles étaient inutiles. À votre santé!
Xavier Holt
Cela semble en effet fonctionner, cependant, certaines des infowindows ont dû être cliquées plus d'une fois ... ma solution finale a été de combiner cette réponse avec celle de Concept211 en ajoutant font-family: sans-serif !important; font-weight: normal !important;au CSS.
Sparky
Malheureusement, si vous avez de longues lignes, les lignes seront coupées au lieu de s'enrouler. Ce n'est pas une solution idéale à moins que vous ne sachiez que toutes vos lignes sont courtes.
Simon East
10

Je sais que c'est un vieux fil, mais je viens de rencontrer le même problème. J'avais <h2>et des <p>éléments dans l'InfoWindow, et ces deux avaient des marges inférieures. J'ai supprimé les marges et InfoWindow a été dimensionné correctement. Aucun des autres correctifs suggérés n'a fonctionné. Je soupçonne que le calcul de la taille d'InfoWindow ne prend pas en compte les marges.

Mike
la source
1
J'avais ce problème et aucun des autres correctifs ne fonctionnait, mais celui-ci a fonctionné. Merci :)
Ian Dunn
Cela s'applique à toutes les marges utilisées à l'intérieur de la fenêtre.
ZMorek
2
J'avais encore des problèmes, mais je viens de tout emballer dans <div style='overflow:hidden;'></div>Ça a l'air bien maintenant.
ZMorek
10

Je vais ajouter ma réponse à la liste, car AUCUN de ceux-ci n'a résolu mon problème. J'ai fini par envelopper mon contenu dans un div, en donnant à ce div une classe, et en spécifiant le min-widthsur le div, ET en spécifiant le maxWidthsur l'infoWindow, ET ils devaient tous deux être de la même taille, sinon la largeur ou la hauteur déborderait sur des 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;
}
Jen
la source
2
Définir un min-widthcontenu était la seule chose qui fonctionnait pour moi aussi. Je n'ai pas eu à définir le maxWidthsur infoWindow.
Mark Parnell
1
@MarkParnell = assurez-vous de bien tester. Je rencontrais des problèmes lorsque j'avais plus d'une certaine quantité de texte à une largeur donnée! Si vous savez quel sera le contenu, alors pas de problème :)
Jen
Merci beaucoup ... cela m'a aidé aussi. En vue mobile, j'ai donné maxWidth: 350. il prenait encore une valeur aléatoire. avec l'aide de min-width cela fonctionne très bien.
DShah
8

J'ai essayé toutes ces solutions et aucune n'a fonctionné. Après quelques essais et erreurs, je l'ai compris.

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

Définir la hauteur de ligne: normale pour la division du canevas de la carte.

pseudo
la source
Oui! la hauteur de la ligne est ce qui l'a corrigé pour moi aussi. rien d'autre n'a fonctionné. plus précisément, j'avais défini la hauteur de ligne dans ma feuille de style sur {line-height: 1.3; }. Je l'ai changé en {line-height: 1.3em} et cela a résolu le problème.
tbradley22
ou bien, vous pouvez simplement définir la hauteur de ligne de la division du conteneur de carte sur la normale comme indiqué ci-dessus.
tbradley22
Il n'y a aucun #map_canvasdans Google Maps v3 que je peux voir. Cela doit provenir de l'ancienne v2.
Simon East
@Simon #map_canvasest le div que vous utilisez pour la carte. Cela peut être le nom que vous voulez.
Nick
Malheureusement, cela n'aide pas. Ce violon affiche toujours une barre de défilement dans Chrome: jsfiddle.net/simoneast/dckxp62o
Simon East
8

Il semble que le problème soit lié à la police Web Roboto.

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 la police Web déjà rendue / chargée. Une fois que la police est rendue APRÈS que la carte entière soit imprimée à l'écran, alors elle fait apparaître les barres de défilement en raison des propriétés "overflow: auto" en ligne à l'intérieur des DIV de la fenêtre.

La solution que j'ai trouvée pour fonctionner consiste à envelopper le contenu dans un DIV, puis à appliquer CSS pour remplacer la police Web:

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>
Concept211
la source
cette solution fonctionne pour moi. Le masquage du défilement fonctionne également: .gm-style-iw {overflow: hidden! Important;} mais cela masquera une partie du contenu dans infoWindow
Imaginaire
+1 oui! Mais j'ai combiné cette réponse avec celle de user2656824 .
Sparky
+1 car c'est la seule réponse qui semble enfin reconnaître le fait que cela est dû aux problèmes de police Roboto. Je ne serais pas surpris si d'autres polices ne sont pas rendues correctement. le problème est que .gm-style-iw calcule une hauteur un peu plus petite que nécessaire, probablement à cause de l'arrondi du flotteur. la seule option vraiment raisonnable est malheureuse .gm-style-iw {overflow: hidden! important;}. bien sûr, cela devient inutile une fois que vous devez vraiment faire défiler
user151496
La police Roboto ne semble déclencher ce problème parfois , mais il arrive aussi avec les polices Arial et par défaut. Si vous regardez ce violon avec votre solution suggérée dans Chrome 38 sur Windows, il a toujours une barre de défilement désagréable: jsfiddle.net/simoneast/dckxp62o/2
Simon East
5

Assez drôle, alors que le code suivant corrigera la barre de défilement WIDTH:

.gm-style-iw
{
    overflow: hidden !important;
    line-height: 1.35;

}

Il a fallu cela pour corriger la barre de défilement HEIGHT:

    .gm-style-iw div
    {
        overflow: hidden !important;
    }

EDIT: Ajout d'espaces blancs: nowrap; dans l'un ou l'autre style peut corriger le problème d'espacement qui semble persister lorsque les barres de défilement sont supprimées. Super point Nathan.

Houdini Sutherland
la source
Je pense que mon problème a été causé par un emballage de balise h4. Lorsque j'ai ajouté votre suggestion, cela a supprimé les barres de défilement, mais il y avait un tout petit peu en bas de la fenêtre. Quand j'ai ajouté un espace blanc: nowrap; au h4, tout s'est amélioré. Merci!
Nate Bunney
4

Cela fonctionne pour moi. Mettez un divdans lesetContent

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

Ajoutez ensuite 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 Google.

Alan
la source
29
merci, ce n'est que lorsque j'ai défini ma police sur comic-sans que cela a commencé à fonctionner.
bret
4

Cela a complètement résolu mon problème:

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}
Vfleitao
la source
C'est la réponse la plus proche qui a fonctionné pour moi. Au lieu de la hauteur automatique, j'ai ajouté une hauteur minimale à la place.
Paul
3

J'avais le même problème avec IE et j'ai essayé de nombreux correctifs détaillés dans ces réponses, mais je n'ai pas réussi à supprimer les barres de défilement verticales dans IE de manière fiable.

Ce qui fonctionnait le mieux pour moi était de passer à des tailles de police fixes dans la fenêtre infowindow - 'px' ... J'utilisais ems. En corrigeant la taille de la police, je n'avais plus besoin de déclarer explicitement la largeur ou la hauteur de la fenêtre infowindow et les barres de défilement avaient disparu pour de bon.

Jim T.
la source
Cela aide parfois, mais ne résout pas le problème de manière fiable. Si vous affichez ce violon dans Chrome 38 sur Windows, il a toujours une barre de défilement laide: jsfiddle.net/simoneast/dckxp62o/3
Simon East
2

La hauteur du conteneur de carte est également importante. Si à petite infoWindow sera toujours sur une hauteur de 80px. Sinon maxWidthet #innerDivréparer fonctionne comme un charme.

xsi1
la source
Exactement, je ne pense pas qu'il y ait de taille fixe, mais le fait est que si la carte n'est pas assez grande (hauteur dans ce cas), l'infowindow ne se redimensionnera pas pour envelopper notre contenu. Essayez d'agrandir la carte et vérifiez à nouveau
spuas
CECI est la réponse la plus correcte ici. Une carte trop petite est généralement la cause des problèmes de dimensionnement de l'infowindow. Si vous voulez tester la théorie, inspectez simplement le conteneur de la carte et augmentez la largeur et la hauteur.
pim le
Malheureusement, il y a encore des problèmes même avec une carte suffisamment grande.
Simon East
2

Si rien d'autre, essayez d'ajouter le contenu une fois la fenêtre ouverte. Cela devrait le forcer à se redimensionner.

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)
Brad Koch
la source
0

Utilisez l'événement domready et rouvrez la fenêtre d'informations et affichez le contenu caché après le déclenchement de l'événement domready deux fois 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 juste essayé de faire un setTimeout (/ * show infowin callback * /, 100), mais parfois cela ne fonctionnait toujours pas si le contenu (c'est-à-dire: les images) prenait trop de temps à charger.

J'espère que cela fonctionne pour toi.

Steve Tranby
la source
0

J'avais le même problème, particulièrement perceptible lorsque mon <h2>élément était enveloppé dans une deuxième ligne.

J'ai appliqué une classe à a <div>dans infoWindow et j'ai changé les polices en une police système générique (dans mon cas, Helvetica) par rapport à une police Web @ font-face qu'elle utilisait. Problème résolu.

Taylor Dewey
la source
Malheureusement, ce n'est pas une solution fiable. Le problème est connu pour se produire avec Arial et d'autres polices standard également.
Simon East
0 
//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);
Andrew Samuelsen
la source
0

Ajoutez un min-heightà votre élément de classe infoWindow.

Cela résoudra le problème si vos infoWindows sont toutes de la même taille.

Sinon, ajoutez cette ligne de jQuery à votre fonction de clic pour infoWindow:

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');
Jason
la source
Vous êtes sur la bonne voie. La hauteur minimale de infoWindow ne vous aidera pas, car ce DIV est contenu dans un DIV qui déborde. Donc, définir une hauteur minimale le fera défiler à chaque fois.
horloge247
En regardant la structure du DOM, c'est en fait le GRANDPARENT de la classe infoWindow qui nécessite la suppression du débordement. Mon code ressemble à quelque chose comme: infoCallBack = function infoCallback (infowindow, marker) {return function () {/ * le code pour afficher la fenêtre va ici, puis mon correctif de débordement suivant * / setTimeout (function () {$ ('. Infowindow') .parent (). parent (). css ('débordement', '');}, 25); }} Ce qui déclenche essentiellement la correction de la fenêtre info après 25 ms, suffisamment de temps pour qu'elle s'affiche.
horloge247
0

Je ne pouvais pas le faire fonctionner sous aucune forme ou forme, j'incluais 3 divs dans la boîte. Je les ai enveloppés dans un div externe, avec des largeurs et des hauteurs correctement réglées, et rien n'a fonctionné.

À la fin, je l'ai corrigé en définissant le div en haut à gauche absolu, puis avant le div, j'ai défini deux images, une de 300 pixels de large et 1 px de haut, une de 120 pixels de haut et 1 px de large, d'un gif transparent.

Il s'est alors mis à l'échelle correctement!

C'est moche mais ça marche.

Vous pouvez également 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 qu'elle contenait un formulaire, ce n'était donc pas une option ...

SP...
la source
0

Je pense que ce comportement est dû à un style css dans un conteneur externe, j'ai eu le même problème mais je l'ai résolu en utilisant un div interne en y ajoutant un peu de rembourrage, je sais que c'est bizarre mais cela 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;
}
Maurizzzio
la source
0

J'avais un élément en ligne (une balise a) directement à l'intérieur du divavec style="overflow:auto"[...enveloppé dans unp balise et corrigé.

Il semble que tout élément en ligne qui n'est pas imbriqué dans un élément de bloc directement à l'intérieur de l'infowindow provoquera cela.

DGB
la source
0

Ma réponse est d'ajouter un écouteur (en utilisant addListenerOnce) pour vérifier si l'infoWindow a été ajoutée au DOM, puis d'ouvrir à nouveau l'infoWindow (pas besoin de la 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);
            });
borbulon
la source
0

L'ajout de ce qui suit à mon CSS a fait l'affaire pour moi:

white-space: nowrap;
ruggershawn
la source
Cela supprimera l'emballage sur les longues lignes. Je ne pense pas que ce soit une solution appropriée pour beaucoup de gens.
Simon East
0

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 l'infowindow, uniquement du remplissage.

  • Définissez une largeur maximale pour l'infowindow:

    this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

  • Enveloppez le contenu de l'infowindow avec

    <div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

    (modifiez la largeur minimale de la valeur que vous avez définie dans la fenêtre d'information maxWidth)

Je l'ai testé et cela a fonctionné sur tous les navigateurs, et j'avais plus de 400 marqueurs ...

Daniel Castilla
la source
Cela définit une largeur fixe pour l'InfoWindow (plus fluide), ce qui est une solution, mais pas idéale.
Simon East
0

Je sais que beaucoup d'autres personnes ont trouvé des solutions qui ont fonctionné pour leur cas particulier, mais comme aucune d'elles n'a fonctionné pour mon cas particulier, j'ai pensé que cela pourrait être utile à quelqu'un d'autre.

Quelques détails:

J'utilise l'API google maps v3 sur un projet où le CSS en ligne est quelque chose que nous voulons vraiment éviter. Mes infowindows fonctionnaient pour tout sauf pour IE11, où la largeur n'était pas calculée correctement. Cela a entraîné des débordements de div, qui ont déclenché des barres de défilement.

J'ai dû faire trois choses:

  1. Supprimer tout affichage: règles de style de bloc en ligne de tout ce qui se trouve à l'intérieur du contenu de l'infowindow (j'ai remplacé par display: block) - j'ai eu l'idée d'essayer cela à partir d'un fil (que je ne peux plus trouver) où quelqu'un avait le même problème avec IE6.

  2. Transmettez le contenu en tant que nœud DOM plutôt qu'en tant que chaîne. J'utilise jQuery, donc je pourrais le faire en remplaçant: infowindow.setContent(infoWindowDiv.html());par infowindow.setContent($(infoWindowDiv.html())[0]); Cela s'est avéré être le plus simple pour moi, mais il existe de nombreuses autres façons d'obtenir le même résultat.

  3. Utilisez le hack "setMaxWidth" - définissez l'option MaxWidth dans le constructeur - la définition de l'option plus tard ne fonctionne pas. Si vous ne voulez pas vraiment une largeur maximale, définissez-la simplement sur un très grand nombre.

Je ne sais pas pourquoi ceux-ci ont 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.

thomij
la source
0

Il n'était pas acceptable pour moi de coder en dur la largeur et la hauteur de la fenêtre d'informations, ou de définir white-space: nowraplemaxWidth solution ne m'a pas aidé et tout le reste ne fonctionnait pas ou était inapproprié pour mon cas d'utilisation.

Ma solution était de définir le contenu, d'ouvrir la fenêtre puis, lorsque l' domreadyévénement est déclenché, de définir leheight propriété CSS du contenu sur quelle que soit la hauteur, puis de forcer Google Maps à redimensionner l'InfoWindow en conséquence.

infoWindowest l'objet InfoWindow, $infoWindowContentsest un objet Jquery du contenu que je veux y mettre, mapest mon objet Map. markerest 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 faire redimensionner une InfoWindow google-maps pour l'adapter au contenu qui y est placé? )

tremby
la source
0

Après avoir perdu du temps et lu pendant un moment, je voulais juste quelque chose de simple, ce css fonctionnait pour mes besoins.

.gm-style-iw > div { overflow: hidden !important; }

Ce n'est pas non plus une solution instantanée, mais mettre en vedette / commenter le problème pourrait leur permettre de le résoudre, car ils pensent qu'il est résolu: http://code.google.com/p/gmaps-api-issues/issues/detail?id= 5713

Dan
la source
Cela coupe le contenu dans certains cas. :-( Dans ce violon sur Chrome 38 sous Windows, le "dddd" est complètement coupé: jsfiddle.net/simoneast/dckxp62o/4
Simon East
0

Et bien c'est celui qui a fait l'affaire pour moi:

.gm-style-iw>div {
    overflow: visible !important;
}

Réglage avec overflow: visiblele .gm-style-iwfait aggravé le problème! J'ai remarqué dans l'inspecteur des outils de développement Chrome qu'il y a deux div à l'intérieur de l' .gm-style-iwélément, tous deux qui ontoverflow: auto définis par défaut.

J'affiche beaucoup de texte au format HTML dans mes InfoWindows, c'est peut-être pourquoi les autres solutions ne fonctionnent pas du tout pour moi.

Magnus W
la source