Listening for the domready event for google.maps.InfoWindow class

Question

So, I am trying to make add a google map to my webpage. I want to add a form into the pop-up bubble when you click on a marker on the map.

The API documentation says that the domready

"event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically."

How do I listen to this event?

This is the documentation.

Poker

Answer 1

I just solved a similar problem myself. To listen for the domready event, use the following syntax:

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

Reuben

Is it possible to get the infowindow x and y position in px here? – Porous

Answer 2

The google.maps.event.addListener() event waits for the creation of the infowindow HTML structure 'domready' and before the opening of the infowindow defined styles are applied.

I have worked with this example :

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'});

});

Then

.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;
}

Result :

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

Thanks

Feodor

I am using the same approach to customising the infowindow. It's reasonably successful, but there is sometimes a flash of vanilla infowindow before changing to the formatted version. Is there any way to overcome this? I've tried setTimeout but that only partially solves it even with a 1 second timeout. If I went longer than that I think users would give up expecting something to happen, especially as there is already a 500ms timeout on the mouseover event to stop multiple infowindows opening as the mouse is moving across the map. – Birthright

I checked it on my project, But I seen it problem too, Still I think this did not big problem but I will research about this. – Feodor

Answer 3

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);
});

Calathus

but this only works on infowindows that I manually create. What if I don't (like using Fusion tables to generate them)? – Poker