Twitter Bootstrap CSS che interessa Google Maps

147

Sto usando Twitter Bootstrap e ho una mappa di Google.

Le immagini sulla mappa, ad esempio un marcatore, sono distorte dal CSS in Bootstrap.

Nel CSS Bootstrap c'è:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
}

Quando disabilito la max-widthproprietà tramite Firebug, l'immagine dell'indicatore appare come normale. Come posso evitare che il CSS Bootstrap influisca sulle immagini delle mappe di Google?

google-maps twitter-bootstrap css

— raklos
fonte

rispondi qui: github.com/zurb/foundation/issues/26

— raklos

187

Con Bootstrap 2.0, questo sembrava fare il trucco:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
fonte

6

Assicurati di aggiungere #mapCanvas img { width: auto; display:inline; }come indicato di seguito da @nodrog

— jlb

Dalle note di rilascio di Bootstrap 2.0.3: "Corretta la regressione nel supporto delle immagini reattive a partire dalla 2.0.1. Abbiamo aggiunto nuovamente la larghezza massima: 100%; alle immagini per impostazione predefinita. L'abbiamo rimosso nella nostra ultima versione da quando avevamo persone lamentarsi dell'integrazione di Google Maps e di altri progetti, ma ora stiamo prendendo una posizione diversa su queste cose e richiederemo agli sviluppatori di apportare queste modifiche alla loro fine ".

— kevinwmerritt,

Cordiali saluti: Note di rilascio di Bootstrap 2.0.4: "Aggiunti CSS speciali per impedire la larghezza massima: 100%; sulle immagini da errori nel rendering di Google Maps."

— kevinwmerritt,

È strano che alla fine abbiano deciso di codificare l'ID, non usare invece la classe

— zerkms il

1

#mapCanvas non ha funzionato per me. Ho appena usato la mia classe .map che ho usato come contenitore di Google Maps e ha fatto il trucco. GRAZIE!

— Fydo,

80

C'è anche un problema con i selettori a discesa per terreno e sovrapposizioni, l'aggiunta di entrambi risolverà i problemi ...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
}

Il secondo stile risolverà altri problemi con il terreno e la casella di sovrapposizione in alcuni browser.

— Nodrog
fonte

Sì ! tutto sembra risolto con questo combinato con la risposta contrassegnata come "accettata" sopra. Grazie.

— Mat,

funziona come un incantesimo in Firefox 17 ma non in Chrome 23. Non so perché, ma ho trovato la soluzione basta aggiungere questo:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Sei un genio. Grazie mille. Questo mi stava facendo impazzire :-)

— Orso

20

Dai un ID alla tua tela della mappa map_canvas.

Questo commit bootstrap include la max-width: nonecorrezione per l'id map_canvas(ma non funzionerà per mapCanvas).

— robd
fonte

Penso che solo per cambiare l'id sia necessario in v2.2.2

— jacktrades

non riesco a trovare tale id nel file css

— Muhaimin

@robd: Solo per curiosi, perché non funzionerà se non con map_canvas.

— ArunRaj,

@ArunRaj perché la correzione in bootstrap è codificata nell'id #map_canvas (vedere il commit collegato). In ogni caso, questa risposta è probabilmente obsoleta ora dato che ha quasi 2 anni.

— robd,

11

Nessuna di queste risposte ha funzionato per me, quindi sono andato al mio div e ho guardato i suoi figli ho visto un nuovo div con classe "gm-style", quindi ho inserito questo nel mio CSS:

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..e questo ha risolto il problema per me.

— Christopher Dow
fonte

+1 questa è l'unica risposta che ha funzionato per me per correggere gli strani controlli "zoom". (Bootstrap 2)

— philfreo,

Ha funzionato anche per me. Good spotting :)

— jeje

Grazie, ha funzionato anche per me. L'unica risposta che ha funzionato per me per correggere gli strani controlli "zoom". (con Fondazione 5)

— Steffi,

3

Volete scavalcare la regola della larghezza massima nella sezione CSS usando la larghezza massima: nessuna; Questo sembra essere il modo per aggirare questo problema

— Pawpoint
fonte

2

La modifica di #MapCanvas non ha funzionato per noi utilizzando gmap4rails gem, ma ha funzionato quando siamo passati a

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

— Sam Joseph
fonte

2

Sto usando gmaps4rails, questa correzione l'ha fatto per me:

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

— Benjamin Crouzier
fonte

1

l'ultimo twitter bootstrap 2.0.4 include direttamente questa correzione.

Se stai avvolgendo i tuoi contenuti in a (div class = "container") come nella pagina demo di Twitter Bootstrap, dovresti aggiungere uno style = "height: 100%"

— redochka
fonte

1

C'è anche un problema con la stampa di mappe usando Stampa in qualsiasi browser. Il img { max-width: 100% !important; }non saranno fissati dal codice di cui sopra: è necessario aggiungere una !importantdichiarazione in questo modo:

@media print {
  img {
    max-width: auto !important;
  }
}

— Tempranova
fonte

0

Ho anche dovuto disattivare box-shadow e, a causa dell'ordine delle mie inclusioni, ho aggiunto la! Bandiera importante.

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}

— Redtopia
fonte

1

Questo ha funzionato per me. Se voterai qualcuno, almeno dovresti dire il perché.

— Redtopia,

0

Tutte le risposte sono state max-widht: nessuna

per me, altezza massima: eredità lavorata .....

Le persone usano #map, #map_canvas, ecc. Guarda il tuo genitore div. Se è blu, allora sarà #blue img {}

— user2060451
fonte