DevProTalk - Promena infowindowa u gugl mapi

probao sam na ovoj strani da uradim ovo sa infoboxom: http://kuponik.adriamart.com/pon1.html ali nesto ne stima...

Vidi li neko gde je greska:

http://kuponik.adriamart.com/pon1.html

var map;
var markers = [];
var locationSelect;
var sidebar;
var customIcons = {

restaurant: {

icon: 'http://kuponik.adriamart.com/zelenimarker.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

},

bar: {

icon: 'http://kuponik.adriamart.com/icon3.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

}

};
var markerGroups = { "restaurant": [], "bar": []};

function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, 22),
zoom: 9,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
sidebar = document.getElementById("sidebar");
}

function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}

function clearLocations() {
infobox.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
sidebar.innerHTML = "";
}

function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'gx.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker") ;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var type = markerNodes[i].getAttribute("type");
var totolink = markerNodes[i].getAttribute("totolink");

var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
var icon = customIcons[type] || {};

createMarker(latlng, name, address, type, totolink);
createSidebar(name, distance, address, i);
bounds.extend(latlng);
}
map.fitBounds(bounds);
});
}

function createMarker(latlng, name, address, type, totolink) {
var html = '<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" valign="top"><div align="center">' + name + '</div></td></tr><tr><td width="50%" valign="top"><img src="' + address + '" alt="" width="150" border="0" /><br></td><td width="50%" align="center" valign="middle"><a href="' + totolink + '"><img src="buy_btn.png" width="70" height="30" border="0" /></a></td></tr><tr><td colspan="2" valign="top" bgcolor="#999999"><div align="center">BETA!</div></td></tr></table>';
var icon = customIcons[type] || {};
var myOptions = {
content: html
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var marker = new google.maps.Marker({
map: map,
icon: icon.icon,
position: latlng
});
if(typeof markerGroups[type] !== 'undefined') {
markerGroups[type].push(marker);
}
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});

var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
});
markers.push(marker);
}

function createSidebar(name, distance, address, num) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/><img src="' + address + '" alt="" width="100" border="0" />';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function(e) {
google.maps.event.trigger(markers[num], 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function(e) {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function(e) {
div.style.backgroundColor = '#fff';
});
sidebar.appendChild(div);
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}

function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if(marker.getVisible()) {
marker.setVisible(false);
infoBox.close();
} else {
marker.setVisible(true);
}
}
}

function doNothing() {}