Twitter Bootstrap CSS, das sich auf Google Maps auswirkt

147

Ich verwende Twitter Bootstrap und habe eine Google-Karte.

Bilder auf der Karte, z. B. Markierungen, werden vom CSS in Bootstrap verzerrt.

Im Bootstrap-CSS gibt es:

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

Wenn ich die max-widthEigenschaft mit Firebug deaktiviere , wird das Markierungsbild wie gewohnt angezeigt. Wie kann ich verhindern, dass das Bootstrap-CSS die Google Maps-Bilder beeinflusst?

google-maps twitter-bootstrap css Raklos
quelle

Antwort hier: github.com/zurb/foundation/issues/26

Raklos

187

Mit Bootstrap 2.0 schien dies den Trick zu tun:

#mapCanvas img {
  max-width: none;
}

kevinwmerritt
quelle

6

#mapCanvas img { width: auto; display:inline; }Stellen Sie sicher, dass Sie wie unten erwähnt von @nodrog

jlb

In den Versionshinweisen zu Bootstrap 2.0.3 heißt es: "Die Regression bei der Unterstützung reaktionsfähiger Bilder ab 2.0.1 wurde behoben. Wir haben die maximale Breite: 100%; standardmäßig wieder zu Bildern hinzugefügt. Wir haben sie in unserer letzten Version entfernt, da wir Leute hatten Wir beschweren uns über die Integration von Google Maps und andere Projekte, aber wir nehmen jetzt eine andere Haltung zu diesen Dingen ein und werden von den Entwicklern verlangen, dass sie diese Verbesserungen am Ende vornehmen. "

Kevinwmerritt

Zu Ihrer Information: Versionshinweise zu Bootstrap 2.0.4: "Spezielles CSS hinzugefügt, um eine maximale Breite von 100% zu verhindern. Bei Bildern wird das Rendern von Google Maps durcheinander gebracht."

Kevinwmerritt

Das ist seltsam, dass sie sich endlich entschieden haben, die ID fest zu

codieren

1

#mapCanvas hat bei mir nicht funktioniert. Ich habe gerade meine .map-Klasse verwendet, die ich als Google Maps-Container verwendet habe, und sie hat es geschafft. VIELEN DANK!

Fydo

80

Es gibt auch ein Problem mit den Dropdown-Selektoren für Gelände und Überlagerungen. Wenn Sie beide hinzufügen, werden die Probleme behoben ...

#mapCanvas img { 
  max-width: none;
}

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

Der zweite Stil führt in einigen Browsern zu anderen Problemen mit dem Gelände und der Überlagerungsbox.

Nodrog
quelle

Ja ! Alles scheint fest mit diesem zu sein, kombiniert mit der Antwort, die oben als "akzeptiert" markiert ist. Vielen Dank.

Mat

funktioniert wie ein Zauber in Firefox 17, aber nicht in Chrome 23. Ich weiß nicht warum, aber ich fand die Lösung, füge einfach $('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

Folgendes

Du bist ein Genie. Vielen Dank. Das hat mich wahnsinnig gemacht :-)

Bär

20

Geben Sie Ihrer Map Canvas Div eine ID von map_canvas.

Dieses Bootstrap-Commit enthält das max-width: noneUpdate für die ID map_canvas(funktioniert jedoch nicht mapCanvas).

robd
quelle

Ich denke, nur um die ID zu ändern, ist in v2.2.2

Jacktrades

Ich kann solche ID nicht in CSS-Datei finden

Muhaimin

@robd: Nur für Neugierige, warum es nur für map_canvas funktioniert.

ArunRaj

@ArunRaj, da der Fix im Bootstrap fest mit der ID #map_canvas codiert ist (siehe das verknüpfte Commit). In jedem Fall ist diese Antwort wahrscheinlich veraltet, da sie fast 2 Jahre alt ist.

Robd

11

Keine dieser Antworten funktionierte für mich, also ging ich zu meinem Div und sah seine Kinder an. Ich sah einen neuen Div mit der Klasse "gm-style", also habe ich dies in mein CSS aufgenommen:

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

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

..und das hat das Problem für mich gelöst.

Christopher Dow
quelle

+1 Dies ist die einzige Antwort, die für mich funktioniert hat, um die seltsamen "Zoom" -Steuerelemente zu korrigieren. (Bootstrap 2)

Philfreo

Hat auch für mich gearbeitet. Gute

Beobachtung

Danke, hat auch für mich gearbeitet. Die einzige Antwort, die für mich funktioniert hat, um die seltsamen "Zoom" -Regler zu reparieren. (mit Stiftung 5)

Steffi

3

Sie möchten die Max-Width-Regel im CSS-Abschnitt überschreiben, indem Sie Max-Width verwenden: none; Dies scheint der Weg um dieses Problem zu sein

Pawpoint
quelle

2

Das Ändern der #MapCanvas hat bei uns mit gmap4rails gem nicht funktioniert, aber bei der Umstellung auf

.map_container img {
    max-width: none;
}

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

Sam Joseph
quelle

2

Ich benutze gmaps4rails, dieses Update hat es für mich getan:

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

Benjamin Crouzier
quelle

1

Der neueste Twitter Bootstrap 2.0.4 enthält diesen Fix direkt.

Wenn Sie Ihren Inhalt wie auf der Demoseite des Twitter-Bootstraps in a (div class = "container") einbinden, sollten Sie einen style = "height: 100%" hinzufügen.

Redochka
quelle

1

Es gibt auch ein Problem beim Drucken von Karten mit Print in einem beliebigen Browser. Das img { max-width: 100% !important; }wird durch den obigen Code nicht behoben: Sie müssen eine Deklaration wie folgt hinzufügen !important:

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

Tempranova
quelle

0

Ich musste auch Box-Shadow ausschalten und aufgrund der Reihenfolge meiner Includes habe ich die! Wichtige Flagge hinzugefügt.

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

Redtopia
quelle

1

Das hat bei mir funktioniert. Wenn Sie jemanden abwählen wollen, sollten Sie zumindest sagen, warum.

Redtopia

0

Alle Antworten waren maximal: keine

für mich max-höhe: erben funktioniert .....

Die Leute benutzen #map, #map_canvas usw. Sehen Sie sich Ihr übergeordnetes div an. Wenn es blau ist, ist es #blue img {}

user2060451
quelle

Twitter Bootstrap CSS, das sich auf Google Maps auswirkt

Antworten: