Google Maps pleace search API

Bonjour,
Ceci est ma première question sur ce forum . J'espère de pas faire d'erreur de présentation !
Tout d'abord, je travail, humblement, sur des pages html affichant des pages google map !
Mon PC est sous Vista 32bits donc j'utilise IE9 maximum ou Firefox !
Il y a quelque années j'avais un code qui marchait bien , mais les API de googles changent on mon code ne marche pas bien !
Ma page affiche les restaurants autour d'un point GPS .
Elle marche bien, mais j'ai une zone blanche parasite transparente en plein milieu sous IE9 et pas dans firefox !

Voici mon code:

Code:

<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
html, body, #map_canvas {height: 100%;margin: 0px;padding: 0px}
div#crosshair {
position: absolute;
top: 50%;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=fr&libraries=places"></script>
<script type="text/javascript">
var map;
var infowindow;
var service;
var markersArray = [];
var bounds = new google.maps.LatLngBounds();

function initialize() {
zoomlevel = 15;
var myposition = new google.maps.LatLng(44.785757, -0.566993);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myposition,
overviewMapControl: true,
zoom: zoomlevel
});
var request = {
location: myposition,
radius: 5000,
types: ['real_estate_agency']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var request = {
reference: results[i].reference
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, function success(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
});
}
}
}

function createDetailsHtml(name, rating, phone, address, website, gmapurl) {
if(null == name) {
name = '';
} else {
name = '<div><b><i><big><big><u><a href="'+gmapurl+'">'+name+'</a></u></big></big></i></b></div>';
}
if(typeof rating === "undefined") {
rating = '';
} else {
rating = '<div>Rating: '+rating+'</div>';
}
if(typeof phone === "undefined") {
phone = '';
}
if(typeof address === "undefined") {
address = '';
}
if(typeof website === "undefined") {
website = '';
} else {
website = '<a href="'+website+'">'+website+'</a>';
}
return '<div>'+name+address+'<br>'+website+'<div><br>Tel: '+phone+'</div>'+rating+'</div>';
}

function sendToVB(vartosend) {
window.external.sendToVB(vartosend);
}

function sendToVBOnMarkerClick(vartosend) {
window.external.sendToVBOnMarkerClick(vartosend);
}

function panbyright() {
map.panBy(100,0);
}
function panbyleft() {
map.panBy(-100,0);
}
function panbytop() {
map.panBy(0,-100);
}
function panbybottom() {
map.panBy(0,100);
}

function animate(newlat, newlon, newdir)
{
var myLatlng = new google.maps.LatLng(newlat, newlon);
//setdir(newdir);
//dirMarker.setPosition(myLatlng);
//dirMarker.setIcon(dirimage);
map.panTo(myLatlng);
};

function setmapzoom(zoomlevel) {
var curzoom = map.getZoom();
if (zoomlevel > 0)
map.setZoom(curzoom + 1);
else
map.setZoom(curzoom - 1);
}

function getmapzoom() {
var curzoom = map.getZoom();
return curzoom;
}

function createMarker(place) {
var detailsHTML = createDetailsHtml(place.name, place.rating, place.international_phone_number, place.formatted_address, place.website, place.url);
var image = new google.maps.MarkerImage(place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0,0),
new google.maps.Point(0, 71),
new google.maps.Size(30, 30));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var placeLoc = place.geometry.location;
bounds.extend(placeLoc);
var marker = new google.maps.Marker({
map: map,
icon: image,
shape: shape,
title: place.name,
zIndex: 4,
position: place.geometry.location,
animation: google.maps.Animation.DROP
});
markersArray.push(marker)
var latLng = marker.getPosition();
google.maps.event.addListener(marker, 'click', function() {
//infowindow.setContent('<b><i><big><u>' + '<a href="' + place.url + '">' + place.name + '</a>' + '</u></big></i></b>'+ '<br><br>' + place.vicinity + '<br><br>' + latLng.lat().toFixed(6) + ', ' + latLng.lng().toFixed(6) + '<br><br>Formatted phone : ' + place.formatted_phone_number + '<br>International phone : ' + place.international_phone_number);
infowindow.setContent(detailsHTML +'<br>Latlon: '+ latLng.lat().toFixed(6) + ', ' + latLng.lng().toFixed(6));
infowindow.open(map, this);
sendToVBOnMarkerClick(place.name+'|'+place.formatted_address+'|'+place.international_phone_number+'|'+latLng.lat().toFixed(6) + '|' + latLng.lng().toFixed(6));
});
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}

</script>
</head>
<body onload="initialize()">
<input type="hidden" input type="button" value="Delete" id="DelMarker" onclick="deleteOverlays()">
<div id="map">
<div id="map_canvas"></div>
<div id="crosshair"></div>
</div>
</body>
</html>

Je voudrait bien sure ne plus voir cette zone blanche !

Merci de votre aide par avance

Pierre