Nous allons créer une simple carte centrée sur la France.
Sous celle-ci est placé un champ, dans lequel vous allez saisir l'adresse postale que vous souhaitez localiser.
Après validation, un marqueur apparaît sur la carte pour désigner l'endroit.
Ses coordonnées (Latitude - Longitude) s'affichent sous le champs "Adresse postale".
La carte se centre sur le marqueur,et le niveau de zoom passe à 15.
Les contrôles suivants sont insérés sur la carte :
Par la suite, ce marqueur peut être déplacé à volonté sur la carte. Il suffit de cliquer dessus, de maintenir le bouton de la souris enfoncé et de le bouger.
En relachant le bouton, le marqueur se positionne sur la croix située sous sa pointe, la carte se centre sur le marqueur, et ses nouvelles coordonnées (Latitude - Longitude) s'affichent sous le champ"Adresse postale".
| Coordonnees GPS du marqueur | |
|---|---|
| Latitude | |
| Longitude | |
[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 - Golocalisation - Marqueur dplaable</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] Création des variables globales [11] var MaCarte; [12] var geocoder = null; [13] var LatitudeCarteClick; [14] var LongitudeCarteClick; [15] [16] Fonction load() [17] function load() { [18] if (GBrowserIsCompatible()) { [19] Création d'une nouvelle carte nommée "MaCarte" s'affichant en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMacarte" [20] MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte')); [21] La carte nommée "MaCarte" est centrée sur le point ayant pour latitude : 47 et longitude : 3 avec un niveau de zoom égal à 5 [22] MaCarte.setCenter(new GLatLng(47, 3), 5); [23] Affichage des contrôles sur la carte nommée "MaCarte" : Dplacement/Zoom - Type de carte - Mini-carte en bas à droite - Echelle [24] MaCarte.addControl(new GLargeMapControl()); [25] MaCarte.addControl(new GMapTypeControl()); [26] MaCarte.addControl(new GOverviewMapControl()); [27] MaCarte.addControl(new GScaleControl()); [28] Initialisation d'un nouveau géocodeur nommé "geocoder" [29] geocoder = new GClientGeocoder(); [30] }else{ [31] alert(\"Désolé, mais votre navigateur n\'est pas compatible avec Google Maps\"); [32] } [33] } [34] [35] Fonction AfficheGPS() : Fonction appelée pour afficher en instantané les latitudes et longitude du marqueur nommé "marker" [36] function AfficheGPS(marker){ [37] la variable "center" récupère les latitude et longitude du marqueur nommé "marker" [38] center = marker.getPoint(); [39] la variable "LatitudeCarteClick" récupère la latitude de "center" [40] LatitudeCarteClick = center.lat(); [41] la variable "LongitudeCarteClick" récupère la longitude de "center" [42] LongitudeCarteClick = center.lng(); [43] Affichage de "LatitudeCarteClick" dans la <div> ayant pour identifiant id="idLatitude" [44] document.getElementById('idLatitude').innerHTML = LatitudeCarteClick; [45] Affichage de "LongitudeCarteClick" dans la <div> ayant pour identifiant id="idLongitude" [46] document.getElementById('idLongitude').innerHTML = LongitudeCarteClick; [47] } [48] [49] Fonction recentrerCarte() : Fonction appelée pour recentrer la carte nommée "MaCarte sur le marqueur une fois son déplacement terminé [50] function recentrerCarte(){ [51] Après un délai de 1000 ms on centre la carte nommée "MaCarte" sur le point ayant pour latitude "LatitudeCarteClick" et longitude "LongitudeCarteClick" [52] window.setTimeout(function(){MaCarte.panTo(new GLatLng(LatitudeCarteClick, LongitudeCarteClick));}, 1000); [53] } [54] [55] Fonction AfficherAdresse(addresse) : fonction appelée pour géocoder une adresse postales et permet paramétrer le marqueur nommé "marker" [56] function AfficherAdresse(addresse) { [57] if (geocoder) { [58] geocoder.getLatLng( [59] addresse, [60] function(point) { [61] Si aucun point n'est trouvé (autrement dit l'adresse n'a pas pu être géolocalisée) [62] if (!point) { [63] Affichage d'un message d'alerte : Impossible de géolocaliser cette adresse [64] alert('Impossible de geolocaliser cette adresse' + addresse); [65] Sinon [66] } else { [67] Suppression de tous les recouvrement (marqueur, infobulle, etc.) présents sur la carte nommée "MaCarte" [68] MaCarte.clearOverlays(); [69] Cération d'un nouveau marqueur déplaçable {draggable: true} nommé "marker" ancré sur le point nommé "point" [70] var marker = new GMarker(point, {draggable: true}); [71] [72] Création d'un nouvel observateur d'événement lié au marqueur nommé "marker" [73] L'événement détecté est "dragstart" c'est à dire l'instant ou va débuter le déplacement du marqueur nommé "marker" [74] GEvent.addListener(marker, 'dragstart', function() { [75] Quand "dragstart" est détecté, fermeture des info-bulles présentes sur la carte nommée "MaCarte [76] MaCarte.closeInfoWindow(); [77] }); [78] [79] Création d'un nouvel observateur d'événement lié au marqueur nommé "marker" [80] L'événement détecté est "drag" c'est à dire toute la période durant laquelle le marqueur nommé "marker" est déplacé [81] GEvent.addListener(marker, 'drag', function(point) { [82] Quand "drag" est détecté, on appelle la fonction AfficheGPS() [83] AfficheGPS(marker); [84] }); [85] [86] Création d'un nouvel observateur d'événement lié au marqueur nommé "marker" [87] L'événement détecté est "dragend" c'est à dire l'instant ou le déplacement du marqueur nommé "marker" s'achève [88] GEvent.addListener(marker, 'dragend', function(point) { [89] Quand "drag" est détecté, on appelle la fonction AfficheGPS() [90] AfficheGPS(marker); [91] puis, on appelle la fonction recentrerCarte() [92] recentrerCarte(); [93] }); [94] [95] Affichage sur la carte nommée "MaCarte" du marqueur nommé "marker" [96] MaCarte.addOverlay(marker); [97] Appel de la fonction AfficheGPS() [98] AfficheGPS(marker); [99] Centre la carte nommée "MaCarte" sur le point nommé "point" avec un niveau de zoom égal à15 [100] MaCarte.setCenter(point, 15); [101] } [102] } [103] ); [104] } [105] } [106] //]]> [107] </script> [108] <style type="text/css"> [109] <!-- [110] #cadre {margin: 0; padding:10px 0 5px 0; width: 740px; height: auto; border: 1px solid #B8D6C2;text-align:center; background-color: #F6FCEC;} [111] #EmplacementDeMacarte {border: 1px solid #B8D6C2;} [112] --> [113] </style> [114] [115] </head> [116] [117] <body onload="load()" onunload="GUnload()"><center> [118] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [119] <br /> [120] <div id="cadre"> [121] Entrez une adresse ou validez celle indiquée par défaut. Puis déplacez le marqueur comme bon vous semble.<br /><br /> [122] <form action="#" onSubmit="AfficherAdresse(this.addresse.value); return false"> [123] [124] Adresse postale : <input type="text" size="60" name="addresse" value="RUE BRETONNEAU 37000 TOURS FRANCE" /> [125] <input type="submit" value="Valider" /> [126] </form> [127] <div align="center"> [128] <table width="350px" border="0px" cellpadding="0px" cellspacing="1px" bgcolor="#000000" style="margin:1em;"> [129] <tr><th colspan="2" style="text-align: center; background-color: #ccc;">Coordonnees GPS du marqueur</th></tr> [130] <tr><td width="35%" style="text-align: right; background-color: #ccc;"><b>Latitude</b> </td><td width="65%" style="text-align: left; background-color: #fff;"> <span id="idLatitude"> </span></td></tr> [131] [132] <tr><td style="text-align: right; background-color: #ccc;"><b>Longitude</b> </td><td style="text-align: left; background-color: #fff;"> <span id="idLongitude"> </span></td></tr> [133] </table> [134] </div> [135] </div></body> [136] </html>
En cours de construction
Néant