Die Zoomsteuerung von Google Maps ist durcheinander

172

Ich verwende die Google Maps-API (v.3), um eine Karte mit einigen Markierungen anzuzeigen. Ich habe kürzlich festgestellt, dass das Steuerelement zum Zoomen der Karte durcheinander ist (das war nicht immer so). Ich habe keine Ahnung, was die Ursache ist.

Geben Sie hier die Bildbeschreibung ein

Aktualisieren

Dieser Beitrag hatte ursprünglich einen Link zu einer Seite, auf der Sie das Problem anzeigen konnten, aber der Link ist jetzt defekt, daher habe ich ihn entfernt.

javascript css google-maps Dónal
quelle
12
Dieses Problem tritt bei Bootstrap nicht auf, wenn Sie is map_canvas als Map-Div-ID verwenden.
Ben

Antworten:

109

Ihr CSS hat es vermasselt. Entfernen Sie max-width: 100%;in Zeile 814, und die Zoomsteuerung sieht wieder gut aus. Um solche Fehler zu vermeiden, verwenden Sie spezifischere Selektoren in Ihrem CSS.

Konrad Dzwinel
quelle
12
Dies gilt auch, wenn Sie den Bootstrap von Twitter verwenden. Diese haben eine img {max-width: 100%}, die dies durcheinander bringt. Es sollte in der 2.0.2-Filiale behoben werden
Ken
1
Viele CSS-Reset-Dateien wurden ebenfalls img {max-width:100%;}festgelegt.
Avesse
Genial! Auch ich hatte Probleme damit und bin erst kürzlich zu Bootstrap CSS übergegangen. Mucho ++++
Kevin Mansel
Hatte das gleiche Problem mit jquery mobile. Sie haben .ui-mobile img {max-width: 100%;}in ihrem CSS, die entfernt werden mussten.
Jeremy
28
Um das bei Bootstrap zu beheben, geben Sie einfach Ihre Karten div Klasse Google-Maps
Samy Massoud
80 
#myMap_canvas img {
    max-width: none;
}

Es wurde für mich behoben, aber ich wollte auch auf den Kommentar zu der Frage von @Ben hinweisen: "Dieses Problem tritt bei Bootstrap nicht auf, wenn Sie is is map_canvas als Map Div ID verwenden." Er hat recht. Ich verwende kein Bootstrap, aber das Problem trat auf, nachdem ich die Div-ID geändert hatte.

Durch Zurücksetzen auf map_canvas wurde das Problem ohne Änderung der maximalen Breite behoben.

<div id="map_canvas"></div>
Ausgerichtet
quelle
21

Wenn Sie Bootstrap verwenden, geben Sie ihm einfach die Klasse "Google Maps". Das hat bei mir funktioniert.

Alternativ können Sie alles für das Google Map Div als eine Art Last-Resort-Lösung zurücksetzen:

HTML:

<div class="mappins-map"><div>

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
woens
quelle
16

Teilen Sie einfach @ Max-Favilli Antwort:

Mit der neuesten Version von Google Maps API benötigen Sie Folgendes:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

Danke an @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

Poostchi
quelle
5

Wenn Sie ein Twitter Bootstrap-Benutzer sind, sollten Sie diese Zeile zu Ihrem CSS hinzufügen:

.gmnoprint img { max-width: none; }
Fernando Prieto
quelle
4

Ich hatte auch dieses Problem und benutzte 

.google-maps img {
    max-width: none;
}

hat nicht funktioniert. Ich habe schließlich verwendet

.google-maps img {
    max-width: none !important;
}

und es funktionierte wie ein Zauber.

Dylan Becks
quelle
! wichtig ist möglicherweise nicht erforderlich, wenn Ihr Selektor spezifischer ist.
Voodoocode
2

Wenn Sie das reine CSS von Yahoo verwenden, geben Sie Ihrem div die Klasse "google-maps" wie Bootstrap und fügen Sie diese Regel in Ihr CSS ein:

.google-maps img {
    max-width: none;
    max-height: none;
}

Soweit ich das beurteilen kann, hat Pure CSS keine Möglichkeit, dieses Problem selbst zu beheben.

dmzza
quelle
0

Diese Optionen, die ihr mir gesagt habt, haben für meine Website nicht funktioniert.

Ich benutze Bootstrap V3 und habe mich auf die Funktionalität konzentriert. Der Hauptgrund war, dass ich meiner Karte eine andere ID gegeben hatte als die CSS-Datei, mit der die Zoomleiste mit dem gelben Streetvieuw-Typen angezeigt wurde

Ich habe map_canvas in mapholder umbenannt und dann hat es bei mir funktioniert! Trotzdem danke für die Hinweise, dass ich in die CSS-Dateien schauen sollte!

Impiriumjbb
quelle
0

Ich habe alle oben genannten Lösungen und andere aus anderen Foren ohne Erfolg ausprobiert. Es war wirklich ärgerlich, weil ich eine andere Nicht-Wordpress-Site habe, auf der der Code perfekt funktioniert hat. (Ich habe versucht, eine Google-Karte auf einer Wordpress-Seite anzuzeigen, aber die Steuerelemente für Zoom und Streetview waren verzerrt.)

Die Lösung bestand darin, eine neue HTML-Datei zu erstellen (kopieren, den gesamten Code in Notepad einfügen und xyz.html nennen, als Typ "alle Dateien" speichern). Laden Sie es dann auf die Website hoch / ftp hoch, richten Sie eine neue Wordpress-Seite ein und verwenden Sie eine Einbettungsfunktion. Gehen Sie beim Bearbeiten der Seite zum Texteditor (nicht zum visuellen Editor) und kopieren / tippen Sie:

http: // page URL width = "900" height = "950">

Wenn Sie die Dimensionen ändern, denken Sie daran, sie in beiden obigen Argumenten zu ändern, sonst erhalten Sie seltsame Ergebnisse.

Los geht's - vielleicht nicht so klug wie einige andere Antworten, aber es hat bei mir funktioniert! Beweise hier: http://a-bc.co.uk/latitude-longitude-finder/

Glyn
quelle