Bootcamp Google Abidjan 2012: Workshop Gaou Search

1,115 views

Published on

Published in: Technology, News & Politics
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,115
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Bootcamp Google Abidjan 2012: Workshop Gaou Search

  1. 1. GAOU SEARCH:HTML5, API Google Maps &App Engine +Ismael Toéismael.toe<at>gmail<dot>com
  2. 2. API HTML5GEOLOCALISATION
  3. 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. 4. document.getElementById("show_location").addEventListener("click", positionHandler, false);
  5. 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. 6. function showPosition(position) { position.coords.latitude; position.coords.longitude;}
  7. 7. function handlePositionError(evt) { document.getElementById("lieu").value = evt.message;}
  8. 8. API Google Maps
  9. 9. <div id="map_canvas"> </div>
  10. 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. 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. 12. document.getElementById("submit").addEventListener("click", initialize, false);
  13. 13. Geocoding & Overlayaddress = document.getElementById("lieu").value || "Cote dIvoire";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. 14. Autocompletevar input = document.getElementById(lieu);var options = { componentRestrictions: {country: ci}};new google.maps.places.Autocomplete(input, options);
  15. 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 litinéraire"></form><div id="panel"> </div>
  16. 16. Itinéraire (2/4)panel = document.getElementById(panel);direction = new google.maps.DirectionsRenderer({ map : map, panel : panel});
  17. 17. Itinéraire (3/4)document.getElementById("submit2").addEventListener("click", calculate, false);
  18. 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. 19. Déploiement sur GoogleApp Engine
  20. 20. app.yamlapplication: gaousearchversion: 1runtime: python27api_version: 1threadsafe: yeshandlers:- url: /css static_dir: css- url: /images static_dir: images- url: /js static_dir: js- url: /.* script: main.applibraries:- name: jinja2 version: "2.6 "- name: webapp2 version: "2.5.1"
  21. 21. main.pyimport osimport webapp2import jinja2jinja_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)
  22. 22. Avant la rencontre de Google, lhommenest rien que des virtualités aussi légèresquune transparente vapeur.
  23. 23. Mercihttp://gaousearch.appspot.comContactIsmael Toéismael.toe<at>gmail<dot>comwww.tomsyweb.com

×