Webjax.eu :: Module de recherche de directions (avancé)

Visualisation d'une page Webjax

Module de recherche de directions (avancé)

Cet exemple est propulsé par
Cette page vous présente un module de recherche de directions avancé présentant les résulats sur une carte Google Maps.
Cette page fait suite à la prise de connaissance par l'auteur de Webjax, de modules GMaps fonctionnant sur des appareils mobiles, et qui paraissait très adapté à gérer la situation pour une recherche de direction sur un mobile.
Force est de constaster que GMaps présente de base une interface optimisée permettant de prendre connaissance rapidement du détail d'un itinéraire recherché.

Module de recherche de directions (avancé)

Le module de recherche d'itinéraire est testable ci après.

Recherche d'itinéraire (avancé) Départ :
Arrivée :
Langue des textes :

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Arrivée :

Le code source du module de recherche est présenté ci après :
Le code Javascript/GMaps :
/* * initialize() * / function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); gdir = new GDirections(map, document.getElementById("directions")); //GEvent.addListener(gdir, "load", onGDirectionsLoad); //GEvent.addListener(gdir, "error", handleErrors); setDirections("Gare Saint-Lazare , Paris", "4 boulevard du Palais , Paris", "fr_FR"); } } / * setDirections () * */ function setDirections() { if (map==null) initialize(); gdir.load("from: " + $('fromAddress').value + " to: " + $('toAddress').value, { "locale": $F('locale') }); }
puis, le code XHTML/CSS du formulaire de recherche :
<fieldset> <legend>Départ : </label> <input type="text" size="25" id="fromAddress" name="from" value="Gare Saint-Lazare , Paris"/> <br/> <label for="depart">Arrivée : </label> <input type="text" size="25" id="toAddress" name="to" value="Boulevard du Palais , Paris"/> <br/> <label for="depart">Langue des textes : </label> <select id="locale" name="locale"> <option value="en" selected>English</option> <option value="fr">Français</option> <option value="de">Allemand</option> <option value="ja">Japonais</option> <option value="es">Espagnol</option> </select> <br/> <div id='directions' style='width:400px;height:auto;'></div> <div id='map_canvas'></div> <br/> <label for="depart">Arrivée : </label> <input type="button" id="ok1" name="ok1" value="recherche l'itinéraire" onClick="setDirections();return false;"/> <br/> </fieldset>

ico time

: 15/10/2007 18:13:27 | ico tag

ico tag

: Gmaps, gmaps, cartographie, cartes, localisation, geo, geolocalisation, directions, itinéraires, recherche, itineraires, googlemaps, google, maps, map,

ico com

Aucun commentaire enregistré