//le TextualZoomControl est un GControl qui affiche les boutons "Zoom In"
// and "Zoom Out" (as opposed to the iconic buttons used in Google Maps).

    function TextualZoomControl() {
    }
    TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the GRAUmap container and return the element for the GRAUmap class to
// position properly.
    TextualZoomControl.prototype.initialize = function(GRAUmap) {
      var container = document.createElement("div");

      var zoomInDiv = document.createElement("div");
      this.setButtonStyle_(zoomInDiv);
      container.appendChild(zoomInDiv);
      zoomInDiv.appendChild(document.createTextNode("Approcher"));
      GEvent.addDomListener(zoomInDiv, "click", function() {
        GRAUmap.zoomIn();
      });

      var zoomOutDiv = document.createElement("div");
      this.setButtonStyle_(zoomOutDiv);
      container.appendChild(zoomOutDiv);
      zoomOutDiv.appendChild(document.createTextNode("Eloigner"));
      GEvent.addDomListener(zoomOutDiv, "click", function() {
        GRAUmap.zoomOut();
      });

      var initialDiv = document.createElement("div");
      this.setButtonStyle_(initialDiv);
      container.appendChild(initialDiv);
      initialDiv.appendChild(document.createTextNode("Zoom initial"));
      GEvent.addDomListener(initialDiv, "click", function() {
        GRAUmap.setZoom(15);
      });

      var CentrageDiv = document.createElement("div");
      this.setButtonStyle_(CentrageDiv);
      container.appendChild(CentrageDiv);
      CentrageDiv.appendChild(document.createTextNode("Recentrage"));
      GEvent.addDomListener(CentrageDiv, "click", function() {
        GRAUmap.panTo(new GLatLng(43.599656,1.440719));
      });

      var CarteDiv = document.createElement("div");
      this.setButtonStyle_(CarteDiv);
      container.appendChild(CarteDiv);
      CarteDiv.appendChild(document.createTextNode("Vue carte"));
      GEvent.addDomListener(CarteDiv, "click", function() {
        GRAUmap.setMapType(G_NORMAL_MAP);
      });

      var SatelliteDiv = document.createElement("div");
      this.setButtonStyle_(SatelliteDiv);
      container.appendChild(SatelliteDiv);
      SatelliteDiv.appendChild(document.createTextNode("Vue satellite"));
      GEvent.addDomListener(SatelliteDiv, "click", function() {
        GRAUmap.setMapType(G_SATELLITE_MAP);
      });

      var MixteDiv = document.createElement("div");
      this.setButtonStyle_(MixteDiv);
      container.appendChild(MixteDiv);
      MixteDiv.appendChild(document.createTextNode("Vue mixte"));
      GEvent.addDomListener(MixteDiv, "click", function() {
        GRAUmap.setMapType(G_HYBRID_MAP);
      });

      var MixteDiv = document.createElement("div");
      this.setButtonStyle_(MixteDiv);
      container.appendChild(MixteDiv);
      MixteDiv.appendChild(document.createTextNode("VUE détaillée"));
      GEvent.addDomListener(MixteDiv, "click", function() {
        GRAUmap.setZoom(19);
      });

      GRAUmap.getContainer().appendChild(container);
      return container;
    }

// le controle apparaît en haut à gauche avec 7x7 de padding
    TextualZoomControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize( 0, 0));
    }
// positionne les éléments pour les boutons.
    TextualZoomControl.prototype.setButtonStyle_ = function(button)
    {
      button.style.textDecoration = "underline";
      button.style.color = "#00009c";
      button.style.backgroundColor = "white";
      button.style.font = "21px serif";
      button.style.border = "1px solid black";
      button.style.padding = "2px";
      button.style.marginBottom = "3px";
      button.style.textAlign = "left";
      button.style.width = "6em";
      button.style.cursor = "pointer";
    }