martes, 17 de septiembre de 2013

Googlemaps 3.14 problemas con el CSS

La nueva versión de googleMaps 3.14 agrega nuevas reglas CSS al mapa que dan estilo a los elementos en el viewport, por ejemplo la infowindows y algunos botones. La nueva versión tiene un estilo mas bonito y agradable a la vista.

Pero si tienes un proyecto web existente y no has especificado la versión de googleMaps a utilizar, como por ejemplo de esta forma :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Lo que puede pasar es que googleMaps usara la ultima version disponible, como resultado en la ultima version 3.14 aplicara sus propios estilos CSS a todos los elementos del mapa. Esto puede ocasionar que tus infowindows o cualquier elemento personalizado que tengas en el viewport, luzca diferente o algunas veces terrible y con estilo de fuente distinto.

Para resolver esto,  puedes luchar con todos los estilos CSS que estan sobre escribiendo los tuyos, el problema es que googleMaps tienes estilos demasiados genericos usando la clase "gm-style" ejemplo:

.gm-style div, .gm-style span, .gm-style label {
   text-decoration: none;
}

Otra Solucion seria especificar la versión de googleMaps, cuando cargues la API. Y por ultimo otra solución, que no es totalmente de mi agrado pero es la única que he encontrado por el momento, es remover la clase "gm-style" con Jquery o puro javacript, no es una solución muy fancy que digamos pero por el momento es lo único que he encontrado.

Para ver un ejemplo de como funciona visita el siguiente enlace con un ejemplo que he preparado. Para remover la clase solo haz click en el boton "remove style" del panel de color verde y veras que los estilos son removidos.





No hay comentarios:

Publicar un comentario