Coder avec Google Maps API          Présenté par : Fadwa JERBI – 26/01/2013 -
Sommaire• Introduction• Web page +MAP• Overlays :    –   Les « Markers »    –   Les « info window »    –   Les « Polylines...
Introduction• Un produit Google,• Un service gratuit, disponible pour tout type  de site,• Utilisation de JavaScript,• Cus...
Web page + MAP(1/2)                      4
Web page + MAP (2/2)                       5
Overlays : Les« Markers »(1/2)                   6
Overlays : Les« Markers »(2/2)                   7
Overlays : Les info              Window•   var myLatlng = new google.maps.LatLng(-25.363882,131.044922);    var mapOptions...
Overlays: Polylines(1/4)La classe “Polyline” définit une couverturelinéaire de segment connectés sur la map.              ...
Overlays: Polylines(2/4)                           10
Overlays: Polylines(3/4)                           11
Overlays: Polylines(4/4)                           12
Overlays : Polygons(1/4)• Similaire au « Polyline »• Ils sont pas ouvert mais plutôt conçu pour définir des régions fermée...
Overlays : Polygons(2/4)                           14
Overlays : Polygons(3/4)                           15
Overlays : Polygons(4/4)                           16
Custom Controls                  17
Basic Map Types• les types de cartes disponible dans Google Maps  API sont les suivants:  – MapTypeId.ROADMAP affiche « de...
Détecter navigateur sous mobile • function detectBrowser() {    var useragent = navigator.userAgent;    var mapdiv = docum...
Conclusion• http://code.google.com/apis/ajax/playground/#map_si  mple• https://developers.google.com/maps/documentation/• ...
Upcoming SlideShare
Loading in...5
×

Découvrir google maps api

411

Published on

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

No Downloads
Views
Total Views
411
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Découvrir google maps api"

  1. 1. Coder avec Google Maps API Présenté par : Fadwa JERBI – 26/01/2013 -
  2. 2. Sommaire• Introduction• Web page +MAP• Overlays : – Les « Markers » – Les « info window » – Les « Polylines » – Les « Polygons »• Custom controls• Basic Map Types• Détecter navigateur sous mobile• Conclusion 2
  3. 3. Introduction• Un produit Google,• Un service gratuit, disponible pour tout type de site,• Utilisation de JavaScript,• Customisation de la carte selon les besoins,• Une infinité de possibilté avec la dernière version V3 . 3
  4. 4. Web page + MAP(1/2) 4
  5. 5. Web page + MAP (2/2) 5
  6. 6. Overlays : Les« Markers »(1/2) 6
  7. 7. Overlays : Les« Markers »(2/2) 7
  8. 8. Overlays : Les info Window• var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var contentString = <div id="content">+ <div id="siteNotice">+ </div>+ <h2 id="firstHeading" class="firstHeading">Hello World!</h2> ; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World" }); google.maps.event.addListener(marker, click, function() { infowindow.open(map,marker); }); 8
  9. 9. Overlays: Polylines(1/4)La classe “Polyline” définit une couverturelinéaire de segment connectés sur la map. 9
  10. 10. Overlays: Polylines(2/4) 10
  11. 11. Overlays: Polylines(3/4) 11
  12. 12. Overlays: Polylines(4/4) 12
  13. 13. Overlays : Polygons(1/4)• Similaire au « Polyline »• Ils sont pas ouvert mais plutôt conçu pour définir des régions fermées. Les régions définies sont remplies dans un « polygon » 13
  14. 14. Overlays : Polygons(2/4) 14
  15. 15. Overlays : Polygons(3/4) 15
  16. 16. Overlays : Polygons(4/4) 16
  17. 17. Custom Controls 17
  18. 18. Basic Map Types• les types de cartes disponible dans Google Maps API sont les suivants: – MapTypeId.ROADMAP affiche « default road map view » – MapTypeId.SATELLITE affiche « Google Earth satellite images » – MapTypeId.HYBRID affiche un mélange entre la vue normale et celle du satellite. – MapTypeId.TERRAIN affiche une map physique en se basant sur les informations relatives aux terrain. 18
  19. 19. Détecter navigateur sous mobile • function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf(iPhone) != -1 || useragent.indexOf(Android) != -1 ) { mapdiv.style.width = 100%; mapdiv.style.height = 100%; } else { mapdiv.style.width = 600px; mapdiv.style.height = 800px; } } 19
  20. 20. Conclusion• http://code.google.com/apis/ajax/playground/#map_si mple• https://developers.google.com/maps/documentation/• http://fr.wikipedia.org/wiki/Google_Maps• fadwa.jerbi@gmail.com 20

×