Controle
Créer un bouton DragZoom personnalisé - Sélectionner une zone à zoomer avec votre souris.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Dans cet exemple, nous allons créer une carte dotée d'un nouveau bouton appelé "DragZoom" personnalisé grâce aux options offertes par DragZoomControl().
Dans un premier temps, nous allons modifier l'apparence graphique du bouton "DragZoom".
Il comporte deux états :
| Etat non activé | Etat activé | Bouton Retour |
|---|---|---|
|
|
|
Après avoir cliqué sur le bouton "DragZoom" à l'état non activé :
La source du fichier dragzoom.js, nécessaire au fonctionnement de ce bouton, est téléchargeable ici
DragZoomControl(DragZoomBoxStyleOptions, DragZoomOtherOptions, DragZoomCallbacks)
Elle comporte 3 propriétés :
| Propriété | Type | Description |
|---|---|---|
| opacity | Nombre | de 0 à 1 : degrés d'opacité du voile se superposant à la carte. Par défaut : 0.2, |
| fillColor | Chaîne | Couleur du voile se superposant à la carte lorsque le bouton "DragZoom" est activé. Par défaut : "#000", |
| border | Chaîne | Caractéristiques (épaisseur, type, couleur) de la bordure délimitant la zone à zoomer. Par défaut : "2px solid blue". |
Elle comporte 12 propriétés :
| Propriété | Type | Description |
|---|---|---|
| buttonHTML | Chaine | Bouton "DragZoom" dans son état initial (Format HTML). On peut mettre du texte par exemple ("Zoom glissant"), ou le chemin vers une image ("<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button.gif' />") Par défaut : "zoom...", |
| buttonStartingStyle | Objet | Style CSS commun au Bouton "DragZoom" dans son état initial et dans son état activé. Par défaut : {width: '52px', border: '1px solid black', padding: '2px'}, |
| buttonStyle | Objet | Style CSS appliqué au Bouton "DragZoom" dans son état initial . Par défaut : {background: '#FFF'}, |
| buttonZoomingHTML | Chaine | Bouton "DragZoom" dans son état activé (Format HTML). On peut mettre du texte par exemple ("Sélectionnez la zone à zoomer"), ou le chemin vers une image ("<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button-activated.gif' />") Par défaut : "Drag a region on the map", |
| buttonZoomingStyle | Objet | Style CSS appliqué au Bouton "DragZoom" dans son état activé. Par défaut : {background: '#FF0'}, |
| backButtonHTML | Chaine | HTML placé sur le bouton retour, lorsque le bouton est activé. Par défaut : "Drag Zoom Back". |
| backButtonStyle | Objet | Propriétés CSS appliquées au bouton retour, lorsque celui-ci est activé. Par défaut : {background: '#FFF', display: 'none'}. |
| backButtonEnabled | Booléen | Détermine si oui ou non les fonctionnalités liées au bouton Retour sont activées. Le bouton Retour de DragZoom, lorsqu'il est activé, permet à l'utilisateur de retrouver, par un simple click, la carte dans l'état où elle était avant l'exécution du zoom. Par défaut : false. |
| overlayRemoveTime | Nombre | Durée de persistance, en millisecondes, de la zone de sélection, une fois le zoom effectué. Par défaut : 6000 (= 6 secondes), |
| stickyZoomEnabled | Booléen | Si à true, l'utilisateur peut zommer à plusieurs reprises sur la carte. Une fois les zooms terminés il devra à nouveau cliquer sur le bouton "dragzoom" pour mettre fin à l'action du contrôle. Par défaut : false. |
| rightMouseZoomOutEnabled | Booléen | Si à true, permet d'effectuer un zoom arrière avec le bouton droit de la souris. Par défaut : false. |
| minDragSize | Nombre | Permet de définir la taille minimum, en pixels, de la zone sélectionnée, à partir de laquelle le zoom sur la carte sera autorisé, puis déclenché.Par défaut : 0 |
Elle comporte 5 propriétés :
| Propriété | Type | Description |
|---|---|---|
| buttonclick:function(){Code_A_Executer} | Fonction | Exécute "Code_A_Executer" lorqu'un click sur le bouton "DragZoom" est détecté. |
| dragstart:function(){Code_A_Executer} | Fonction | Exécute "Code_A_Executer" au début du déplacement de votre souris pour sélectionner la zone à zoomer. Retourne les coordonnées du point cliqué. |
| dragging:function(){Code_A_Executer} | Fonction | Exécute "Code_A_Executer" tout au long du déplacement de votre souris, pour sélectionner la zone à zoomer. Retourne les coordonnées du point cliqué (X-débutZoom et Y-débutZoom) et les coordonnées actuelles du point glissant (X-actuelZoom et Y-actuelZoom). |
| dragend:function(){Code_A_Executer} | Fonction | Exécute "Code_A_Executer" lorsque la fin du déplacement de votre souris pour sélectionner la zone à zoomer, est détectée. |
| backbuttonclick:function(){Code_A_Executer} | Fonction | Called after the map context is restored as a result of clicking the DragZoom back button or by calling the initiateZoomBack() method. Callback arg: method (boolean) -- set true if this backbuttonclick was to restore context set by the saveMapContext(text) method, else false. |
Exemple :
var optionsStyleVoile = {
opacity: .1,
fillColor: "#f00",
border: "1px solid green"
};
var OptionsBouton = {
backButtonEnabled: true,
backButtonHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button-return.gif' title='Cliquez ici afficher la carte précédente' alt='Bouton Retour' />",
buttonHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button.gif' title='Cliquez ici pour activer le Dragzoom' alt='Bouton Dragzoom' />",
buttonZoomingHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button-activated.gif' title='Sélectionnez avec votre souris la zone à zoomer' alt='Dragzoom activé' />",
buttonStartingStyle: {width: '24px', height: '24px'},
overlayRemoveTime: 2000, stickyZoomEnabled: false,
rightMouseZoomOutEnabled: true, minDragSize: 20
}
var DetectionEvenementDragZoom = {
buttonclick: function(){document.getElementById("actionEnCours").innerHTML += "<br /><em>Vous venez de cliquer sur le bouton DragZoom</em>"},
dragstart: function(){document.getElementById("actionEnCours").innerHTML += "<br /><em>Début de la sélection de la zone à zoomer . . .</em>"},
dragging: function(x1,y1,x2,y2){document.getElementById("actionEnCours").innerHTML += "<br /><em>Coordonnées du point initial</em> : x1="+x1+",y1="+y1+" - <em>Coordonnées du curseur</em> : x2="+x2+",y2="+y2},
dragend: function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){document.getElementById("actionEnCours").innerHTML += "<br /><em>Zone à zoomer</em> : NE="+ne+";SW="+sw}
};
maCarte.addControl(new DragZoomControl(optionsStyleVoile, optionsBouton, detectionEvenementDragZoom));
Vous pouvez également consulter les pages ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Touraineverte.com - Google Maps Api - Controle - DragZoom - addControl - Créer un bouton DragZoom personnalisé</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<!-- Chargement du script dragzoom.js -->
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.3/src/dragzoom.js" type="text/javascript"></script>
<script type="text/javascript">
/* Déclaration des variables globales */
var maCarte;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.addControl(new GMenuMapTypeControl());
maCarte.addControl(new GSmallMapControl());
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.394966, la Longitude 0.680423, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new GLatLng(47.394966,0.680423), 9);
/* Options voile et zone de sélection */
var optionsStyleVoile = {
/* Opacité du voile */
opacity: .1,
/* Couleur du voile */
fillColor: "#f00",
/* Couleur et épaisseur du pourtour de la zone sélectionnée */
border: "1px solid green"
};
/* Options bouton */
var optionsBouton = {
/* Activation du bouton "Retour" */
backButtonEnabled: true,
/* Chemin vers l'image du bouton "Retour" */
backButtonHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button-return.gif' title='Cliquez ici afficher la carte précédente' alt='Bouton Retour' />",
/* Chemin vers l'image du bouton à l'état désactivé */
buttonHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button.gif' title='Cliquez ici pour activer le Dragzoom' alt='Bouton Dragzoom' />",
/* Chemin vers l'image du bouton à l'état activé */
buttonZoomingHTML: "<img src='http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/images/51/zoom-button-activated.gif' title='Sélectionnez avec votre souris la zone à zoomer' alt='Dragzoom activé' />",
/* Dimensions du bouton */
buttonStartingStyle: {width: '24px', height: '24px'},
/* Durée, en millisecondes, de persistance du rectangle, une fois la sélection faite */
overlayRemoveTime: 2000,
/* Désactivation de la possibilité d'executer des zooms successifs */
stickyZoomEnabled: false,
/* Activation du click droit sur la souris permettant un zoom arrière sur la carte */
rightMouseZoomOutEnabled: true,
/* Taille minimale, en pixels, de la zone de sélection nécessaire pour autoriser le déclenchement du zoom sur la carte */
minDragSize: 20
};
/* Callback */
var detectionEvenementDragZoom = {
/* En cas de click sur le bouton : */
buttonclick: function(){document.getElementById("actionEnCours").innerHTML += "<br /><em>Vous venez de cliquer sur le bouton DragZoom</em>"},
/* Au début de l'agrandissement : */
dragstart: function(){document.getElementById("actionEnCours").innerHTML += "<br /><em>Début de la sélection de la zone à zoomer . . .</em>"},
/* En cours d'agrandissement : */
dragging: function(x1,y1,x2,y2){document.getElementById("actionEnCours").innerHTML += "<br /><em>Coordonnées du point initial</em> : x1="+x1+",y1="+y1+" - <em>Coordonnées du curseur</em> : x2="+x2+",y2="+y2},
/* A la fin de l'agrandissement : */
dragend: function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){document.getElementById("actionEnCours").innerHTML += "<br /><em>Zone à zoomer</em> : NE="+ne+";SW="+sw}
};
/* Ajout du bouton dragzoom à la carte nommée "maCarte" */
/* Personnalisé à l'aide de optionsStyleVoile, optionsBouton, detectionEvenementDragZoom */
/* Et s'affichant dans le coin supérieur droit de la carte avec une marge de 10 pixels par rapport au bord de la carte */
maCarte.addControl(new DragZoomControl(optionsStyleVoile, optionsBouton, detectionEvenementDragZoom), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(100,8)));
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
}
}
</script>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width:100%;height:400px"></div>
<!-- C'est dans le balise <div> ayant pour identifiant id="actionEnCours" -->
<!-- que vont venir s'afficher tous les événements liés au DragZoom -->
<div id="actionEnCours"><em>Aucune action actuellement sur le dragzoom</em></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<div id="noscript">
<p>Attention :</p>
<p>Afin de pouvoir utiliser les API de Google, JavaScript doit être activé.</p>
<p>Or il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</div>
</noscript>
</body>
</html>
La ligne 
vous permet de charger le script dragzoom.js nécessaire au fonctionnement du bouton "dragzoom".
Deux solutions s'offrent à vous :
Primo :
: <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.3/src/dragzoom.js" type="text/javascript"></script>
Secundo :
comme suit :<script src="http://www.votreserveur.fr/votrechemin/dragzoom.js" type="text/javascript"></script>
Personnalisation du voile et de la zone de sélection :
: les différentes options sont rassemblées dans optionsStyleVoile
: Opacité du voile recouvrant la carte : opacity : .1 - valeur de 0 à 1
: Couleur du voile recouvrant la carte : fillColor : "#f00" - rouge 
: Caractéristiques de la zone sélectionnée : border : "1px solid green" - épaisseur : 1px - type : solid - couleur : green (vert)
Personnalisation du bouton :
: les différentes options sont rassemblées dans optionsBouton
: Activation du bouton Retour, permettant, grâce à un simple click, d'afficher la carte dans l'état dans lequel elle se trouvait avant le zoom : backButtonEnabled : true
: Chemin/nom de l'image du bouton "Retour" : backButtonHTML
: Chemin/nom de l'image du bouton "DragZoom" à l'état désactivé : buttonHTML
: Chemin/nom de l'image du bouton "DragZoom" à l'état activé : buttonZoomingHTML
: Dimensions du bouton "DragZoom" en pixels : buttonStartingStyle : {width: '24px', height: '24px'}
: Durée, en millisecondes, de persistance du rectangle de sélection une fois la sélection et le zoom terminé : overlayRemoveTime : 2000
: L'utilisateur doit systématiquement cliquer sur le bouton "DragZoom" pour effectuer un zoom : stickyZoomEnabled : false
: Activation du click droit sur la souris permettant un zoom arrière sur la carte : rightMouseZoomOutEnabled : true
: Taille minimale, en pixels, de la zone sélectionnée nécessaire au déclenchement du zoom : minDragSize : 20
Callback :
: les différentes options sont rassemblées dans detectionEvenementDragZoom
: buttonclick: function(){ ... }
: dragstart: function(){ ... }
: dragging: function(x1,y1,x2,y2){ ... }
: dragend: function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){ ... }
La ligne 
vous permet d'insérer le bouton "dragzoom" dans la carte nommée "maCarte, en lui appliquant les différentes options indiquées entre parenthèses :
