Sterowanie powiększeniem w Mapach Google jest pomieszane


172

Używam Google Maps API (v.3), aby wyświetlić mapę z kilkoma znacznikami. Niedawno zauważyłem, że sterowanie służące do powiększania mapy jest pomieszane (nie zawsze tak było). Nie mam pojęcia, jaka jest przyczyna.

wprowadź opis obrazu tutaj

Aktualizacja

Ten post pierwotnie zawierał łącze do strony, na której można było wyświetlić problem, ale łącze jest teraz zepsute, więc go usunąłem.


12
Ten problem nie występuje w przypadku Bootstrap, ponieważ używasz is map_canvas jako identyfikatora div mapy.
Ben

Odpowiedzi:


109

Twój CSS zawalił sprawę. Usuń max-width: 100%;w linii 814, a elementy sterujące powiększeniem znów będą dobrze wyglądać. Aby uniknąć takich błędów, użyj bardziej szczegółowych selektorów w swoim CSS.


12
Jest to również prawdą, jeśli używasz Twittera Bootstrap, mają one img {max-width: 100%}, które to psują. Powinien zostać naprawiony w gałęzi 2.0.2
Ken

1
Wiele plików resetowania CSS również img {max-width:100%;}ustawiło.
avesse

Niesamowite! Ja też miałem z tym problemy, a niedawno przeniosłem się na bootstrap css. Mucho ++++
Kevin Mansel

Miałem ten sam problem z jquery mobile. Mają .ui-mobile img {max-width: 100%;}w swoich css, które musiały zostać usunięte.
Jeremy

28
aby naprawić to w bootstrapie, po prostu daj swoim mapom klasę div google-maps
Samy Massoud

80
#myMap_canvas img {
    max-width: none;
}

naprawiłem to dla mnie, ale chciałem również zwrócić uwagę na komentarz do pytania @Ben: „Ten problem nie występuje z Bootstrapem, jeśli używasz is map_canvas jako identyfikatora div mapy”. On ma rację. Nie używam Bootstrap, ale problem zaczął się pojawiać po zmianie id div.

Ustawienie go z powrotem na map_canvas naprawiło to bez zmiany maksymalnej szerokości.

<div id="map_canvas"></div>

21

Jeśli używasz Bootstrap, po prostu daj mu klasę „google-maps”. To zadziałało dla mnie.

Alternatywnie możesz zresetować wszystko dla elementu div mapy google jako rodzaj rozwiązania ostatniej szansy:

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


5

Jeśli jesteś użytkownikiem Twittera Bootstrap, dodaj ten wiersz do swojego CSS:

.gmnoprint img { max-width: none; } 

4

Miałem ten problem i korzystałem

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

nie zadziałało. W końcu użyłem

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

i działało jak urok.


! ważne może nie być konieczne, jeśli Twój selektor jest bardziej szczegółowy.
voodoocode

2

Jeśli używasz czystego CSS Yahoo, nadaj swojemu elementowi div klasę „google-maps”, taką jak Bootstrap, i umieść tę regułę w swoim CSS:

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

O ile wiem, Pure CSS nie ma możliwości samodzielnego rozwiązania tego problemu.


0

Te opcje, które mi powiedzieliście, nie działają w przypadku mojej witryny.

Używam Bootstrap V3 i skupiłem się na funkcjonalności. Głównym powodem było to, że nadałem mojej mapie inny identyfikator niż plik CSS używany do wyświetlania paska powiększenia z żółtym facetem Streetvieuw

Zmieniłem nazwę map_canvas na mapholder i wtedy to zadziałało! W każdym razie dzięki za wskazówki, że powinienem zajrzeć do plików CSS!


0

Próbowałem wszystkich powyższych rozwiązań i innych z innych forów bezskutecznie. to było naprawdę irytujące, ponieważ mam inną witrynę inną niż Wordpress, gdzie kod działał idealnie. (Próbowałem wyświetlić mapę Google na stronie Wordpress, ale elementy sterujące powiększeniem i widokiem ulicy były zniekształcone).

Rozwiązaniem, które zrobiłem, było utworzenie nowego pliku html (skopiuj, wklej cały kod do Notatnika i nazwij go xyz.html, zapisz jako typ "wszystkie pliki"). Następnie prześlij / ftp go na stronę internetową, skonfiguruj nową stronę Wordpress i użyj funkcji osadzania. Podczas edycji strony przejdź do edytora tekstu (nie edytora wizualnego) i skopiuj / wpisz:

http: // URL strony szerokość = "900" wysokość = "950">

Jeśli zmienisz wymiary, pamiętaj, aby zmienić to w obu powyższych argumentach, albo otrzymasz dziwne wyniki.

Proszę bardzo - może nie jest tak sprytna, jak inne odpowiedzi, ale zadziałało! Dowody tutaj: http://a-bc.co.uk/latitude-longitude-finder/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.