javascript - gesturehandling - google maps+custom controls

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

Question

Uso la API de Google Maps (v.3) para mostrar un mapa con un par de marcadores. Hace poco noté que el control utilizado para ampliar el mapa está mal (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 se podía ver el problema, pero el enlace está roto ahora, así que lo eliminé.

Answer 1

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

Uso Bootstrap V3 y me concentro en la funcionalidad. La razón principal era que le había dado a mi mapa una identificación diferente, luego el archivo CSS utilizado para mostrar la barra de zoom con el tipo amarillo de Streetvieuw.

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

Answer 2

Intenté todas las soluciones anteriores y otras de otros foros sin resultado. fue realmente molesto porque tengo otro sitio que no es Wordpress donde el código funcionó perfectamente. (Intenté 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 "todos los archivos"). A continuación, súbalo / transfiéralo al sitio web y configura una nueva página de Wordpress y utiliza una función de inserción. Cuando edite la página vaya al editor de texto (no al editor visual) y copie / escriba:

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

Si cambias las dimensiones, recuerda cambiarlas en los dos argumentos anteriores o obtendrás resultados extraños.

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

Answer 3

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

.gmnoprint img { max-width: none; }

Answer 4

Si está utilizando Pure CSS de Yahoo, dele 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í mismo.

Answer 5

Si estás usando Bootstrap, solo dale 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;
}

Answer 6

Simplemente comparte @ Max-Favilli respuesta:

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

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

Gracias a @ Max-Favilli

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

Answer 7

Tuve este problema también y el uso

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

no funcionó Finalmente utilicé

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

Y funcionó como un encanto.

Answer 8

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

Answer 9

#myMap_canvas img {
max-width: none;
}

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

Al volver a establecerlo en map_canvas, se solucionó sin el cambio de ancho máximo.

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