Controle
Créer un bouton DragZoom (par défaut)- 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, on utilise DragZoomControl() afin de créer le bouton "DragZoom".
Par défaut, le bouton"DragZoom" est situé à gauche de la carte.
Il comporte deux états :
| Etat non activé | Etat activé |
|---|---|
|
|
Après avoir cliqué sur le bouton à l'état non activé, celui-ci change d'apparence pour passer à l'état activé, la carte se grise, et le curseur de votre souris se transforme en croix.
Cliquez sur la carte, maintenez le bouton de votre souris enfoncé, puis 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 (état non activé), le zoom sur la carte est executé, et le rectangle de sélection persiste 6 secondes (durée par défaut) avant de disparaître.
La source du fichier dragzoom.js, nécessaire au fonctionnement de ce bouton, est téléchargeable ici
<?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 (par défaut)</title>
<meta name="robots" content="noarchive">
<!-- 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">
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" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... 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);
/* Ajout à la carte nommée "maCarte" du bouton GMenuMapTypeControl : Menu déroulant type de carte */
maCarte.addControl(new GMenuMapTypeControl());
/* Ajout à la carte nommée "maCarte" du bouton GSmallMapControl : Déplacement et Zoom en petite dimension */
maCarte.addControl(new GSmallMapControl());
/* Ajout à la carte nommée "maCarte" du bouton dragzoom */
maCarte.addControl(new DragZoomControl());
/* 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>
<!-- 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>
La ligne 
vous permet d'insérer le bouton "dragzoom" dans votre carte.
Pour plus d'informations sur les options concernant le bouton dragzoom, lisez cet article :
