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.
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.