Google Maps API V3: dziwne usterki wyświetlania interfejsu użytkownika (ze zrzutem ekranu)

Każdy, kto ma jakieś pomysły na to, co powoduje tę dziwną usterkę w komponentach interfejsu użytkownika map Google, będzie naprawdę wdzięczny za wiadomość od Ciebie!

mapa jest tworzona za pomocą:

        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);

a usterka jest taka sama, nawet bez znaczników.

Napotkaliśmy ten sam problem. Projektant CSS używał tego stylu:

style.css

img {max-width: 100%; }

Zamiast wyłączać sterowanie powiększeniem, naprawiliśmy problem, nadpisując styl img dla elementów map_canvas w następujący sposób:

style.css:

#map_canvas img { max-width: none; }

Element sterujący powiększeniem wyświetla się teraz poprawnie.

Ustawienie „img max-width: 100%” to technika stosowana przy projektowaniu responsywnych / płynnych witryn internetowych, dzięki czemu obrazy zmieniają rozmiar proporcjonalnie, gdy zmienia się rozmiar przeglądarki. Najwyraźniej niektóre systemy siatki css zaczęły domyślnie ustawiać ten styl. Więcej informacji na temat płynnych obrazów tutaj: http://www.alistapart.com/articles/fluid-images/ Nie wiem, dlaczego jest to sprzeczne z mapą Google ...

W najnowszej wersji interfejsu API map Google potrzebujesz tego:

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

Wygląda na problem z dźwignią zoomu. Spróbuj dodać zoomControl:falsedo swoich opcji.

W rzeczywistości wydaje się, że normalny suwak powiększenia jest ustawiony na lewo od strony (użyj Firebug> Sprawdź element). Czy może to być konflikt CSS?

Cóż, mam na to poprawkę:

W swoim CSS dodałeś coś takiego:

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

staraj się nie robić tego globalnie i powinno cię to naprawić :)

To zadziałało dla mnie:

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

atrybut „! important” zapewnia, że ​​nadpisuje każdy inny styl, #map to identyfikator przypisany podczas deklarowania nowego obiektu Gmaps:

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

Jeśli używasz funkcji elastycznej siatki programu Dreamweaver, domyślna konfiguracja powinna wyglądać następująco:

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

Spróbuj tego:

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%;
}

po prostu zamień kod tak, jak jest.

Bootstrap (od wersji 2.3.2) miesza z obrazami w taki sam sposób, jak w zaakceptowanej odpowiedzi.

Właściwie podejrzewam, że projekt użyty w serwisie Haroldo wykorzystuje Bootstrap.

Publikuję to, ponieważ nikt inny nie wspomniał o Bootstrap, a ktoś może szukać rozwiązania specyficznego dla Bootstrap.

Napotkałem ten problem na mojej witrynie Square Space. Nie miałem dostępu do arkusza stylów CSS. Ponieważ osadzasz dokument HTML, możesz po prostu użyć wbudowanego CSS, aby rozwiązać problem. Zmodyfikowałem styl kontenera zamiast dokonać zmiany w całej witrynie (czego nie mogłem zrobić). Oto co zrobiłem:

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