Google Maps API V3: seltsame Probleme bei der Anzeige der Benutzeroberfläche (mit Screenshot)

Jeder, der Ideen dazu hat, was diesen seltsamen Fehler mit den Komponenten der Google Maps-Benutzeroberfläche verursacht, ist sehr dankbar, von Ihnen zu hören!

Die Karte wird erstellt mit:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

und der Fehler ist der gleiche, auch ohne Marker.

Wir sind auf das gleiche Problem gestoßen. Der CSS-Designer verwendete diesen Stil:

style.css

img {max-width: 100%; }

Anstatt die Zoomsteuerung zu deaktivieren, haben wir das Problem behoben, indem wir den img-Stil für map_canvas-Elemente wie folgt überschrieben haben:

style.css:

#map_canvas img { max-width: none; }

Die Zoomsteuerung wird jetzt korrekt angezeigt.

Das Einstellen von "img max-width: 100%" ist eine Technik, die beim Responsive / Fluid-Website-Design verwendet wird, damit die Größe von Bildern proportional geändert wird, wenn der Browser die Größe ändert. Anscheinend haben einige CSS-Rastersysteme begonnen, diesen Stil standardmäßig festzulegen. Weitere Informationen zu flüssigen Bildern finden Sie hier: http://www.alistapart.com/articles/fluid-images/ Nicht sicher, warum dies mit der Google-Karte in Konflikt steht ...

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>

Sieht nach einem Problem mit der Zoomsteuerung aus. Versuchen Sie es hinzuzufügenzoomControl:false , Ihre Optionen zu erweitern.

Tatsächlich scheint der normale Zoomregler links von der Seite positioniert zu sein (verwenden Sie Firebug> Inspect Element). Könnte ein CSS-Konflikt sein?

Nun, ich habe das Problem behoben:

In Ihrem CSS haben Sie Folgendes hinzugefügt:

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

versuche es nicht global zu machen und es sollte dich reparieren :)

Das hat bei mir funktioniert:

#map img { max-width: none !important; } (from Patrick's answer)

Das Attribut "! wichtig" stellt sicher, dass alle anderen Stile überschrieben werden. #map ist die ID, die zugewiesen wird, wenn Sie das neue Objekt Gmaps deklarieren:

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

Wenn Sie die Dreamweaver-Fluid-Grid-Funktion verwenden, sollte Ihre Standardeinstellung folgendermaßen aussehen:

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Versuche dies:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Ersetzen Sie einfach den Code so wie er ist.

Bootstrap (ab Version 2.3.2) spielt mit Bildern auf die gleiche Weise wie in der akzeptierten Antwort.

Tatsächlich vermute ich, dass das auf der Haroldo-Website verwendete Design Bootstrap verwendet.

Ich poste dies nur, weil niemand anderes Bootstrap erwähnt hat und jemand nach einer Bootstrap-spezifischen Lösung sucht.

Ich bin auf meiner Square Space-Website auf dieses Problem gestoßen. Ich hatte keinen Zugriff auf das CSS-Stylesheet. Da Sie ein HTML-Dokument einbetten, können Sie das Problem einfach mit Inline-CSS beheben. Ich habe den Stil des Containers geändert, anstatt eine Site-weite Änderung vorzunehmen (was ich nicht tun konnte). Folgendes habe ich getan:

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>