El control de zoom de Google Maps está en mal estado

172

Utilizo la API de Google Maps (v.3) para mostrar un mapa con un par de marcadores. Hace poco noté que el control utilizado para hacer zoom en el mapa está en mal estado (no siempre fue así). No tengo idea de cuál es la causa.

ingrese la descripción de la imagen aquí

Actualizar

Esta publicación originalmente tenía un enlace a una página donde podía ver el problema, pero el enlace está roto ahora, así que lo eliminé.

Dónal
fuente
12
Este problema no ocurre con Bootstrap si usa is map_canvas como la identificación del mapa div.
Ben

Respuestas:

109

Tu CSS lo estropeó. Elimine max-width: 100%;en la línea 814 y los controles de zoom se verán bien nuevamente. Para evitar tales errores, use selectores más específicos en su CSS.

Konrad Dzwinel
fuente
12
Esto también es cierto si está utilizando Bootstrap de Twitter, tienen un img {max-width: 100%} que lo arruina. Debería arreglarse en la rama 2.0.2
Ken
1
Muchos archivos de reinicio CSS también se han img {max-width:100%;}configurado.
avesse
¡Increíble! Yo también estaba teniendo problemas con esto, y recientemente me mudé a bootstrap css. Mucho ++++
Kevin Mansel
Tuve el mismo problema con jquery mobile. Tienen .ui-mobile img {max-width: 100%;}en su CSS que tuvo que ser eliminado.
Jeremy
28
para arreglar eso en bootstrap solo dale a tus mapas div class google-maps
Samy Massoud
80
#myMap_canvas img {
    max-width: none;
}

lo arregló para mí, pero también quería señalar el comentario sobre la pregunta de @Ben, "Este problema no ocurre con Bootstrap si usas is map_canvas como la identificación del mapa div". El tiene razón. No estoy usando Bootstrap, pero el problema comenzó a suceder después de cambiar la identificación div.

Al volver a establecerlo en map_canvas lo reparó sin el cambio de ancho máximo.

<div id="map_canvas"></div>
Alineado
fuente
21

Si está utilizando Bootstrap, simplemente dele la clase "google-maps". Esto funcionó para mí.

Como alternativa, puede restablecer todo para el google map div como una especie de solución de último recurso:

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;
}
woens
fuente
16

Solo comparte la respuesta de @ Max-Favilli:

Con la última versión de la API de Google Maps necesita esto:

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

Gracias a @ Max-Favilli

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

poostchi
fuente
5

Si eres un usuario de Twitter Bootstrap, debes agregar esta línea a tu CSS:

.gmnoprint img { max-width: none; } 
Fernando Prieto
fuente
4

También tuve este problema y estaba usando

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

no funcionó Eventualmente usé

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

Y funcionó como un encanto.

Dylan Becks
fuente
! importante podría no ser necesario si su selector es más específico.
voodoocode
2

Si está utilizando CSS puro de Yahoo, asigne a su div la clase "google-maps" como Bootstrap y coloque esta regla en su CSS:

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

Por lo que puedo decir, Pure CSS no tiene forma de solucionar este problema por sí solo.

dmzza
fuente
0

Esas opciones que ustedes me dijeron no funcionaron para mi sitio web.

Utilizo Bootstrap V3 y me concentré en la funcionalidad. La razón principal fue que le había dado a mi mapa una identificación diferente que el archivo CSS utilizado para mostrar la barra de zoom con el chico amarillo de streetvieuw

¡Cambié el nombre de map_canvas a mapholder y luego funcionó para mí! ¡Gracias de todos modos por las pistas que debería buscar en los archivos CSS!

Impiriumjbb
fuente
0

Probé todas las soluciones anteriores y otras de otros foros en vano. fue realmente molesto porque tengo otro sitio que no es de Wordpress donde el código funcionó perfectamente. (Estaba tratando de mostrar un mapa de Google en una página de Wordpress, pero los controles de zoom y Streetview estaban distorsionados).

La solución que hice fue crear un nuevo archivo html (copie y pegue todo el código en el Bloc de notas y asígnele el nombre xyz.html, guárdelo como tipo "todos los archivos"). Luego cárguelo / ftp al sitio web, configure una nueva página de Wordpress y use una función de inserción. Al editar la página, vaya al editor de texto (no al editor visual) y copie / escriba:

http: // URL de la página width = "900" height = "950">

Si cambia las dimensiones, recuerde cambiarlo en los dos argumentos anteriores, o obtendrá resultados extraños.

Ahí vamos, puede que no sea tan inteligente como otras respuestas, ¡pero funcionó para mí! Evidencia aquí: http://a-bc.co.uk/latitude-longitude-finder/

Glyn
fuente