Changing the Google Maps marker/infowindow position - google-maps

Question

I'm currently using this snippet to display my map on a certain page
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div class="map_js">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: myLatlng,
scrollwheel: true,
scaleControl: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var geocoder_map = new google.maps.Geocoder();
var address = 'New York';
geocoder_map.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var contentString = 'Hello World New York is the most populous city in the United States.';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker)
});
infowindow.open(map, marker)
} else {
alert('Geocode was not successful for the following reason: ' + status)
}
});
</script>
</div>
but, as you can see in this image http://d.pr/i/whoI the infowindow is somehow overlapping a bit with the default maps UI.
Does someone know how to solve this issue perhaps?
Best Regards, Jen