Come funziona la formattazione CSS in una bolla di Google Maps?

Question

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.

Answer 1

Come suggerito, sono entrato con Firebug per vedere cosa stava succedendo. Sembra che Google stia facendo due cose odiose:

1. Elimina tutti gli attributi di classe dal mio HTML.
2. 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.

Answer 2

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 .

Answer 3

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.

Answer 4

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.