¿Cómo solucionar las marcas de Google Maps con tooltip personalizado?
Al situar el ratón encima de una imagen o cualquier elemento del DOM, éste es capaz de mostrar en un tooltip el texto de su atributo ‘title’:
ejemplo
En las marcas de Google Maps este efecto puede conseguirse especificando el atributo ‘title’ en el constructor de la marca.
var coords = new GLatLng(41.647471, -0.885569);
var mark = new GMarker(coords, {title:’texto de ejemplo’})
var mark = new GMarker(coords, {title:’texto de ejemplo’})
El problema es que esta opción es muy limitada, ya que se restringe al uso de texto plano. Lo ideal sería poder mostrar cualquier elemento del DOM que queramos, con su HTML y su CSS.
Para conseguirlo vamos a seguir estos pasos:
- Crear el nodo del DOM que queramos mostrar o coger un nodo ya existente y ponerlo como un atributo de la marca
- Al escuchar el evento mouseover de la marca, añadir el nodo al div contenedor del mapa en el la posición en la que se encuentra la marca
- Al escuchar el evento mouseout de la marca, eliminar el nodo del div contenedor del mapa para ocultarlo.
0 comentarios