Google maps zoom broken - google-maps

Question

I've created a Google Maps overlay, but for some reason the zoom slider in the top-left of the map has stopped working. Have been trying to pick apart the code to fix it, but can't seem to find what is broken. Can someone have a look to see what I'm missing?
http://www.ucl.ac.uk/study/virtualtours/
My code is here:
<script type="text/javascript">
google.load("maps", "2");
google.load("jquery", "1.4.2");
var map;
var camera;
var side_bar_html = "";
var gmarkers = [];
function TileToQuadKey ( tx, ty, zl){
var quad = "";
for (var i = zl; i > 0; i--) {
var mask = 1 << (i - 1);
var cell = 0;
if ((tx & mask) != 0) cell++;
if ((ty & mask) != 0) cell += 2;
quad += cell;
}
return quad;
}
var uclvtTiles = function (a,b) {
var f = "http://www.ucl.ac.uk/prosp-students/access/virtual-tour/tourlayers/" + TileToQuadKey(a.x,a.y,b) + ".png";
return f;
}
function createUclVTSatMapType() {
var uclvtHybridLayer = new Array();
uclvtHybridLayer[0] = G_NORMAL_MAP.getTileLayers()[0];
uclvtHybridLayer[1] = new GTileLayer(new GCopyrightCollection('') , 17, 17);
uclvtHybridLayer[1].getTileUrl = uclvtTiles;
uclvtHybridLayer[1].getCopyright = function(a,b) {return "University College London, 2010";};
uclvtHybridLayer[1].getOpacity = function () {return 0.97;};//opacity of the non transparent part
if(navigator.userAgent.indexOf("MSIE") == -1) {
uclvtHybridLayer[1].isPng = function() {return true;};
}
var uclvtSatMap = new GMapType(
uclvtHybridLayer,
G_NORMAL_MAP.getProjection(),
'UCL Map',
{errorMessage:"", alt:"Show imagery with UCL Map"});
uclvtSatMap.getTextColor = function() {return "#000000";};
return uclvtSatMap;
}
function myclick(i) {
GEvent.trigger(gmarkers[i], 'click');
}
function addMarker(point, title, video, details) {
var marker = new GMarker(point, {title: title, icon:camera});
GEvent.addListener(marker, "click", function() {
if (details) {
marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video),
new GInfoWindowTab("More", details)]);
} else {
marker.openInfoWindowHtml(video);
}
});
var id = gmarkers.length;
gmarkers.push(marker);
map.addOverlay(marker);
return id;
}
function flashMovieHTML(title, file) {
return '<div style="width:335px; height:260px">' +
'<b>' + title + '</b>' +
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="325" height="244" ' +
'id="' + title + '" ' +
'title="' + title + '">' +
'<param name="movie" value="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" />' +
'<param name="quality" value="high" />' +
'<param name="wmode" value="opaque" />' +
'<param name="swfversion" value="8.0.35.0" />' +
'<embed src="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" ' +
'quality="high" ' +
'width="325" ' +
'height="244" ' +
'name="' + title + '" ' +
'type="application/x-shockwave-flash" ' +
'pluginspage="http://www.macromedia.com/go/getflashplayer">' +
'</embed>' +
'</object>' +
'</div>';
}
function addMarkersToMap() {
GDownloadUrl('campus.xml', function(doc) {
var xmlDoc = GXml.parse(doc);
var locations = xmlDoc.documentElement.getElementsByTagName("location");
var currentCategory = "";
for (var i = 0; i < locations.length; i++) {
var lat = parseFloat(locations[i].getAttribute("lat"));
var lng = parseFloat(locations[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var title = locations[i].getAttribute("title");
var menu = locations[i].getAttribute("menu");
var video = locations[i].getAttribute("video");
var category = locations[i].getAttribute("category");
var details = locations[i].childNodes.length == 0 ? null :
'<div style="width:335px; height:260px">' +
locations[i].childNodes[0].nodeValue +
'</div>';
var id = addMarker(point, title, flashMovieHTML(title, video), details);
if (category != currentCategory) {
if (id > 0) {
side_bar_html += '</ul></div></div>';
}
side_bar_html += '<div class="collapsable">';
side_bar_html += '<h4 class="toggleCollapsableContent">' + category + '</h4>';
side_bar_html += '<div class="collapsableContent"><ul>';
}
side_bar_html += '<li><a href="javascript:myclick(' + id + ')">' + menu + '<\/a></li>';
currentCategory = category;
}
side_bar_html += '</ul></div></div>';
document.getElementById("right").innerHTML = side_bar_html;
$("h4.toggleCollapsableContent:gt(0)")
.addClass('closed')
.next('.collapsableContent').hide();
$("h4.toggleCollapsableContent").click(function () {
if ($(this).next($(".collapsableContent")).is(":hidden")) {
$(this).next($(".collapsableContent")).slideDown("fast");
$(this).removeClass("closed");
} else {
$(this).next($(".collapsableContent")).slideUp("fast");
$(this).addClass("closed");
}
});
});
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapDiv"));
map.setCenter(new GLatLng(51.52484592590448, -0.13345599174499512), 17);
map.setUIToDefault();
var uclvtSatMapType = createUclVTSatMapType()
map.addMapType(uclvtSatMapType);
map.setMapType(uclvtSatMapType);
camera = new GIcon(G_DEFAULT_ICON);
camera.image = "ucl-video.png";
camera.iconSize = new GSize(32,37);
camera.iconAnchor = new GPoint(16,35);
camera.infoWindowAnchor = new GPoint(16,2);
addMarkersToMap();
}
}
google.setOnLoadCallback(initialize);
Cheers,
G

Answer 1

The div that holds this image
http://www.ucl.ac.uk/prosp-students/access/virtual-tour/campus-map-key.png
is positioned absolutely above the map and it blocking access to everything underneath it.

Answer 2

This may help you:
#map img{max-width: inherit;}