Come funziona la formattazione CSS in una bolla di Google Maps?
-
03-07-2019 - |
Domanda
Sto usando KML e l'oggetto GGeoXml per sovrapporre alcune forme su una mappa di Google incorporata. I segnaposto nel file KML contengono alcune informazioni descrittive personalizzate che vengono visualizzate nei palloncini.
<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>
Finora tutto bene: i popup vengono visualizzati e contengono il testo corretto. Ecco la cosa strana: sto cercando di utilizzare i CSS per formattare ciò che accade nei popup e funziona a metà strada.
In particolare:
- Gli elementi
<h6>
e<h4>
sono resi usando i colori e le immagini di sfondo che ho specificato nel mio foglio di stile. - Tutto appare in Arial, non nel carattere che ho specificato nel mio CSS.
-
I nomi delle classi sembrano essere ignorati (ad es. nessuna della
a.Button
formattazione viene applicata; se definisco uno stile come quello sotto, viene ignorato.)div.MapPopup { background:pink; }
Qualche idea? Non sarei stato sorpreso che il CSS non funzionasse affatto, ma è strano che funzioni solo in parte.
Aggiornamento
Ecco uno screenshot per illustrare meglio questo. Ho riprodotto il markup <div class="MapPopup">
più in basso nella pagina (in giallo), per mostrare come dovrebbe essere visualizzato secondo il mio CSS.
Soluzione
Come suggerito, sono entrato con Firebug per vedere cosa stava succedendo. Sembra che Google stia facendo due cose odiose:
- Elimina tutti gli attributi di classe dal mio HTML.
- Sta lanciando tutti i tipi di stili hard-coded in giro.
Ecco il mio HTML insieme alla prima coppia di wrapper inseriti da Google:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>
Come puoi vedere, le mie lezioni (ad es. MapPopup
nelle mie prime div
, Button
ecc. nel tag <a>
) sono state tutte eliminate.
Sapendo questo, sarò in grado di aggirare l'interferenza di Google, usando !important
e indirizzando il contenitore <=> per l'intera mappa - tuttavia, questo è fastidioso e inaspettatamente impacciato proveniente da Google.
Altri suggerimenti
Odiosità più correlata all'HTML in un blocco KML <description>
: a qualsiasi link viene assegnato l'attributo target="_blank"
, che ti piaccia o no. Attualmente sto esplorando i modi per annullarlo, usando jQuery, ma che resistenza. Non capisco davvero perché Google abbia la necessità di manomettere questo HTML.
Vedi anche questa discussione nel gruppo Google ufficiale .
Ho avuto problemi simili. Non so come stai implementando il tuo Marker, o se stai usando InfoWindow o .addListener, ma in questo modo ho dovuto far funzionare lo stile CSS all'interno della & Quot; pop up bubble & Quot ; (sopra il Marker) è usare quello che viene chiamato " stile in linea. " Quindi ho una variabile che passo in InfoWindow. Supponendo di aver inizializzato una variabile & Quot; marker & Quot; con alcune opzioni e avere " map " istanza creata, un codice di esempio sarebbe simile al seguente:
/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/
var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
/*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});
So che il codice di stile CSS è ingombrante, ma non ho trovato un modo per usare lo stile CSS complicato all'interno di " la bolla pop-up " usando css in testa o da un foglio di stile Ci sono sempre conflitti e alcune funzionalità non vengono visualizzate correttamente.
La mia prima ipotesi è che stai riscontrando un problema con la specificità CSS. C'è un buon articolo su http : //www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ , quindi se puoi includere un ID elemento contenitore, può aiuto.
Fammi sapere se questo non si rivela essere il problema e avrò altre idee.