Disabilita gli stili CSS in Google Maps (3.14) Infowindow

Question

Nella versione 3.14 di google maps sono state aggiunte alcune nuove regole css per la finestra personalizzata. Io uso il plugin infobox e ora molti dei miei elementi sono sovrascritti.

Ad esempio:

.gm-style div,.gm-style span,.gm-style label,.gm-style a { 
    font-family: Roboto,Arial,sans-serif; 
    font-size:11px; 
    font-weight:400 
} 

.gm-style div,.gm-style span,.gm-style label { 
    text-decoration:none 
} 

.gm-style a,.gm-style label { 
    display:inline 
} 

.gm-style div { 
    display:block 
} 

.gm-style img { 
    border: 0; 
    padding: 0; 
    margin: 0 
} 

C'è un modo per cambiare la situazione, tranne che devo sovrascrivere questo stili Google tramite "importante"?

EDIT:

Il font "Roboto" sarà anche caricato. Se ti interessano le prestazioni, allora non è molto bello.

EDIT2:

Ok, importante non è necessario. La sovrascrittura degli stili di google è anche possibile aumentando la specificità dei selettori CSS. Ma questo non cambia che devo sovrascrivere tutti gli stili di google. E verrà caricato anche il carattere Roboto.

Answer 1

jQuery('.gm-style').removeClass('gm-style'); 

O

trovare questo in file di /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker" 

e sostituirla con

<span class="overlay-simple-marker" 

Answer 2

Ho avuto lo stesso problema e la risposta di Emad ha funzionato bene per me dopo aver aggiunto un listener di eventi .

google.maps.event.addListener(map, 'idle', function() 
{ 
    jQuery('.gm-style').removeClass('gm-style'); 
}); 

Il problema è che non riesco ancora a vedere alcun modo per interrompere il caricamento del carattere Roboto da parte di Google.

EDIT: Beh ... c'è un modo abbastanza semplice per fermarlo. Basta usare GET per caricare una versione precedente delle API di Google in questo modo:

<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script> 

In questa API verion, Google non cambierà lo stile di gm a tutti. Quindi non è necessario sovrascrivere alcuna classe o stile.

Answer 3

Da quello che posso vedere le nuove regole css sono garantite per rompere lo stile per tutti i marcatori, i controlli e le finestre di informazioni in tutto il web, quindi forse questo non rimarrà nella versione 3.exp abbastanza a lungo diventare parte di una versione ufficiale. Nel frattempo per proteggerti contro i cambiamenti di rottura come questo. Probabilmente dovresti fare due cose:

1 Imposta una versione sul tuo link alle mappe api. Qualcosa come

<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script> 

assicurerà di accedere sempre alla versione corrente dell'API delle mappe. Se vuoi essere più prudente puoi anche specificare le versioni principali e secondarie. Se si specifica una versione principale e secondaria, è possibile verificare gli aggiornamenti all'API delle mappe come parte della normale pianificazione delle versioni.Se accedi all'API delle mappe come parte di un'applicazione mobile incapsulata, non puoi controllare quando i tuoi utenti aggiornano la tua app, quindi probabilmente vorrai semplicemente impostare v = 3 e quindi cercare di isolare la tua app dai cambiamenti nelle mappe css (vedere di seguito)

2 Personalizza i tuoi indicatori, controlli o finestre di informazioni in modo da controllare meglio lo stile. Ad esempio, se si dispone di un indicatore con html come

<div class="my-marker">...</div> 

È possibile impedire l'API mappe da impostazione dimensione del carattere da una regola CSS come

div.my-marker { 
    font-size: 18px; 
    ... 
} 

nota, dato stili API di Google Maps come

dovrai specificare le dimensioni assolute di elementi, misure relative, come gli em non ti proteggeranno da potenziali modifiche, ad esempio, font-size: 11px;

Answer 4

Questa è una modifica della versione 3.14, perché gli elementi sono ora disegnati da CSS anziché inline.

I caratteri predefiniti utilizzati nelle etichette e negli elementi dell'interfaccia utente sono stati modificati. Gli elementi UI sono in stile CSS dall'API, il che significa che i CSS personalizzati che scelgono gli elementi DOM sulla mappa potrebbero richiedere delle correzioni se si desidera applicare questi parametri al posto del nuovo stile predefinito.

Vedere changes in visual refresh per ulteriori dettagli.

Questa non è una mossa molto buona da Google maps, a causa dell'uso di selettori discendenti (su un div figlio!), Che non sono affatto efficienti.

Per risolvere questo problema è necessario qualcosa di molto specifico come la seguente:

Dato HTML

<div class="gm-style"> 
<div class="myClass-parent"> 
    <div class="myClass">Lorem ipsum dolor</div> 
</div> 
</div> 

Provare qualcosa di simile

.myClass-parent > div.myClass 
{ 
    font-weight:600; 
} 

Semplicemente styling div.myClass potrebbe non funzionare.

Answer 5

InfoBox fornisce anche elemento di stile in options

var labelOptions = { 
    content: label, 
    boxStyle: { 
    //Insert style here 
    }, 
    . 
    . 
} 

Answer 6

In risposta a Dorr soluzione Baums, per coloro che utilizzano il prototipo js è possibile utilizzare il seguente per rimuovere questa classe.

Answer 7

Poiché Google ha modificato il comportamento delle versioni precedenti, non funzionerà più per caricare la versione 1.1. I nuovi stili e i caratteri-roboto verranno sempre caricati. La mia nuova soluzione è quella di salvare ogni foglio di stile in un file separato e includere la seguente script:

google.maps.event.addListener(map, 'idle', function() 
{ 

    $('style').remove(); 

}); 

Questo eliminerà ogni stile-tag scritto da Googles api e mantiene il proprio stile salvare, ma il tipo di carattere Roboto sarà ancora caricato . Non vedo alcun modo per fermarlo.

Answer 8

Anche io ho avuto problemi con gli stili gm aggiunti e il caricamento dei caratteri di Roboto da quando è stato introdotto 3.14.

Trovato questo problema segnalato come "bug" nella codebase dell'API di Google Maps. Si prega di stella e commentarlo in http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal&groupby=&sort=&id=6078

Answer 9

Per quelli che seguono questo problema, vedere il post di Google in questa discussione: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Answer 10

Ho fissato questo sulla mia mappa facendo quanto segue. Spero che lo aiuti

1. Crea il mio div all'interno del infowindow e imposta il tuo css.

<div class='iw'>infowindow content</div>

2. Impostare il collegamento al file CSS PRIMA! l'api di Google nella testata della pagina.

3. Tenere premuto Ctrl & fare clic su Aggiorna sul browser per forzare l'aggiornamento completo per caricare eventuali modifiche css. Stavo usando Firefox.