Derniers messages de : pierrotm777

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