Infobox doesn't show up in Google Maps - google-maps

Question

I'm trying to display data on a marker on Google Maps using Infoboxes from my database (using API v3). The fact is with Infowindows it worked perfectly but I want to style them and that's the reason I've switched to Infobox. But they don't show up as I expected like Infowindows.
ViewMap.php
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var infowindow;
var map;
var infobox;
function initialize() {
var myLatlng = new google.maps.LatLng(6.796396,79.877823);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
downloadUrl("generateXml.php", function(data) {
data = xmlParse(data);
var markers = data.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(latlng);
var marker = createMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("descripcio"), latlng);
}
map.fitBounds(bounds);
});
}
function createMarker(nom,descripcio,latlng) {
var marker = new google.maps.Marker({
title:nom,
position: latlng,
map: map
});
infobox = new InfoBox({
content: descripcio,
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, marker);
map.panTo(latlng);
});
return marker;
}
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, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>

Answer 1

See this example page from google. I've used this as a template and it works great. https://developers.google.com/maps/articles/phpsqlajax_v3

Answer 2

InfoBox requires the maps-API, you must load the maps-API before infobox.js
Additionally:
You are using the same InfoBox for each marker(stored in the global infobox-variable, this variable will be overwritten on each call of createMarker, so the last marker will define the InfoBox used for each marker).
The descripcio-attribute of the last created marker is empty, that's why the infoboxes don't have any content.
Solution: add the var-keyword to make the infobox private:
var infobox = new InfoBox({/*options*/})