How to hide loadingAnimation.gif in Thickbox...??

Question

Hi,

I'm new to jQuery Thickbox. I've implemented the following code:

HTML:

<a class="thickbox" href="javascript:void(0);" onclick="javascript:initMap(lat,lng,'htmlmsg',1);" >map</a>

<div id="show_map" style="display:none">
    <div id="map_canvas"></div>
</div>

JS:

function initMap(x,y,msg,flg){
     var map = new GMap2(document.getElementById("map_canvas"),{size: new GSize(400,380)});
     map.removeMapType(G_SATELLITE_MAP);
     map.removeMapType(G_HYBRID_MAP);
     var point = new GLatLng(x, y);
     var htmlMsg = msg;
     map.setCenter(point, 14);
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     var baseIcon = new GIcon();
     baseIcon.shadow = "";
     baseIcon.iconSize = new GSize(20, 34);
     baseIcon.shadowSize = new GSize(37, 34);
     baseIcon.iconAnchor = new GPoint(9, 34);
     baseIcon.infoWindowAnchor = new GPoint(9, 2);
     baseIcon.infoShadowAnchor = new GPoint(18, 25);
     var letteredIcon = new GIcon(baseIcon);
     letteredIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/marker.png";
     markerOptions = { icon:letteredIcon };
     var marker = new GMarker(point,markerOptions); 
     GEvent.addListener(marker, "mouseover", function() {    
      map.openInfoWindowHtml(point, htmlMsg);  
     }); 
     map.addOverlay(marker);
     if (flg==1){
      map.openInfoWindowHtml(point, htmlMsg);  
     }
     tb_show('Quick view','#TB_inline?height=400&width=400&inlineId=show_map',true);
    }

The issue is the 'loadingAnimation.gif' always visible on the thickbox, even after the google map gets completely loaded.

Answer 1

I'm pretty sure the Google Maps code has nothing to do with it. The best methods would be to not display the loader at all (remove it from the Thickbox code) or to hide the loading.gif after the layover has initialized.

I'm not that familiar with Thickbox. But it should have a callback. Use that hide the gif (or it's container).

Answer 2

Seems strange, but changing

<a class="thickbox" href="javascript:void(0);" onclick="..." >map</a>

to

<a class="thickbox" href="#" onclick="..." >map</a>

makes it work for me.

Answer 3

You can remove the loading message (so that it doesn't show at all) with the following CSS:

#TB_load img { display: none !important; }

optionally, you can remove it through script by calling

document.getElementById('TB_load').style.display = "none"

whenever you want.