1. Coder avec Google Maps API
Présenté par : Fadwa JERBI – 26/01/2013 -

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. 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. Web page + MAP(1/2)
4

5. Web page + MAP (2/2)
5

6. Overlays : Les
« Markers »(1/2)
6

7. Overlays : Les
« Markers »(2/2)
7

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. Overlays: Polylines(1/4)
La classe “Polyline” définit une couverture
linéaire de segment connectés sur la map.
9

10. Overlays: Polylines(2/4)
10

11. Overlays: Polylines(3/4)
11

12. Overlays: Polylines(4/4)
12

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. Overlays : Polygons(2/4)
14

15. Overlays : Polygons(3/4)
15

16. Overlays : Polygons(4/4)
16

17. Custom Controls
17

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