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

80

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!

wprowadź opis obrazu tutaj

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.

Haroldo
źródło
byłoby pomocne, gdybyś dodał fragment
kodu
@slawekwin - zaktualizowane pytanie.
Haroldo,

Odpowiedzi:

182

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 ...

Patrick Cullen
źródło
9
Mnie też to dotknęło. Interfejs API Map Google w wersji 3 używa dużego, przezroczystego obrazu sprite png ( http://maps.gstatic.com/mapfiles/iw3.png), który jest umieszczany w kontenerze nadrzędnym z overflow: hidden. Zatem ograniczenie szerokości obrazu powoduje jego kompresję.
jwal
1
Ten mnie kłuł. Bardzo dziękuję za opublikowanie tego rozwiązania!
stephen.hanson
Ty, sir, rock! Nigdy o tym nie myślałem.
lu1s
33

W najnowszej wersji interfejsu API map Google potrzebujesz tego:

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>
Max Favilli
źródło
To jest to samo, co przyjęte rozwiązanie, ale z innym selektorem i dodatkowym resetem własnej stylizacji etykiety.
lmeurs
ten faktycznie pomaga
Nathanphan
8

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?

duncan
źródło
12
Ok, znalazłem to. jest to spowodowane moimimg {max-width: 100%; }
Haroldo
Mam ten sam problem i mam poprawkę po usunięciu css img {max-width: 100%;} dzięki
nbhatti2001
2

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ć :)

Xedret
źródło
1

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>
Szczery
źródło
0

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.

user3141435
źródło
0

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.

Locoluis
źródło
0

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>
bhaas
źródło