Google Maps API V3, Marker InfoWindows not opening

Question

I am building a GoogleMap with multiple markers with infowindows attached. I have tried to build this into a re-usable Javascript Class using prototypes but my infowindows will not open (the markers show up fine).

If I test console.log within the click event listener it triggers, but the infowindows themselves refuse to open.

Markers.json is just a JSON object which returns a list of data to be looped through.

JS Fiddle

I am initiating the map using:

$(document).ready(function(){
    var customMap = new CustomMap('mapitems');
    customMap.init();
    customMap.setMarkers();
});

My Javascript:

function CustomMap(mapId, defaultLat, defaultLng, defaultZoom)
{
    this.map = null;
    this.markerBounds = null;
    this.$mapContainer = document.getElementById(mapId);
    this.defaultLat = (defaultLat ? defaultLat : '-36.848460');
    this.defaultLng = (defaultLng ? defaultLng : '174.763332');
    this.defaultZoom = (defaultZoom ? defaultZoom : 15);
}

CustomMap.prototype.init = function() {
    var position = new google.maps.LatLng(this.defaultLat, this.defaultLng);
    this.map = new google.maps.Map(this.$mapContainer, {
        scrollwheel: true,
        mapTypeId: 'roadmap',
        zoom: this.defaultZoom,
        position: position
    });
    this.markerBounds = new google.maps.LatLngBounds();
};

CustomMap.prototype.setMarkers = function() {
    var that = this;
    $.get('/locations.json', null, function(locations) {
        for (var i = 0; i < locations.length; i++) {
            that.processMarker(locations[i]);
        }
        that.map.fitBounds(that.markerBounds);
    }, 'json');
};

CustomMap.prototype.processMarker = function(data) {
    if (data.lat && data.lng) {
        var position = new google.maps.LatLng(data.lat, data.lng);
        this.markerBounds.extend(position);
        var marker = this.getMarker(position);
        this.setInfoWindow(marker, data);
    }
};

CustomMap.prototype.getMarker = function(position) {
    return new google.maps.Marker({
        map: this.map,
        draggable:false,
        position: position
    });
};

CustomMap.prototype.setInfoWindow = function(marker, data) {
    var that = this;
    marker.infoWindow = new google.maps.InfoWindow({
        content: that.buildInfoHtml(data)
    });
    google.maps.event.addListener(marker, 'click', function() {
        marker.infoWindow.open(that.map, marker);
    });
};

CustomMap.prototype.buildInfoHtml = function(data) {
    var html = '';
    html += '<strong>' + data.title + '</strong><br>';
    if (data.address.length > 0)
        html += data.address + '<br>';
    if (data.freephone.length > 0)
        html += 'Freephone: ' + data.freephone + '<br>';
    if (data.depotPhone.length > 0)
        html += 'Depot Phone: ' + data.depotPhone + '<br>';
    if (data.hours.length > 0)
        html += 'Depot Hours: ' + data.hours + '<br>';

    return html;
};