Api Google Maps flèche Geocodeur flèche Géolocalisation d'une adresse postale et création d'un marqueur déplaçable.

GÉOLOCALISATION D'UNE ADRESSE ET
CRÉATION D'UN MARQUEUR DÉPLAÇABLE

Article créé le : 13/11/2008
 

Présentation

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 géolocaliser.

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 :

  • Les boutons [Plan] [Satellite] [Mixte] en haut à droite,
  • La mini-carte en bas à droite,
  • L'indicateur d'échelle en bas à gauche,
  • Le grand contrôle en haut à gauche.

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 relâchant 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".

Carte

Entrez une adresse ou validez celle indiquée par défaut.
Puis déplacez le marqueur comme bon vous semble.
Les coordonnées géographiques du marqueur apparaissent sous le bouton "Valider"

Adresse postale :

Les Coordonnees GPS du marqueur sont
Latitude (en degrés)  
Longitude (en degrés)  
Latitude (en radians)  
Longitude (en radians)  
Latitude (en pixels)  
Longitude (en pixels)  

Code

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <title>Touraine Verte : Marqueur déplaçable et affichage des coordonnées GPS</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=Insérez_Votre_Clef_API_ Ici"></script>
  • <script language="JavaScript" type="text/JavaScript">
  • /* Chargement du module "maps" dans sa version "2" */
  • google.load("maps","2");
  • var maCarte;
  • var geoCodeur;
  • var marker;
  • var point;
  • function centreCarte(){
  • var center = marker.getPoint();
  • window.setTimeout(function(){maCarte.panTo(center);}, 1000);
  • }
  •  
  • function afficheCoordonnees(point){
  • var zoom = maCarte.getZoom();
  • var normalProj = G_NORMAL_MAP.getProjection();
  • var sourisPixel = normalProj.fromLatLngToPixel(point, zoom);
  • document.getElementById("coordonneesGPSdegLat").innerHTML = "<b>"+point.lat()+"</b>";
  • document.getElementById("coordonneesGPSdegLng").innerHTML = "<b>"+point.lng()+"</b>";
  • document.getElementById("coordonneesGPSradLat").innerHTML = "<b>"+point.latRadians()+"</b>";
  • document.getElementById("coordonneesGPSradLng").innerHTML = "<b>"+point.lngRadians()+"</b>";
  • document.getElementById("coordonneesPixelsLat").innerHTML = "<b>"+sourisPixel.x+"</b>";
  • document.getElementById("coordonneesPixelsLng").innerHTML = "<b>"+sourisPixel.y+"</b>";
  • }
  •  
  • function geocodeAdresse(addresse) {
  • if (geoCodeur) {
  • geoCodeur.getLatLng(
  • addresse,
  • function(point) {
  • if (!point) {
  • alert("Impossible de géolocaliser cette adresse" + addresse);
  • } else {
  • maCarte.addControl(new google.maps.LargeMapControl());
  • maCarte.addControl(new google.maps.MapTypeControl());
  • maCarte.addControl(new google.maps.OverviewMapControl());
  • maCarte.addControl(new google.maps.ScaleControl());
  • marker = new google.maps.Marker(point, {draggable: true});
  • google.maps.Event.addListener(marker, 'dragstart', function() {
  • maCarte.closeInfoWindow();
  • });
  • google.maps.Event.addListener(marker, 'dragend', function(point) {
  • centreCarte();
  • });
  • google.maps.Event.addListener(marker, "drag", function(point) {
  • afficheCoordonnees(point);
  • });
  • maCarte.clearOverlays();
  • maCarte.addOverlay(marker);
  • maCarte.setCenter(point, 15);
  • afficheCoordonnees(point);
  • }
  • }
  • );
  • }
  • }
  •  
  • /* 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"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47, la Longitude 3, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47, 3), 5);
  • /* Création d'un géocodeur */
  • geoCodeur = new google.maps.ClientGeocoder();
  • /* 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");
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • </script>
  • <style type="text/css">
  • <!--
  • .cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
  • table.tablotexte{margin:0;margin-top:2em;padding:0;width:100%;border-collapse:collapse;border:1px solid #303030;font:1em Arial,Helvetica,sans-serif; background-color: #FFFFFF;}
  • table.tablotexte th{border:1px solid #303030;text-align:center;padding:5px;background:#d3cdb8;color:#513a0b;}
  • table.tablotexte td{border:1px solid #303030;text-align:justify;padding:5px;vertical-align:top;}
  • -->
  • </style>
  • </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>
  • <form action="#" onsubmit="geocodeAdresse(this.addresse.value); return false">
  • <div class="cadre">
  • <div>Entrez une adresse ou validez celle indiquée par défaut. Puis déplacez le marqueur comme bon vous semble.<br />Les <em>coordonnées géographiques du marqueur</em> apparaissent sous le bouton "Valider"</div>
  • <br />
  • <div>Adresse postale : <input type="text" size="60" name="addresse" value="rue bretonneau 37000 tours france" /></div>
  • <br />
  • <div><input type="submit" value="Valider" title="Valider le formulaire" alt="Valider le formulaire" /></div>
  • </div>
  • </form>
  • <table class="tablotexte">
  • <tr>
  • <th colspan="3">Coordonnées géographiques du marqueur</th>
  • </tr>
  • <tr>
  • <th>Unité</th>
  • <th>Latitude</th>
  • <th>Longitude</th>
  • </tr>
  • <tr>
  • <td>Degrès</td>
  • <td><div id="coordonneesGPSdegLat"></div></td>
  • <td><div id="coordonneesGPSdegLng"></div></td>
  • </tr>
  • <tr>
  • <td>Radians</td>
  • <td><div id="coordonneesGPSradLat"></div></td>
  • <td><div id="coordonneesGPSradLng"></div></td>
  • </tr>
  • <tr>
  • <td>Pixels</td>
  • <td><div id="coordonneesPixelsLat"></div></td>
  • <td><div id="coordonneesPixelsLng"></div></td>
  • </tr>
  • </table>
  • <!-- 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>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <title>Touraine Vertee : Marqueur déplaçable et affichage des coordonnées GPS</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=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script language="JavaScript" type="text/JavaScript">
  • var maCarte;
  • var geoCodeur;
  • var marker;
  • var point;
  • function centreCarte(){
  • var center = marker.getPoint();
  • window.setTimeout(function(){maCarte.panTo(center);}, 1000);
  • }
  •  
  • function afficheCoordonnees(point){
  • var zoom = maCarte.getZoom();
  • var normalProj = G_NORMAL_MAP.getProjection();
  • var sourisPixel = normalProj.fromLatLngToPixel(point, zoom);
  • document.getElementById("coordonneesGPSdegLat").innerHTML = "<b>"+point.lat()+"</b>";
  • document.getElementById("coordonneesGPSdegLng").innerHTML = "<b>"+point.lng()+"</b>";
  • document.getElementById("coordonneesGPSradLat").innerHTML = "<b>"+point.latRadians()+"</b>";
  • document.getElementById("coordonneesGPSradLng").innerHTML = "<b>"+point.lngRadians()+"</b>";
  • document.getElementById("coordonneesPixelsLat").innerHTML = "<b>"+sourisPixel.x+"</b>";
  • document.getElementById("coordonneesPixelsLng").innerHTML = "<b>"+sourisPixel.y+"</b>";
  • }
  •  
  • function geocodeAdresse(addresse) {
  • if (geoCodeur) {
  • geoCodeur.getLatLng(
  • addresse,
  • function(point) {
  • if (!point) {
  • alert("Impossible de géolocaliser cette adresse" + addresse);
  • } else {
  • maCarte.addControl(new GLargeMapControl());
  • maCarte.addControl(new GMapTypeControl());
  • maCarte.addControl(new GOverviewMapControl());
  • maCarte.addControl(new GScaleControl());
  • marker = new GMarker(point, {draggable: true});
  • GEvent.addListener(marker, 'dragstart', function() {
  • maCarte.closeInfoWindow();
  • });
  • GEvent.addListener(marker, 'dragend', function(point) {
  • centreCarte();
  • });
  • GEvent.addListener(marker, "drag", function(point) {
  • afficheCoordonnees(point);
  • });
  • maCarte.clearOverlays();
  • maCarte.addOverlay(marker);
  • maCarte.setCenter(point, 15);
  • afficheCoordonnees(point);
  • }
  • }
  • );
  • }
  • }
  •  
  • function initialize(){
  • if (GBrowserIsCompatible()) {
  • maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
  • maCarte.setCenter(new GLatLng(47, 3), 5);
  • geoCodeur = new GClientGeocoder();
  • }else{
  • alert("Désolé, mais votre navigateur n\'est pas compatible avec Google Maps");
  • }
  • }
  • </script>
  • <style type="text/css">
  • <!--
  • .cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
  • table.tablotexte{margin:0;margin-top:2em;padding:0;width:100%;border-collapse:collapse;border:1px solid #303030;font:1em Arial,Helvetica,sans-serif; background-color: #FFFFFF;}
  • table.tablotexte th{border:1px solid #303030;text-align:center;padding:5px;background:#d3cdb8;color:#513a0b;}
  • table.tablotexte td{border:1px solid #303030;text-align:justify;padding:5px;vertical-align:top;}
  • -->
  • </style>
  • </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>
  • <form action="#" onsubmit="geocodeAdresse(this.addresse.value); return false">
  • <div class="cadre">
  • <div>Entrez une adresse ou validez celle indiquée par défaut. Puis déplacez le marqueur comme bon vous semble.<br />Les <em>coordonnées géographiques du marqueur</em> apparaissent sous le bouton "Valider"</div>
  • <br />
  • <div>Adresse postale : <input type="text" size="60" name="addresse" value="rue bretonneau 37000 tours france" /></div>
  • <br />
  • <div><input type="submit" value="Valider" title="Valider le formulaire" alt="Valider le formulaire" /></div>
  • </div>
  • </form>
  • <table class="tablotexte">
  • <tr>
  • <th colspan="3">Coordonnées géographiques du marqueur</th>
  • </tr>
  • <tr>
  • <th>Unité</th>
  • <th>Latitude</th>
  • <th>Longitude</th>
  • </tr>
  • <tr>
  • <td>Degrès</td>
  • <td><div id="coordonneesGPSdegLat"></div></td>
  • <td><div id="coordonneesGPSdegLng"></div></td>
  • </tr>
  • <tr>
  • <td>Radians</td>
  • <td><div id="coordonneesGPSradLat"></div></td>
  • <td><div id="coordonneesGPSradLng"></div></td>
  • </tr>
  • <tr>
  • <td>Pixels</td>
  • <td><div id="coordonneesPixelsLat"></div></td>
  • <td><div id="coordonneesPixelsLng"></div></td>
  • </tr>
  • </table>
  • <!-- 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>

Remarque(s)

Autres articles :