Google Map including Marker centre on resize & custom CSS

This is a problem i’ve come across on quite a few sites, having a Google Map that can be customised to fit into the organisations brand, here’s an example.

var map;
function initialize() {
	var myLatlng = new google.maps.LatLng(51.457350,-2.607750);
	var mapOptions = {
		center: myLatlng,
		zoom: 15,
		scrollwheel: false,
		mapTypeControl: false,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
	
		// Map Styles 
		styles: [	
		{		
		    featureType:'water',
		    elementType: 'geometry.fill',		
		    stylers:[{color:'#90d3ee'},{visibility:'on'}
		    ]	
		},{		
		    featureType:'landscape',		
		    stylers:[{color:'#f2f2f2'}
		    ]	
		},{		
		    featureType:'road',		
		    stylers:[{saturation:-100},{lightness:1}
		    ]	
		},{		
			featureType:'road.highway',		
			stylers:[{visibility:'off'}
			]	
		},{		
			featureType:'road.arterial',		
			elementType:'labels.icon',		
			stylers:[{visibility:"simplified"}
			]	
		},{			
			featureType:'administrative',		
			elementType:'labels.text.fill',		
			stylers:[{color:'#444444'}
			]	
		},{		
			featureType:'transit',		
			stylers:[{visibility:'off'}
			]	
		},{		
			featureType:'poi',		
			stylers:[{visibility:'off'}
			]
		}]
	};

	map = new google.maps.Map(document.getElementById("google-map"), mapOptions );
	
	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title:"Ragdoll Research & Planning"
	});
	
	marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center); 
});