how do i implement google maps infobox

I have a Google map set up that works fine with the default InfoWindow however I'm looking for something a little more stylized, I would like to be able to control how this window looks. I have looked at the InfoBox examples and docs but am unable to see how I can implement this into my code.

Javascript:

// Enable the visual refresh
    google.maps.visualRefresh = true;

    function initialize() {
      var myLatLng = new google.maps.LatLng(52.58448934362705, -2.2128868103027344);
      var mapOptions = {
        zoom: 19,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var marker = new google.maps.Marker({
              map: map,
              draggable: false,
              animation: google.maps.Animation.DROP,
              position: new google.maps.LatLng(52.58448934362705, -2.2128868103027344),
              icon: {
                size: new google.maps.Size(32, 32),
                scaledSize: new google.maps.Size(32, 32),
                url: "marker.png"
              }
            });

      });



      setMarkers(map, obstacles);
    }

var obstacles = [
  ['The Start', -2.2128868103027344 ,52.58448934362705, 1, '<b>The Start</b>', 'bracken-maze-torture.jpg'],
  ['Chatway Chase', -2.2232937812805176,52.585369365082556, 1, '<b>Chatway Chase</b>', 'bracken-maze-torture.jpg'],
  ['Elephant Fence', -2.2287386655807495,52.585874554601546, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
  ['Elephant Fence', -2.2254180908203125,52.586862101811484, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
  ['Elephant Fence', -2.2167277336120605,52.58403954805975, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
  ['Elephant Fence', -2.216741144657135,52.58465231189634, 1, '<b>Elephant Fence</b>', 'bracken-maze-torture.jpg'],
  ['Rabbit Hill', -2.220606207847595,52.58593322139412, 1, '<b>Rabbit Hill</b>', 'bracken-maze-torture.jpg'],
  ['Brasher Disley Steplechase', -2.2237443923950195,52.58636018290797, 1, '<b>Brasher Disley Steplechase</b>', 'bracken-maze-torture.jpg'],
  ['Bracken Maze Torture', -2.228196859359741,52.58881105708316, 1, '<b>Bracken Maze Torture</b>', 'bracken-maze-torture.jpg'],
  ['The Slalom', -2.233647108078003,52.590078809218845, 1, '<b>The Slalom</b>', 'bracken-maze-torture.jpg'],
  ['Jungle Trench Battlefileds', -2.2293394804000854,52.5877551121424, 1, '<b>Jungle Trench Battlefileds</b>', 'bracken-maze-torture.jpg'],
  ['Gurkha Grand National', -2.23097562789917,52.58586803606421, 1, '<b>Gurkha Grand National</b>', 'bracken-maze-torture.jpg'],
  ['Jungle Water Slalom', -2.2270596027374268,52.58515425035844, 1, '<b>Jungle Water Slalom</b>', 'bracken-maze-torture.jpg'],
  ['Technospanner Legover', -2.2247743606567383,52.58636670137212, 1, '<b>Technospanner Legover</b>', 'bracken-maze-torture.jpg']  
];

function setMarkers(map, locations) {

    var image = {
      size: new google.maps.Size(32, 32),
      scaledSize: new google.maps.Size(32, 32),
      url: "marker.png"
    };

    var makeInfoWindow = function(marker, obs) {

      // Create info window. In content you can pass simple text or html code.
      var infowindow = new google.maps.InfoWindow({
        content: "<div style='width:220px; position:relative;'>" + obs[4] + "<img src='" +  + "'/></div>",
        maxWidth: 220,
      });



      var boxText = document.createElement("div");
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
      boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

      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
      };


      // Add listner for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover
      google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
      });
    };

  for (var i = 0; i < locations.length; i++) {
    var obstacle = locations[i];
    var myLatLng = new google.maps.LatLng(obstacle[2], obstacle[1]);
    var marker = new MarkerWithLabel({
        position: myLatLng,
        map: map,
        icon: image,
        title: obstacle[0],
        zIndex: obstacle[3],
        labelContent: i + 1,
        labelAnchor: new google.maps.Point(14, 29),
        labelClass: "labels"
    });
    makeInfoWindow(marker, obstacle);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);