Question

Hi i am trying to add thick box to a overlay in googlemaps. On my JQuery onload function i call the following function. The map works fine. But when the thick box doesn't seem to be called. This is the line that does work

<a href="test.html?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>

The whole function

function load(lat, lng, zlevel, userKey, state) {

        map = new GMap2(document.getElementById("map"));
        map.disableDoubleClickZoom();
        map.setCenter(new GLatLng(lat, lng), zlevel);

        if (state) {

            dsp = true;

            map.addControl(new GLargeMapControl());
            GEvent.addListener(map, "click", function(overlay, latlng) {

                var zoom = map.getZoom();
                var display = '<h5 class="header-flag">Flag</h5><p class="maptext"><a href="#" onclick="javascript:openOverlay(' + latlng.lat() + ',' + latlng.lng() + ',' + zoom + ');">Click here</a> to enter your comment - 
<a href="test.html?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a></p>';

                setTimeout(function() { map.openInfoWindowHtml(latlng, display, { maxWidth: 200 }); }, 0);
            });
        } else {


        }

        mgr = new MarkerManager(map);
        loadMarkers(userKey);
        mgr.refresh();
    }
Was it helpful?

Solution

Your adding the link that you want to activate the thickbox to the DOM after the thickbox function has already been called. This is because you are creating the link dynamically within the map.openInfoWindowHtml function. You need to call the thickbox function after this function has been executed.

Trouble is I just looked at the thickbox docs and thickbox gets set up within the thickbox.js file as soon as the DOM loads which is too soon for you. You could try to alter the setTimeout function to this:

setTimeout(function() { map.openInfoWindowHtml(latlng, display, { maxWidth: 200 }); tb_init('a.thickbox'); }, 0);

I cant be 100% sure this will work, but this is the crux of the problem.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top