Diseñar la ventana de información es bastante sencillo con javascript vanilla. Usé parte de la información de este hilo al escribir esto. También tomé en cuenta los posibles problemas con versiones anteriores de ie (aunque no lo he probado con ellas).
var infowindow = new google.maps.InfoWindow({
content: '<div id="gm_content">'+contentString+'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
el.firstChild.setAttribute('class','closeInfoWindow');
el.firstChild.setAttribute('title','Close Info Window');
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.setAttribute('class','infoWindowContainer');
for(var i=0; i<11; i++){
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
}
});
El código crea la ventana de información como de costumbre (sin necesidad de complementos, superposiciones personalizadas o código enorme), usando un div con una identificación para contener el contenido. Esto proporciona un gancho en el sistema que podemos usar para obtener los elementos correctos para manipularlos con una simple hoja de estilo externa.
Hay un par de piezas adicionales (que no son estrictamente necesarias) que manejan cosas como darle un gancho al div con la imagen de la ventana de información de cierre.
El bucle final oculta todas las piezas de la flecha del puntero. Yo mismo necesitaba esto, ya que quería tener transparencia en la ventana de información y la flecha se interpuso en el camino. Por supuesto, con el gancho, cambiar el código para reemplazar la imagen de la flecha con un png de su elección también debería ser bastante simple.
Si desea cambiarlo a jquery (no tengo idea de por qué lo haría), entonces debería ser bastante simple.
Por lo general, no soy un desarrollador de JavaScript, por lo que cualquier pensamiento, comentario o crítica son bienvenidos :)
