Sterowanie powiększeniem w Mapach Google jest pomieszane

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.

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.

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.

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

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

Po prostu udostępnij @ Max-Favilli odpowiedź:

W najnowszej wersji interfejsu API map Google potrzebujesz tego:

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

Dzięki @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

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

.gmnoprint img { max-width: none; } 

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.

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.

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!

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/