Callback when Google Maps Controls Elements are Loaded

Question

I found other stack overflow questions suggesting that using the 'idle' event is the way to trigger a callback when a google map is completely loaded. But in my case, I want to run some code to inject some text into an element in the map's UI, but I find that 'idle' fires before these elements are created.

To be explicit, I attach a initialize function to the window's load method:

google.maps.event.addDomListener(window, 'load', initialize);

Inside initialize, I create some UI elements and attach them to the map:

function initialize() {
  map = new google.maps.Map(document.getElementById("map-div"), mapOptions);
  ...
  // set up the controls div 
  var controlsDiv = document.createElement('div');
  controlsDiv.id="cd";
  controlSetup(controlsDiv);
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlsDiv);
}

Okay, but then what I want to do is run a function once this is all ready. In my case, I'm going to insert further text into the controls divs so I need those to be there.

I've tried this as the last line of the initialize method:

google.maps.events.addListenerOnce(map,'idle',emitText);

However, the emitText has a line which tries to getElementById("cd") (the controlsDiv on the map) but I get that it is null because the emitText has fired before the controlsDiv has actually finished loading.

The question, then, is how to detect the full loading of the map, including any UI divs. My testing suggests that the 'idle' event is firing before the UI elements are loaded and accessible in the DOM. Thanks in advance!

Answer 1

simply access controlsDiv instead of getElementById("cd"), it doesn't matter if the div has already been added to the document.