Tuesday, June 2, 2009

[jQuery] infinite loop alert on combing jcarousel and Google Map

Hello everyone,

I have some problems about using jcarousel library on Google Map,

and following is my scenario:

there is a Marker on the Map, and when clicking on the Marker,

Info-Window will pop up, and jcarousel content will be in the Info-
Window

And This is a simple demo:
http://www.csie.nctu.edu.tw/~yhlu/jcarousel/index.htm

The jcarousel is referenced from this tutorial:

http://sorgalla.com/projects/jcarousel/examples/special_textscroller.html

I copied all the js and css codes, but delete this part in js :
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});

because the "mycarousel div" doesn't exist in the beginning,

it will be generated when clicking on the Marker (then generating Info-
Window and mycarousel div)

Therefore, I add these codes in the Map Event Function:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<div id="mycarousel"><ul></ul></div>');
jQuery('#mycarousel').jcarousel({
vertical: true,
size: 0,
initCallback: mycarousel_initCallback
});
});
which means once the clicking event occurs, generate jcarousel
content.

Followings are my problems:

1. It works well on the FireFox,
but alert warning messages ( jCarousel: No width/height set for
items. This will cause an infinite loop. Aborting... ) on IE browser.

2. Clicking on the Marker at the first time, there is no jcarousel
content in the Info-Window.
You have to click again, then the Info-Window shows the jcarousel
content.

I really have no ideas to solve this problems, hope someone can help
me.

Thnaks a lot :)

No comments: