CrazyCat Programming Factory
rendre internet plus accessible
 

Utilisation de GoogleMap - Géolocalisation

Logo javascriptJe ne vais pas décoder ici tout GoogleMap, la référence et quelques exemples assez bien documentés sont à http://www.google.com/apis/maps/documentation/index.html. C'est aussi là que vous pourrez générer une clé d'utilisation de googlemap (la chaîne ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 dans notre appel googlemap).
Nous allons plutôt nous attacher à réaliser une petite application permettant de remplir un formulaire web afin de localiser un lieu et d'entrer ses coordonnées dans une base de données.
La première chose à faire est d'instancier le scripts de googlemap et de créer nos fonctions d'initialisation.

Le javascript (fichier gmap.js)


// instanciation de la carte
var map = null;
// instanciation du géocodage
var geocoder = null;

// Fonction d'initialisation de la carte
function gmap_load(div, lng, lat, zoom) {
    // div: le div dans lequel nous affichons la carte
    // lng, lat: les coordonnées du point
    // zoom: le niveau de zoom de la carte
    if (GBrowserIsCompatible()) {
        if (!map) {
            map = new GMap2(document.getElementById(div));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
        }
        coord = new GLatLng( lat, lng )
        map.setCenter(coord, zoom);
        gmap_add_marker(coord, div);
    }
}

// Fonction d'ajout d'un marqueur
function gmap_add_marker(coord, div) {
    // coord: les coordonnées du point
    // div: le div dans lequel nous affichons la carte
    map.clearOverlays();
    var marker = new GMarker(coord, {draggable: true});
    // L'option |draggable: true} permet de déplacer le marqueur
    GEvent.addListener(marker, "click", function() {
        // Cette fonction permet de mettre à jour les coordonnées dans le formulaire
        ncoords = marker.getPoint();
        map.setCenter(ncoords);
        document.getElementById(div+'_lng').value = ncoords.lng();
        document.getElementById(div+'_lat').value = ncoords.lat();
    });
    map.addOverlay(marker);
}

// Fonction de recherche d'une adresse
function gmap_show_address(div, address) {
    if(!geocoder) {
        // si le geocoder n'a pas été utilisé, on l'instancie
        geocoder = new GClientGeocoder();
    }
    if(geocoder) {
        geocoder.getLatLng(address, function(point) {
            if(address== "" ) {
                // Cette condition permet de ne réagir que lorsque l'API a effectivement reçu notre champ
            } else if(!point) {
                // Ici, le cas où l'adresse n'existe pas dans la base de GoogleMaps
                alert(address +' : est introuvable sur GoogleMap');
            } else {
                gmap_load(div, point.lng(), point.lat(), true, map.getZoom());
                gmap_add_marker(point, field);
            }
        });
    }
}</script>

Ce script comporte donc 3 fonctions principales:
gmap_load sert à afficher ou raffraichir la carte,
gmap_add_marker sert a ajouter un marqueur sur la carte,
gmap_show_address sert à rechercher une adresse en utilisant l'application AJAX de GoogleMap.

Le code HTML


Vous aurez surement remarqué que nous ne nous basons que sur le nom du div dans lequel nous affichons la carte. Cela permet d'avoir une cohérence au niveau des noms des champs qui seront utilisés. La page la plus simple sera ainsi:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"></script>
<script language="javascript" type="text/javascript" src="./gmap.js"></script>
</head>
<body>
<div id="map" style="width: 420px; height: 380px"></div>
<form name="google_search" action="" method="post">
Longitude: <input type="text" id="map_lng" name="map_lng" /> - Latitude: <input type="text" id="map_lat" name="map_lat" />
Adresse à chercher: <input type="text" name="address" id="address" onblur="javascript:gmap_show_address('map', this.value);" size="50" />
<input type="submit" value="Envoyer" /></form>
<script language="javascript" type="text/javascript">gmap_load('map', 2.294351, 48.858844, 17);</script>
</body>
</html>

Vous pouvez constater que l'appel initial de gmap_load() ne se fait qu'après le chargement du div contenant la carte, afin d'éviter les erreurs de chargement javascript.
Vous pouvez tester ce script sur http://www.c-p-f.org/sources/gmap.php

©2006-2017 Geek Zone | eggdrop.fr | zeolia.net