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 dessiner un disque sur la carte, centré sur le point sur lequel vous avez "double-cliqué".
Les caractéristiques de ce disque sont :
<?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>
<title>Touraineverte.com - dessiner tracer un disque</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var maCarte;
var polygoneCercle;
var centre;
var monMarqueur;
var cercleCouleur = "#0000ff";
var cercleEpaisseur = "1";
var cercleOpacite = ".5";
var disqueCouleur = "#0000ff";
var disqueOpacite = ".1";
var rayon = 30;
var segment = 60;
/* Fonction initialize() */
function initialize() {
/* ... Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... Désactivation du double click permettant de zoomer sur la carte ... */
maCarte.disableDoubleClickZoom();
/* ... Ajout à la carte nommée "maCarte" du mini contrôle permettant de zoomer et de déplacer la carte ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout à la carte nommée "maCarte" de l'Echelle ... */
maCarte.addControl(new google.maps.ScaleControl());
/* ... Centre la carte nommée "maCarte" sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new google.maps.LatLng(47.389982,0.688705), 9);
/* ... Ajout d'un observateur d'événement à la carte nommée "maCarte" ... */
/* ... L'événement observé est le double-click sur la carte nommée "maCarte" ... */
google.maps.Event.addListener(maCarte, "dblclick", function(marker, point) {
/* ... Suppression de tous les recouvrements (le cercle précédemment tracé dans notre cas) de la carte nommée "maCarte" .... */
maCarte.clearOverlays();
/* ... Centre la carte nommée "maCarte" sur le point double-cliqué avec un niveau de zoom actuel de la carte nommée "maCarte" ... */
maCarte.setCenter(point, maCarte.getZoom());
/* ... Création d'un marqueur nommé "monMarqueur" ancré sur le point surlequel on a double cliqué sur la carte ... */
monMarqueur = new google.maps.Marker(point);
/* ... Ajout du marqueur nommé "monMarqueur" sur la carte nommée "maCarte" ... */
maCarte.addOverlay(monMarqueur);
/* ... centre = point ayant pour coordonnées le centre actuel de la carte nommée "maCarte" ... */
centre = maCarte.getCenter();
/* ... Appel de la fonction dessineUnCercle() afin de tracer le cercle... */
dessineUnCercle();
});
/* ... 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');
}
}
/* Fonction dessineUnCercle() */
function dessineUnCercle(){
var latConv = centre.distanceFrom(new google.maps.LatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new google.maps.LatLng(centre.lat(), centre.lng()+0.1))/100;
/* ... Création d'un tableau nommé "pointsCercle". Celui-ci va contenir tous les points nécessaires ... */
/* ... à la construction du polygone représentant le cercle nommé "polygoneCercle" ... */
var pointsCercle = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
/* ... "pint" : coordonnées d'un point participant à la construction du polygone nommé "polygoneCercle" ... */
var pint = new google.maps.LatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
/* ... Ajout du point "pint" dans le tableau "pointsCercle" ... */
pointsCercle.push(pint);
}
/* ... Création d'un polygone nommé "polygoneCercle" ... */
polygoneCercle = new google.maps.Polygon(pointsCercle, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
/* ... on ajoute le polygone nommé "polygoneCercle" à la carte nommée "maCarte". */
/* ... ce polygone représente le cercle tracé sur la carte. ... */
maCarte.addOverlay(polygoneCercle);
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<!-- 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>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, 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>
</noscript>
</body>
</html>
<?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>
<title>Touraineverte.com - dessiner tracer un disque</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- 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>
<script type="text/javascript">
/* Déclaration des variables globales */
var maCarte;
var polygoneCercle;
var centre;
var monMarqueur;
var cercleCouleur = "#0000ff";
var cercleEpaisseur = "1";
var cercleOpacite = ".5";
var disqueCouleur = "#0000ff";
var disqueOpacite = ".1";
var rayon = 30;
var segment = 60;
/* 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 <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... Désactivation du double click permettant de zoomer sur la carte ... */
maCarte.disableDoubleClickZoom();
/* ... Ajout à la carte nommée "maCarte" du mini contrôle permettant de zoomer et de déplacer la carte ... */
maCarte.addControl(new GSmallMapControl());
/* ... Ajout à la carte nommée "maCarte" de l'Echelle ... */
maCarte.addControl(new GScaleControl());
/* ... Centre la carte nommée "maCarte" sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... */
maCarte.setCenter(new GLatLng(47.389982,0.688705), 9);
/* ... Ajout d'un observateur d'événement à la carte nommée "maCarte" ... */
/* ... L'événement observé est le double-click sur la carte nommée "maCarte" ... */
GEvent.addListener(maCarte, "dblclick", function(marker, point) {
/* ... Suppression de tous les recouvrements (le cercle précédemment tracé dans notre cas) de la carte nommée "maCarte" .... */
maCarte.clearOverlays();
/* ... Centre la carte nommée "maCarte" sur le point double-cliqué avec un niveau de zoom actuel de la carte nommée "maCarte" ... */
maCarte.setCenter(point, maCarte.getZoom());
/* ... Création d'un marqueur nommé "monMarqueur" ancré sur le point surlequel on a double cliqué sur la carte ... */
monMarqueur = new GMarker(point);
/* ... Ajout du marqueur nommé "monMarqueur" sur la carte nommée "maCarte" ... */
maCarte.addOverlay(monMarqueur);
/* ... centre = point ayant pour coordonnées le centre actuel de la carte nommée "maCarte" ... */
centre = maCarte.getCenter();
/* ... Appel de la fonction dessineUnCercle() afin de tracer le cercle... */
dessineUnCercle();
});
/* ... 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');
}
}
/* Fonction dessineUnCercle() */
function dessineUnCercle(){
var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100;
var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100;
/* ... Création d'un tableau nommé "pointsCercle". Celui-ci va contenir tous les points nécessaires ... */
/* ... à la construction du polygone représentant le cercle nommé "polygoneCercle" ... */
var pointsCercle = [];
var step = parseInt(360/segment)||10;
for(var i=0; i<=360; i+=step){
/* ... "pint" : coordonnées d'un point participant à la construction du polygone nommé "polygoneCercle" ... */
var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180)));
/* ... Ajout du point "pint" dans le tableau "pointsCercle" ... */
pointsCercle.push(pint);
}
/* ... Création d'un polygone nommé "polygoneCercle" ... */
polygoneCercle = new GPolygon(pointsCercle, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite);
/* ... on ajoute le polygone nommé "polygoneCercle" à la carte nommée "maCarte". */
/* ... ce polygone représente le cercle tracé sur la carte. ... */
maCarte.addOverlay(polygoneCercle);
}
</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>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, 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>
</noscript>
</body>
</html>
Pour modifier les caractéristiques du disque, il vous suffit de modifier les paramètres suivants :
var cercleCouleur : Couleur du cercle autour du disque : #0000ff (bleu)
var cercleEpaisseur : Épaisseur du trait du cercle autour du disque : 1 (en pixel)
var cercleOpacite : Opacité du cercle autour du disque : .5 ( valeur de 0 à 1 )
var disqueCouleur : Couleur du disque : #0000ff (bleu)
var disqueOpacite : Opacité du disque : .1 ( valeur de 0 à 1 )
var rayon : Rayon en kilomètres : 30
var segment : Nombre de segments constituant le cercle : 60