¿Por qué el estilo de CSS distorsiona el zoom de mis mapas de Google?

Question

Aquí está una versión de trabajo

http://jsfiddle.net/tH78C/

Aquí está una versión rota (zoom widget es mostrada ya no correctamente) con Bootstrap estilo

http://jsfiddle.net/3sjAU/

¿Por qué se rompen?

Answer 1

En Bootstrap.css línea 69max-width: 100%; es el origen del problema.

img { 
max-width: 100%; <-- 
vertical-align: middle; 
border: 0; 
-ms-interpolation-mode: bicubic; 
} 

Puede quitarlo y si es necesario de nuevo sólo especificar una nueva clase .newclass {max-width:100%} y añadirlo a la imagen.

Answer 2

También puede arreglar esto para mapas individuales ej .:

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

Answer 3

lo arreglé con una ligera variación en lo que se enumeran aquí.

.gm-style img { 
    max-width: none; 
} 

Answer 4

No hay necesidad de especificar una nueva clase sólo tienes que copiar el código

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