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

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.

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é.

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.

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

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

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

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

.gmnoprint img { max-width: none; } 

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.

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.

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!

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/