1. GAOU SEARCH:
HTML5, API Google Maps &
App Engine
+Ismael Toé
ismael.toe<at>gmail<dot>com

2. API HTML5
GEOLOCALISATION

3. <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>

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

5. 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.';
}
}

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

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

8. API Google Maps

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

10. 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;

11. 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);
}

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

13. 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
});
}
});

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

15. 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>

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

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

18. 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);
}
});
}

19. Déploiement sur Google
App Engine

20. 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"

21. 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)

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

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