function DrawMap(center, merchants, map, searchLocation, small){

    map.setCenter(center, 18);

    if (small) {
        map.addControl(new GSmallZoomControl());
    } else {
        map.addControl(new GLargeMapControl3D());
    }
	
	/*
    var cMarker = new GMarker(center);		
    map.addOverlay(cMarker);
	*/

	// Custom infowindow. 
	// We don't want the default textballoon style info window

	var InfoWindow = function() {
		this.$node = $('<div id="gmap-infowindow"></div>');
		this.$node.css({
			position: 'absolute',
			display: 'none',
			left: 0,
			top: 0
		});
		this.node = this.$node[0];
	}

	InfoWindow.prototype = new GOverlay();

	// overlay methods, must be implemented
	InfoWindow.prototype.initialize = function(map) {
		this.map = map;
		this.map.getPane(G_MAP_MARKER_PANE).appendChild(this.node);
	}

	InfoWindow.prototype.redraw= function() {
	}

	InfoWindow.prototype.remove = function() {
		this.map.getPane(G_MAP_MARKER_PANE).removeChild(this.node);
	}
	
	// custom methods
	InfoWindow.prototype.open = function(marker, html) {
		var latlng = marker.getLatLng();
		var point = this.map.fromLatLngToDivPixel(latlng);
		var offset = marker.getIcon().iconSize.height;

		this.$node.html(html);

		this.$node.css({visibility: 'hidden', display: 'block'});

		this.$node.css({
			left: (point.x - (this.node.offsetWidth  / 2)) + 'px',
			top:  (point.y - this.node.offsetHeight - offset) + 'px'
		});

		this.$node.css({display: 'none', visibility: 'visible'});
		
		this.map.panTo(latlng);
		this.$node.fadeIn();
	}

	InfoWindow.prototype.close = function() {
		this.$node.fadeOut();
	}

	// add one info window for global use
	var infoWindow = new InfoWindow();
	map.addOverlay(infoWindow);
	
	// close infowindow onclick in the map, if target is null
	GEvent.addListener(map, 'click', function(target){
		if(!target) {
			infoWindow.close();
		}
	});

	// add markers
	if (null != merchants) {

		var minLat = center.lat();
		var maxLat = center.lat();
		var minLong = center.lng();
		var maxLong = center.lng();

		$.each(merchants, function(i, m) {

		    if (m != undefined && m.latitude != null && m.longitude != null) {
		        if (minLat > m.latitude)
		            minLat = m.latitude;

		        if (minLong > m.longitude)
		            minLong = m.longitude;

		        if (maxLat < m.latitude)
		            maxLat = m.latitude;

		        if (maxLong < m.longitude)
		            maxLong = m.longitude;

		        var point = new GLatLng(m.latitude, m.longitude);

		        var offerRows = '';
		        if (m.link != null) {
		            offerRows = '<tr><th scope="row">Aanbieding:</th><td>' + m.offer + '</td></tr>' +
						'<tr><td colspan="2" class="offer">' + m.link + '</td></tr>';
		        }

		        var markerHtml =
					'<div class="content"><h3>' + m.name + '</h3><table><tbody>' +
						'<tr><th scope="row">Adres:</th><td>' + m.street + '</td></tr>' +
						'<tr><th scope="row">Plaats:</th><td>' + m.city + '</td></tr>' +
						'<tr><th scope="row">Categorie:</th><td>' + m.category + '</td></tr>' +
						offerRows +
					'</tbody></table><span class="bottom"></span></div>';
		        var marker = createMarker(point, markerHtml, m.iconUrl);

		        map.addOverlay(marker);


		        GEvent.addListener(marker, 'click', function() {
		            infoWindow.open(marker, markerHtml);
		        });
		    }

		});

		//var zl = getBestZoomLevel(map, minLat, minLong, maxLat, maxLong);
		var rectObj = new GLatLngBounds(new GLatLng(minLat, minLong), new GLatLng(maxLat, maxLong));
		var zm = map.getBoundsZoomLevel(rectObj);
		
		if (small) {
			zm = 11;
        }

        if (zm > 15) zm = 15; // prevent really deep zooming when only 1 result/marker is shown in the map
		
		var newCenter = rectObj.getCenter();
		map.setCenter(newCenter, zm);
	}
}         
           

// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instanc
// of the "marker" and "html" variables which will be needed later when the event triggers.
function createMarker(point, html, iconUrl) {

	if (iconUrl != null && iconUrl != "") {
		// Create our "tiny" marker icon
		var blueIcon = new GIcon(G_DEFAULT_ICON);
		blueIcon.image = iconUrl;
		blueIcon.iconSize = new GSize(21, 21);
		blueIcon.iconAnchor = new GPoint(10, 10);
		blueIcon.shadow = "";

		// Set up our GMarkerOptions object
		var markerOptions = { icon: blueIcon };
	}
	
	var marker = new GMarker(point, markerOptions);

	return marker;
}