Escuchando el evento domready para la clase google.maps.InfoWindow

Question

Por lo tanto, estoy tratando de hacer agregar un mapa de Google a mi página web. Quiero agregar un formulario a la burbuja emergente cuando haces clic en un marcador en el mapa.

La documentación de la API dice que el

caso domready

" se activa cuando el que contiene el contenido de la ventana de información se adjunta a la DOM. Es posible que desee controlar esta complicación si usted está construyendo un vistazo a su contenido de la ventana de información de forma dinámica "

¿Cómo escucho este evento?

Este es el documentation.

Answer 1

Acabo de resolver un problema similar a mí mismo. Para detectar el evento domready, utilice la siguiente sintaxis:

infoWindow = new google.maps.InfoWindow(); 
google.maps.event.addListener(infoWindow, 'domready', function() { 
     // whatever you want to do once the DOM is ready 
}); 

Answer 2

var contentString = 'your form here'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title:"My Form" 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
}); 

Answer 3

El evento google.maps.event.addListener() espera a que la creación de la estructura HTML ventana de información 'domready' y antes de la apertura de la ventana de información definido los estilos son aplicados

He trabajado con este ejemplo:

google.maps.event.addListener(infowindow, 'domready', function() { 

    // Reference to the DIV which receives the contents of the infowindow using jQuery 
    var iwOuter = $('.gm-style-iw'); 
    var iwBackground = iwOuter.prev(); 

    // Remove the background shadow DIV 
    iwBackground.children(':nth-child(2)').css({'display' : 'none'}); 

    // Remove the white background DIV 
    iwBackground.children(':nth-child(4)').css({'display' : 'none'}); 

}); 

Entonces

.gm-style-iw { 
    width: 350px !important; 
    top: 0 !important; 
    left: 0 !important; 
    background-color: #fff; 
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6); 
    border: 1px solid rgba(72, 181, 233, 0.6); 
    border-radius: 2px 2px 0 0; 
} 

Resultados:

Referencia: http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

Gracias