Google
 

CREER UN BOUTON DRAGZOOM - ZOOM PAR GLISSER-DEPOSER

PRESENTATION

Dans cet exemple, nous allons créer une carte dotée d'un nouveau bouton appelé "DragZoom" situé en haut à droite de la carte.

Boutons "DragZoom" :     

Après avoir cliqué sur ce bouton, celui-ci change d'apparence, la carte se grise, et votre curseur se transforme en croix.

Cliquez sur la carte, maintenez le bouton de votre souris enfoncé, et déplacez la, afin de définir la zone de la carte que vous souhaitez zoomer (rectangle bordé de bleu).

Une fois la zone sélectionnée, relachez le bouton de votre souris.

Le bouton "DragZoom" retrouve son aspect initial, le zoom sur la carte est executé, et le rectangle de sélection persiste quelques secondes avant de disparaître.

La source du fichier dragzoom.js, nécessaire au fonctionnement de ce bouton, est téléchargeable ici

RESULTAT


CODE

   [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   [3] <head>
   [4] <title>Google Maps - addControl - Création d'un bouton Drag Zoom</title>
   [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script>
   [7] <script src='dragzoom.js' type='text/javascript'></script>
   [8] <script type='text/javascript'>
   [9] //<![CDATA[
  [10] 	Fonction load() 
  [11] 	function load() {
  [12] 
  [13] 		Si le navigateur est compatible avec l'API de Google Maps ... 
  [14] 		if (GBrowserIsCompatible()) {
  [15] 
  [16] 			 ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementDeMacarte" ...  
  [17] 			var Macarte = new GMap2(document.getElementById("EmplacementDeMacarte"));
  [18] 
  [19] 			 ... La carte "MaCarte" est centrée sur la Latitude 47.394966, la Longitude 0.680423, avec un niveau de zoom égal à  9 ...  
  [20] 			Macarte.setCenter(new GLatLng(47.394966,0.680423), 9);
  [21] 
  [22] 
  [23] 			Options sur le style du rectangle délimitant la zone à zoomer ... 
  [24] 			var OptionsStyleRectangle = {
  [25] 
  [26] 			Opacité (ou Transparence ..) du trait - valeur de 0 à 1  
  [27] 			  opacity: .1,
  [28] 
  [29] 			caractéristiques du trait - épaisseur : 1px - type de trait : solid - couleur du trait : blue  
  [30] 			  border: "1px solid blue"
  [31] 			}
  [32] 	
  [33] 
  [34] 			Options sur le bouton ... 
  [35] 			var OptionsBouton = {
  [36] 
  [37] 			Chemin-nom de l'image représentant le bouton "DragZoom"  
  [38] 			  buttonHTML: "<img src='zoom-button.gif' />",
  [39] 
  [40] 			Chemin-nom de l'image représentant le bouton "DragZoom" une fois que celui-ci a été cliqué  
  [41] 			  buttonZoomingHTML: "<img src='zoom-button-activated.gif' />",
  [42] 
  [43] 			Taille l'image représentant le bouton "DragZoom"  
  [44] 			  buttonStartingStyle: {width: '24px', height: '24px'}
  [45] 			};
  [46] 
  [47] 			Ajout du bouton "DragZoom" sur la carte en haut à droite espacé de 10px par rapport au bord de la carte new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10))  
  [48] 			Macarte.addControl(new DragZoomControl(OptionsStyleRectangle, OptionsBouton),new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10)));
  [49] 
  [50] 		Si le navigateur n'est pas compatible avec l'API de Google Maps ... 
  [51] 		}else{
  [52] 
  [53] 			... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". 
  [54] 			alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  [55] 		}
  [56] 	}
  [57] //]]>
  [58] </script>
  [59] </head>
  [60] 
  [61]  Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée  -->
  [62] <body onload="load()" onunload="GUnload()"><center>
  [63] 
  [64] 	La <div> ayant pour id "EmplacementDeMacarte" fait 740 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "MaCarte". -->
  [65] 	<div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
  [66] </body>
  [67] </html>
Pour télécharger / copier le code cliquez ici, et n'oubliez pas de remplacer la clef API par la vôtre.

EXPLICATIONS

Pour plus d'explications et une personnalisation du bouton "DragZoom" veuillez consulter les liens ci-dessous.

REMARQUES

Personnalisation du rectangle définissant la zone de sélection :

  • [Ligne 27] : Opacité du trait - valeur de 0 à 1
  • [Ligne 30] : caractéristiques du trait - épaisseur : 1px - type de trait : solid - couleur du trait : blue

 

Personnalisation du bouton DragZoom :

  • [Ligne 38] : chemin-nom de l'image du bouton DragZoom
  • [Ligne 41] : chemin-nom de l'image du bouton DragZoom une fois cliqué
  • [Ligne 44] : Dimensions du bouton
  • [Ligne 48] : Position du bouton sur la carte - new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10))
  1. G_ANCHOR_TOP_RIGHT : bouton positionné en haut à droite,
  2. G_ANCHOR_TOP_LEFT : bouton positionné en haut à gauche,
  3. G_ANCHOR_BOTTOM_RIGHT : bouton positionné en bas à droite,
  4. G_ANCHOR_BOTTOM_LEFT : bouton positionné en bas à gauche,
  5. new GSize(10,10) : créé une marge de 10 px par rapport au bord de la carte.
|  http://www.touraineverte.com  |  © 2008  |  fadamaps37arobasegmailpointcom