GAOU SEARCH: HTML5, API Google Maps & App Engine

+Ismael Toé

ismael.toe<at>gmail<dot>com

API HTML5 GEOLOCALISATION

<form> <input id="lieu" type="text" placeholder="Rechercher un lieu..." x-webkit-speech /> <input id="show_location" type="button" value="Déterminer ma position" /> <input id="submit" type="button" value="Rechercher" /> </form>

document.getElementById("show_location").addEventListener("click", positionHandler, false);

function positionHandler() { if (navigator.geolocation) { document.getElementById("lieu").value = 'Recherche localisation...'; navigator.geolocation.getCurrentPosition(showPosition, handlePositionError); } else { document.getElementById("lieu").value = 'Oops! Votre navigateur ne supporte pas la géolocalisation.'; } }

function showPosition(position) { position.coords.latitude; position.coords.longitude; }

function handlePositionError(evt) { document.getElementById("lieu").value = evt.message; }

API Google Maps

<div id="map_canvas"> </div>

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&libraries =places&region=CI&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

function initialize() { var latLng = new google.maps.LatLng(7.539989, -5.54708); var myOptions = { zoom: 6, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

document.getElementById("submit").addEventListener("click", initialize, false);

Geocoding & Overlay

address = document.getElementById("lieu").value || "Cote d'Ivoire"; geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(15); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } });

Autocomplete var input = document.getElementById('lieu'); var options = { componentRestrictions: {country: 'ci'} }; new google.maps.places.Autocomplete(input, options);

Itinéraire (1/4) <form> <label for="depart">Point de départ:</label> <input type="text" name="depart" id="depart" /> <label for="destination">Destination:</label> <input type="text" name="destination" id="destination" /> <input id="submit2" type="button" value="Calculer l'itinéraire"> </form> <div id="panel"> </div>

Itinéraire (2/4) panel = document.getElementById('panel'); direction = new google.maps.DirectionsRenderer({ map : map, panel : panel });

Itinéraire (3/4) document.getElementById("submit2").addEventListener("click", calculate, false);

Itinéraire (4/4) function calculate() { var depart = document.getElementById('depart').value; var destination = document.getElementById('destination').value; var request = { origin: depart, destination: destination, travelMode: google.maps.DirectionsTravelMode.DRIVING } var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { direction.setDirections(response); } }); }

Déploiement sur Google App Engine

app.yaml application: gaousearch version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: /css static_dir: css - url: /images static_dir: images - url: /js static_dir: js - url: /.* script: main.app libraries: - name: jinja2 version: "2.6 " - name: webapp2 version: "2.5.1"

main.py import os import webapp2 import jinja2 jinja_environment = jinja2.Environment( loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates')) ) class MainPage(webapp2.RequestHandler): def get(self): template_values = {} self.response.out.write( jinja_environment.get_template('index.html').render(template_values) ) app = webapp2.WSGIApplication([ ('/', MainPage), ], debug=True)

Avant la rencontre de Google, l'homme n'est rien que des virtualités aussi légères qu'une transparente vapeur.

Merci

http://gaousearch.appspot.com Contact Ismael Toé ismael.toe<at>gmail<dot>com www.tomsyweb.com