infobox - インフォボックスが機能しない

Question

私は開発者ではなく、JavaScript を段階的に学習しようとしています。ここで、作業中の gmaps に単純なインフォボックスを追加する必要があります。問題は、Google リファレンスで説明されているようにコードを追加したことですが、機能しません。また、そのページに infobox.js リンクを配置しましたが、これが最後のリリースです。

これはテストページです: http://www.squassabia.com/aree_espositive_prova2.asp

私がする必要があるのは、コード (boxText.innerHTML) に表示されるメッセージを表示することです。これは、段階的に理解し、物事をシンプルに保つためです。その後、スタイルを設定し、xml からデータを追加します (これはそれほど難しくないと思います)。

古い投稿のいずれにも解決策が見つからなかったので、問題を解決する方法の手がかりを誰かに教えていただければ幸いです。

乾杯

initialize() コードを提供します。

//icone custom
var customIcons = {
  negozio: {icon: '/images/gmaps/mc.png'},
  outlet: {icon: '/images/gmaps/pin_fuc_outlet.png'},
  sede: {icon: '/images/gmaps/pin_fuc_home.png'}
};

var clusterStyles = [
{
textColor: 'white',
url: '/images/gmaps/mc.png',
height: 48,
width: 48
}];


function initialize() {

//creo una istanza della mappa
var map = new google.maps.Map(document.getElementById("mapp"), {
    center: new google.maps.LatLng(45.405, 9.867),
    zoom: 9,
    mapTypeId: 'roadmap',
    saturation: 20, //scrollwheel: false
  });


//stile della mappa
var pinkroad = [ //creo un array di proprietà
  { 
    featureType: "all", //seleziono la feature
    stylers: [{gamma: 0.8 },{ lightness: 50 },{ saturation: -100}]
  },
  {
    featureType: "road.highway.controlled_access",
    stylers: [{ hue: "#FF3366" },{ saturation: 50 },{ lightness: -5 }]
  }
];
map.setOptions({styles: pinkroad});

var name;

//Creates content and style
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Prova Infobox<br >Successo!!Test Text";

var myOptions = {
             content: boxText
            ,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 ib = new InfoBox(myOptions);


//creo il marker
downloadUrl("xml/negozi.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) 
  {  
    var type = markers[i].getAttribute("tipo");
    var address = markers[i].getElementsByTagName("indirizzo")[0].childNodes[0].nodeValue;
    var city = markers[i].getElementsByTagName("citta")[0].childNodes[0].nodeValue;
    var phone = markers[i].getElementsByTagName("telefono")[0].childNodes[0].nodeValue;
    name = markers[i].getElementsByTagName("nome")[0].childNodes[0].nodeValue;

    var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

    var html = name + '<br />' + address + '<br />' + city + '<br />' + phone;
    var icon = '/images/gmaps/pin_fuc.png';
    var marker = new google.maps.Marker({map: map, position: point, icon :'/images/gmaps/pin_fuc.png'});

    /*google.maps.event.addListener(marker,"click", function(){ 
        map.panTo(this.position);
    });*/

    createMarkerButton(marker);

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(map);
    });

   }  

});

function createMarkerButton(marker) {
  //Creates a sidebar button
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(name));
    ul.appendChild(li);

  //Trigger a click event to marker when the button is clicked.
  google.maps.event.addDomListener(li, "mouseover", function(){
    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout (function (){marker.setAnimation(null);}, 750);
  });

  google.maps.event.addDomListener(li, "mouseout", function(){
    google.maps.event.trigger(marker, "mouseout");
  });

}


}


 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() {}