Google Maps muestra imagen de mapa corrompido

bierzoastur · #1 (**permalink**) 11/07/2012, 08:16

Hola amigos!

Me ocurre algo extraño, cuya razón y solución no encuentro, por más vueltas que le doy, y por más que busco en Google.

He creado este portal: http://peñiscola.org.es/

Como podéis apreciar en el mapa de la página principal, por ejemplo en los controles de zoom del mapa, o por ejemplo, al abrir la ventana (infowindow) de alguno de los marcadores del mapa.

La imagen aparece de forma extraña, como corrompida, hay fragmentos que aparecen como desplazados, ...,

Por ejemplo, en la ventana informativa (infowindow), no muestra el botón "cerrar" (con la X en la esquina superior dercha). Sin embargo, la funcionalidad existe, si acercamos el puntero del ratón a esa zona cambia el cursor, y si hacemos click, la ventana se cierra.

Esto me ocurre en todos los mapas, hay mapas en algunas de las categorías y de los artículos, y en todos pasa algo parecido.

He de decir que todas las funcionalidades del mapa (zoom, movimiento, cálculo de rutas, etc.) son correctas, es decir, el mapa funciona correctamente excepto en la imagen que muestra.
Sin embargo el efecto es bastante malo, poco profesional.

En otro foro comentan que puede deberse a la hoja de estilos que carga la web en la que se muestra el mapa, ... que las imágenes tienen un color de fondo blanco establecido en la hoja de estilos que colisiona con las sombras del mapa, etc.... pero no parece ser este mi caso, al menos yo he realizado algunas pruebas sin éxito.

En fin, por último, comentar que la programación utilizada es idéntica a la de otros sitios similares que he realizado, en los que Google Maps funciona bien y muestra correctamente los mapas.

Se me olvidaba, javascript no genera ningún error relacionado con Google Maps, al menos eso me dice la Consola de Errores de Firefox.

Muchas gracias por adelantado!
Pablo

#2 (**permalink**) 11/07/2012, 09:17

Quiero confirmarte que estoy exactamente en el mismo problema.
En mi caso sí veo el + - del zoom pero pierdo el muñeco de streetview, el cierre del infowindows y el control de ancho-alto de este, que existen ocultos y funcionan. (y con manchas como de "imagen corrompida" como tú dices).

En principio pensaba que podía tener relación con jQuery ya que en otra serie de mapas no tengo el problema pero sigo investigando.

Te agradezco que nos intercomuniquemos cualquier vía de solución.

#3 (**permalink**) 11/07/2012, 10:43

Después de algunas pruebas, he podido comprobar que, eliminando los estilos propios del CSS3, tanto el muñeco como la sombra del infowindows (su marca de cierre y la recomposición de la imagen) se recuperan perfectamente.

Analizado el firebug, aparece un redimensionamiento dentro del mapa mediante div element.style que, aparentemente, lo rompe.

Trataré de reportarlo al foro de google maps, a ver si nos dan alguna luz.

emprear · #4 (**permalink**) 11/07/2012, 11:12

Yo sugeriria que arranquen con esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="http://maps.google.com/maps/api/js?sensor=false&amp;region=ES" type="text/javascript"></script>
 
</head>
<body>
 
<div id="map-canvas" style="width: 500px; height: 500px;">
 
</div>
<script type="text/javascript">
//<![CDATA[
 
mInfoWindow = new google.maps.InfoWindow();         
        var mCentro = new google.maps.LatLng(40.360231, 0.402564);
        mMap = new google.maps.Map(document.getElementById("map-canvas"), {zoom: 15,mapTypeId: google.maps.MapTypeId.ROADMAP,center: mCentro});
         var vcb_aparthoteles = new TCat(); vcb_aparthoteles.nombre = "aparthoteles"; markCats.add(vcb_aparthoteles);var point0 = new google.maps.LatLng(40.375063, 0.406166);
 imagen = "http://xn--peiscola-e3a.org.es/wp-content/themes/wp-clear/images/gota_aparthoteles.png";
 
//]]>
</script>
</body>
</html>

y a partir de ahi agreguen las demas funciones una a una a ver cual es la que degrada el mapa

Saludos

#5 (**permalink**) 11/07/2012, 13:36

Por mi parte, SOLUCIONADO.

Antes que nada, gracias emprear por tu sugerencia.

En mi caso, al adaptar páginas a jQuery Mobile y con jquery.ui.map.js de por medio, permanentemente tengo que comentar párrafos enteros e ir probando lo que falla y lo que requiero.

Había señalado que el problema estaba en los estilos generados por google maps en colisión con algún CSS3. Y bierzoastur, en su detalle del problema, ha permitido que dedicase la tarde a analizarlo.

Del

Código HTML:

Ver original<div id="mapa" style="width:100%; height:300px;">

se generan por parte de Google maps (en mi caso) 541 líneas de código, casi al completo de imágenes con estilos y sin id o class identificativo.

En mi caso he conseguido hallar el problema en un CSS de efectos de transición.

Código CSS:

Ver originalimg{max-width:100%}
.ui-mobile img{max-width:100%}

Ahora queda, después de eliminarlo, el estudiar en lo que afecte y corregirlo con otra sentencia en el CSS.

bierzoastur · #6 (**permalink**) 12/07/2012, 11:05

Genial, excelente trabajo txemaarbulo!

Tal como has indicado, también en mi caso estaba afectando la propiedad max-width que la hoja de estilos asigna a las imágenes precísamente en la zona (en el div) donde se muestran los mapas.

Lo he eliminado y problema solucionado. Me queda ver como afecta el cambio, pero creo que no habrá efectos secundarios.

Muchas gracias txemaarbulo, muchas gracias también a emprear por su aportación.

Saludos!

#7 (**permalink**) 12/07/2012, 11:33

Bagaje para la experiencia

Para cerrar el tema te cuento que teníamos un problema complementario (también tú, bierzoastur en la página) y que lo hemos solucionado de un saque.

En Firefox 13.0.1 (ignoro otras versiones) la función streetview no funcionaba (valga la redundancia). Ni como capa complementaria ni en la función normal del muñequito.

Sí en Crome, Opera y Safari con las que permanentemente chequeo (de Internet explorer solo me preocupo de poner el meta porque siempre choco con el).

bierzoastur · #8 (**permalink**) 13/07/2012, 08:58

Muchas gracias txemaarbulo, no lo había detectado.

Espero que todo esto sea de utilidad a más gente, por mi parte me doy cuenta que he estado dando muchos palos de ciego.

Muchos Saludos!

bierzoastur · #9 (**permalink**) 16/07/2012, 14:45

Acabo de detectar uno de los inconvenientes que se pueden producir al eliminar la propiedad css "max-width" en las imágenes, que como se comentó anteriormente, es la que provocaba esa distorsión en los mapas de Google Maps.

En mi caso el "problema" derivado está en que, en teoría, aunque no está muy logrado todavía, el diseño del portal al que hago referencia en mi primer mensaje es Responsive, es decir, se adapta a la resolución de pantalla del dispositivo desde el que se accede. Pues bien, esta propiedad "max-width" es una de las responsables de que este diseño funcione, permitiendo la redimensión dinámica de las imágenes.

Es curioso que esto se produzca en Google Maps, ya que precisamente Google recomienda este tipo de diseño: http://googlewebmastercentral.blogspot.com.es/2012/06/recommendations-for-building-smartphone.html

Bueno, lo comento por si pudiese ser de utilidad.

Saludos!

#10 (**permalink**) 16/07/2012, 15:27

Cita:

Iniciado por bierzoastur

Es curioso que esto se produzca en Google Maps, ya que precisamente Google recomienda este tipo de diseño: http://googlewebmastercentral.blogsp...martphone.html

Gracias bierzoastur. Por mi parte, como lo dije, me afectaban las etiquetas comentadas. Jquery Mobile tienes muchas "max-width" que se salvan del mapa y, cuando las necesito, tiro de etiquetas locales para cada caso salvando el mapa. Éste parece que funciona bien con el "width:100%".

Respecto a tu comentario, la versión 3 parece que tiene una constante con la revisión y corrección de errores. Puedes ver, sobre la marcha, muchos de ellos aquí.

Yo ya tengo reportado alguno que todavía no lo han resuelto con la sombra de los marcadores (al menos tienen foros donde poder plantearlos). Si te fijas, en Google Maps hay cosas de la versión 2 que no las han llegado a implementar. Cuando lo superen tendremos la versión 4 y nos tocará rehacer todos los javascript.

Saludos.