How to add a domready event to an infoBubble
Geoff Schultz
layout of the infoWindow, I'm trying to switch to an infoBubble.
However, the domready event isn't executing like it did for the
infoWindow. I'm a javascipt hacker, so please explain this to me in
terms that a hacker can understand.
Here's the code that I'm using:
var infoWindow = new InfoBubble({content: request.responseText,
maxWidth: 1000, position: latLng, arrowSize: 0, maxHeight:
600});
infoWindow.open(map);
google.maps.event.addListener(infoWindow, "domready", function()
{load_rotator();});
Thanks in advance!
-- Geoff
Martin™
It might be that the 'domready' event fires BEFORE your next line of
code which adds an event listener for that event.
(The event happens before you listen for it).
Try adding the domready event listener before opening the InfoBubble:
var infoWindow = new InfoBubble({content: request.responseText,
maxWidth: 1000, position: latLng, arrowSize: 0, maxHeight: 600});
google.maps.event.addListener(infoWindow, "domready", function()
{load_rotator();});
infoWindow.open(map);
Martin.
On Nov 23, 4:03 pm, Geoff Schultz <geoffrey.w.schu...@gmail.com>
wrote:
Geoff Schultz
Thanks for the suggestion, but I tried that and there was no
difference.
-- Geoff
Rossko
> difference.
I'm sure infobubble fires domready events. Show us your demo?
Geoff Schultz
and here's the code. Note that if I replace the infoBubble with an
infoWindow (the commented out code), the domready code executes as
expected.
-- Geoff
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#mapdiv { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="http://google-
maps-' +
'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/
infobubble';
if (document.location.search.indexOf('compiled') !== -1) {
script += '-compiled';
}
script += '.js"><' + '/script>';
document.write(script);
function display_map()
{
var latLng = new google.maps.LatLng(42, -71);
var myOptions = {zoom: 8, center: latLng, mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("mapdiv"),
myOptions);
var responseText = "This is my info";
// var infoWindow = new google.maps.InfoWindow({content:
responseText,
// maxWidth: 1000, position: latLng, boxStyle: {width: "1000px"}});
var infoWindow = new InfoBubble({content: responseText,
maxWidth: 1000, position: latLng, arrowSize: 0, maxHeight:
600});
google.maps.event.addListener(infoWindow, "domready", function()
{load_rotator();});
infoWindow.open(map);
}
function load_rotator()
{
alert("Executing load_rotator");
}
</script>
</head>
<body onLoad="display_map()">
<div id="mapdiv" style="width:100%; height:100%"></div>
</body>
</html>
Rossko
Stepping through the code with Firebug, the domReady event is fired by
InfoBubble before your listener is created, in my browser.
> and here's the code.
No need with a good link :)
Geoff Schultz
I took me quite a while to decode what you were telling me. I'm quite confused as to how the domReady event can fire before the infoBubble is opened. Anyhow, what I finally figured out was that I needed to set the content AFTER I have created the listener. Thus the code that finally worked was:
var infoWindow = new InfoBubble({maxWidth: 1000, position: latLng, arrowSize: 0, maxHeight: 600});
google.maps.event.addListener(infoWindow, "domready", function() {load_rotator();});
infoWindow.open(map);
Thanks!
-- Geoff
Rossko
> var infoWindow = new InfoBubble({content: responseText, ...
This creates the InfoBubble and populates it. Unlike the standard
Infowindow, it's not done asynchronously so 'domready' was fired when
complete, before returning to your script.
> google.maps.event.addListener(infoWindow, "domready", ...
Too late, the event has already happened
> Anyhow, what I finally figured out was that I needed to set the
content AFTER I have created the listener.
That's fine, it is just one of the ways to add the listener before
setting content.
Geoff Schultz
Thanks again for your insights! Since you seem to be very knowledgeable about this, perhaps you can help me with one more problem.
Basically I'm trying to display some weather charts. These charts come from a variety of sources. I am trying to display them within a infoWindow of some type. I've tried infoWindow, infoBox and infoBubble. There seem to be issues with all of them, but the infoBubble seems to overcome most of my issues. For charts that have sequences which can be animated, I am using a javascript that rotates the images. This works just fine when I utilize infoWindow or infoBox, but I get a black screen when I utilize infoBubble.
http://www.geoffschultz.org/Test/infobubble_2.html utilizes an infoBubble
http://www.geoffschultz.org/Test/infobubble_3.html utilizes an infoWindow and works properly.
The only difference is the type of infoWindow which is created. Any help with this would be greatly appreciated as I'd really like to use an infoBubble, but this is a major stumbling block.
-- Geoff
Rossko
Nope, I just set breakpoints in Firebug to see the sequence
> http://www.geoffschultz.org/Test/infobubble_2.htmlutilizes an infoBubble
I think the infobubble 'domready' event is optimistic ; infobubble has
issued the commands to the browser to build the dom elements, but at
the time the browser is busy building map stuff and hasn't got around
to it by the time the infobubble code fires 'domready' in inline code.
In Firefox, there isn't even a map in the DOM let alone an infobubble
when your load_rotator() is called.
The standard infowindow runs asynchronously, and so gets queued behind
all the other map workings before its 'domready' is called.
I believe there is a trick you can do with javascript setTimeout to
put a task on the back of the browsers queue, use setTimeout to call
your load_rotator() with a zero timeout.
If this is the case, it looks like a worthwhile enhancement to the
infobubble library?
Geoff Schultz
To make the example behave more like the development version, I added a "click" event handler to the map which displays the infoBubble and it exhibits the same behavior despite the map being fully drawn.
-- Geoff
Rossko
> "click" event handler to the map which displays the infoBubble and it
> exhibits the same behavior despite the map being fully drawn.
Yep, infobubble's 'domready' event is still optimistic, it fires
before the browser has had time to render the DOM, so the DOM elements
are still not available to your load_rotator() yet.
The setTimeout suggestion stands.
Geoff Schultz
So, I'll implement your suggestion. However, how does one add a task to the browser queue? Sorry!
-- Geoff
Rossko
> the browser queue?
setTimeout ('doMyFunction(blah)', 0);
Looks like a zero delay, but would should happen is that a new task is
appended to the browser's work queue after a zero delay. I believe/
hope that should then be run after the browser's finished building
previously setup DOM elements.
I think you are right that infobubble could be improved, the author
Luke may read this ?
Geoff Schultz
-- Geoff
