Google Maps API V3: dziwne wyskakujące wyskakujące interfejsy użytkownika (ze zrzutem ekranu)

Question

Każdy, kto ma jakieś pomysły na temat tego, co powoduje ten dziwny usterkę z komponentami UI mapy google, bądź naprawdę wdzięczny za wiadomość od ciebie!

mapa jest tworzony z:

 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 markerów.

Answer 1

Wystąpił ten sam problem. Projektant css używał tego stylu:

style.css

img {max-width: 100%; } 

Zamiast wyłączyć kontrolę zoomu, że problem został rozwiązany poprzez nadpisanie stylu img dla map_canvas elementów tak:

style.css:

#map_canvas img { max-width: none; } 

sterowanie zoomem teraz wyświetlać s poprawnie.

Ustawienie "img max-width: 100%" jest techniką stosowaną w responsywnym/płynnym projekcie strony internetowej, dzięki czemu obrazy zmieniają się proporcjonalnie po zmianie rozmiaru przeglądarki. Wygląda na to, że niektóre systemy gridowe css zaczęły domyślnie ustawiać ten styl. Więcej informacji o obrazach płynów tutaj: http://www.alistapart.com/articles/fluid-images/ Nie wiem, dlaczego to sprzeczne z mapą google ...

Answer 2

Wygląda na problem z regulacją powiększenia. Spróbuj dodać zoomControl:false do swoich opcji.

W rzeczywistości wygląda na to, że normalny suwak powiększenia znajduje się na lewo od strony (użyj opcji Firebug> Inspect Element). Może być konflikt CSS?

Answer 3

Cóż mam poprawkę dla tego:

Na CSS dodasz coś takiego:

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

spróbuj nie sprawiają, że globalny i należy go naprawić ciebie :)

Answer 4

w najnowszej wersji Google maps API trzeba to:

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

Answer 5

jeśli używasz funkcji siatki płynu Dreamweaver domyślną skonfigurować 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%; 
} 

prostu zastąpić kod, jak to jest.

Answer 6

Bootstrap (od wersji 2.3.2) łączy się z obrazami w taki sam sposób, jak w zaakceptowanej odpowiedzi.

W rzeczywistości, podejrzewam, że projekt używany na stronie Haroldo używa Bootstrap.

Po prostu to publikuję, ponieważ nikt nie wspomniał o Bootstrapie, a ktoś może szukać rozwiązania specyficznego dla Bootstrapa.

Answer 7

Wpadłem na ten problem na mojej stronie 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 zmieniać całą witrynę (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> 

Answer 8

ten pracował dla mnie: „ważne”

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

atrybut pilnuje, aby zastąpić dowolny inny styl, #map jest ID przypisane kiedy zadeklarować nowy obiekt GMaps:

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