Comment CSS de mise en forme dans une carte Google Maps de la bulle de travail?
Je suis en utilisant KML et le GGeoXml objet de superposition des formes sur un intégré à Google map. Les repères figurant dans le fichier KML ont coutume de l'information descriptive qui s'affiche dans les ballons.
<Placemark>
<name />
<description>
<![CDATA[
<div class="MapPopup">
<h6>Concession</h6>
<h4>~Name~</h4>
<p>Description goes here</p>
<a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
</div>
]]>
</description>
<styleUrl>#masterPolyStyle</styleUrl>
...Placemarks go here ...
</Placemark>
So far So good - les fenêtres pop-up de se montrer et d'avoir le bon texte. Voici la chose étrange: je suis en train d'utiliser CSS pour mettre en forme ce qui se passe dans les fenêtres pop-up, et il travaille à mi-chemin.
Spécifiquement:
- La
<h6>
et<h4>
éléments sont rendus avec les couleurs et les images d'arrière-plan j'ai précisé dans ma feuille de style. - Tout s'affiche en Arial, pas dans la police j'ai précisé dans mon CSS.
- Les noms de classe semblent être ignorées (par exemple, aucun des
a.Button
mise en forme est appliquée; si je définir un style comme celui ci-dessous, il est ignoré.)div.MapPopup { background:pink; }
Des idées? Je n'aurais pas été surpris de la CSS de ne pas travailler du tout, mais c'est bizarre qu'il soit uniquement en partie les travaux.
Mise à jour
Voici une capture d'écran pour mieux illustrer ce. J'en ai reproduit le <div class="MapPopup">
balisage au bas de la page (en jaune), pour montrer comment il devrait être rendu en fonction de mon CSS.
Avez-vous inspecté l'élément avec Firebug? Il va vous montrer les classes sur lesquelles sont appliqués et à partir de laquelle le fichier/ligne.
OriginalL'auteur Herb Caudill | 2008-10-15
Vous devez vous connecter pour publier un commentaire.
Comme l'a suggéré, je suis allé avec Firebug pour voir ce qu'il se passe. Il ressemble à Google est en train de faire deux odieux choses:
Voici mon code HTML avec le premier couple de papiers, inséré par Google:
Comme vous pouvez le voir, mes cours (par ex.
MapPopup
dans mon premierdiv
,Button
etc. dans le<a>
tag) ont tous été supprimés.Sachant cela, je vais être capable de travailler autour de Google, de l'interférence, à l'aide de
!important
et en ciblant le conteneurdiv
pour l'ensemble de la carte - encore, c'est ennuyeux, et de façon inattendue maladroit en provenance de Google.OriginalL'auteur Herb Caudill
Plus liés obnoxiousness liées à l'HTML dans un fichier KML à
<description>
bloc: Tout les liens sont donnés à l'attributtarget="_blank"
, si vous l'aimez ou pas. Je suis actuellement en train d'explorer des façons d'annuler ce, à l'aide de jQuery, mais qu'une traînée. Je ne comprends vraiment pas pourquoi Google se sent le besoin de manipuler ce format HTML.Voir aussi ce fil de discussion sur le site officiel du Groupe Google.
OriginalL'auteur Herb Caudill
J'ai eu des problèmes similaires. Je ne sais pas comment vous la mise en œuvre de votre Marqueur, ou si vous utilisez l'InfoWindow, ou .addListener, mais la façon que j'ai eu pour obtenir le style css à travailler à l'intérieur de la "pop-up bulle" (sur le Marqueur) est d'utiliser ce qui est appelé "inline style." J'ai donc une variable que je passe à l'InfoWindow. En supposant que vous avez initialisé une variable "marqueur" avec quelques options, et pour avoir la "carte" de l'instance créée, un exemple de code devrait ressembler à ceci:
Je connais le css, le code de style est lourd, mais je n'ai pas trouvé une façon d'utiliser compliqué le style css à l'intérieur de la "bulle" à l'aide de css dans la tête, ou à partir d'une feuille de style Il y a toujours des conflits, et certaines fonctions ne s'affichent pas correctement.
OriginalL'auteur Mitchell
Ma première hypothèse est que vous rencontrez un problème avec CSS spécificité. Il y a un bon article sur le http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, donc si vous pouvez inclure un élément conteneur ID, qui peut de l'aide.
Laissez-moi savoir si ce n'est pas le problème et je vais avoir plus d'idées.
<div class="MapPopup">
doit avoir un fond jaune - qui n'est pas un problème de spécificité.Je n'ai jamais eu un problème avec le style, et le fait que certains styles sont appliqués m'amène à croire qu'ils sont en train d'être remplacées par d'autres styles. Comme Zack suggéré ci-dessus, inspecter l'élément avec Firebug et voir ce qui est vraiment touchant la police, etc.
OriginalL'auteur Eric Wendelin