Dans cet exemple, nous allons créer un disque sur la carte à chaque fois que vous "double-cliquerez" sur celle-ci.
Les caractéristiques de ce disque sont :
[1] <?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"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - Dessiner un cercle - Tracer un rond</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 type="text/javascript"> [8] //<![CDATA[ [9] [10] Déclaration de toutes les variables [11] [12] Nom de la carte : MaCarte [13] var MaCarte; [14] [15] Nom du cercle : cercle [16] var cercle; [17] [18] Couleur du cercle [19] var cercleCouleur = "#0000ff"; [20] [21] Epaisseur du trait tracant le cercle (en pixel) [22] var cercleEpaisseur = "1"; [23] [24] Opacité du trait tracant le cercle (de 0 à 1) [25] var cercleOpacite = ".5"; [26] [27] Couleur du disque [28] var disqueCouleur = "#0000ff"; [29] [30] Opacité du disque (de 0 à 1) [31] var disqueOpacite = ".1"; [32] [33] Rayon du cercle en kilometre(s) [34] var rayon = 30; [35] [36] Nombre de segments composant le cercle [37] var segment = 60; [38] [39] Centre de la carte nommée "MaCarte" [40] var centre; [41] [42] marqueur nommé "monMarqueur" symbolisant le centre du cercle [43] var monMarqueur; [44] [45] [46] [47] Fonction load() [48] function load() { [49] [50] Si le navigateur est compatible avec l'API de Google Maps ... [51] if (GBrowserIsCompatible()) { [52] [53] ... 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" ... [54] MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte")); [55] [56] ... On supprime le zoom par double clique sur la carte nommée 'MaCarte' ... [57] MaCarte.disableDoubleClickZoom(); [58] ... Ajout des contrôles : boutons permettant le déplacement et le zoom et affichage de l'échelle ... [59] MaCarte.addControl(new GSmallMapControl()); [60] MaCarte.addControl(new GScaleControl()); [61] [62] ... La carte "Macarte" est centrée sur la Latitude 47.389982, la Longitude 0.688705, avec un niveau de zoom égal à 9 ... [63] MaCarte.setCenter(new GLatLng(47.389982,0.688705), 9); [64] [65] ... Un observateur d'événement est ajouté à la carte appelé "MaCarte". L'évenement détecté est "dblclick" (Détecte si un double click est effectué sur le marqueur appelé "marker"). Si un double-click a été effectué sur la carte appelé "MaCarte", la fonction située entre les {} sera alors executée ... [66] GEvent.addListener(MaCarte, "dblclick", function(marker, point) { [67] [68] ... Suppression de tous les recouvrements (marqueurs, polyline, info-bulle, etc...) de la carte nommée "MaCarte" ... [67] MaCarte.clearOverlays(); [69] [70] ... On centre la carte nommée "MaCarte" sur le point "point", et avec le niveau de zoom actuel de la carte ( MaCarte.getZoom() ) ... [71] MaCarte.setCenter(point, MaCarte.getZoom()); [72] [73] ... un nouveau marqueur nommé "monMarqueur" est créé. Celui est ancré aux coordonnées géographiques du point "point" représentant le centre du cercle ... [74] monMarqueur = new GMarker(point); [75] [76] ... Affichage du marqueur nommé "nomMarqueur" sur la carte nommée "MaCarte" ... [77] MaCarte.addOverlay(monMarqueur); [78] [79] ... la variable "centre" est égale aux coordonnées géographiques du point central de la carte affichée "MaCarte" ... [80] centre = MaCarte.getCenter(); [81] [82] ... Appel la fonction dessineUnCercle() pour dessiner le cercle. [83] dessineUnCercle(); [84] }); [85] [86] Si le navigateur n'est pas compatible avec l'API de Google Maps ... [87] }else{ [88] [89] ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". [90] alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); [91] } [92] } [93] [94] [95] [96] fonction dessineUnCercle() [97] function dessineUnCercle(){ [98] [99] Construction du tableau "points" contenant toutes les coordonnées des points nécessaires au tracé du cercle [100] var latConv = centre.distanceFrom(new GLatLng(centre.lat()+0.1, centre.lng()))/100; [101] var lngConv = centre.distanceFrom(new GLatLng(centre.lat(), centre.lng()+0.1))/100; [102] var points = []; [103] var step = parseInt(360/segment)||10; [104] for(var i=0; i<=360; i+=step){ [105] var pint = new GLatLng(centre.lat() + (rayon/latConv * Math.cos(i * Math.PI/180)), centre.lng() + (rayon/lngConv * Math.sin(i * Math.PI/180))); [106] points.push(pint); [107] } [108] [109] le cercle "cercle" est en fait un polygone construit à l'aide des points contenus dans le tableau "points" [110] cercle = new GPolygon(points, cercleCouleur, cercleEpaisseur, cercleOpacite, disqueCouleur, disqueOpacite); [111] [112] ... Affichage du "cercle" sur la carte nommée "MaCarte" ... [113] MaCarte.addOverlay(cercle); [114] } [115] //]]> [116] </script> [117] </head> [118] [119] [120] Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée --> [121] <body onload="load()" onunload="GUnload()"> [122] <center> [123] La <div> ayant pour id "EmplacementDeCarteGlobale" fait 740 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "MaCarte". --> [124] <div id="EmplacementDeMaCarte" style="width: 740px; height: 400px"></div> [125] </center> [126] </body> [127] </html>