Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 10: Google Maps API Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας.

Παρουσίαση με θέμα: "Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 10: Google Maps API Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας."— Μεταγράφημα παρουσίασης:

1 Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 10: Google Maps API Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας

2 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2

3 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3

4 Σκοποί ενότητας Να ενσωματώνει σε ιστοσελίδα την υπηρεσία Google Map. Να αναλύει τον κώδικα που προστίθεται στην ιστοσελίδα και υλοποιεί την υπηρεσία Google Map. Να ελέγχει την υποστήριξη geolocation από τον browser. Να ορίζει και να διαχειρίζεται Markers. Να ορίζει Infowindow στον χάρτη και να τον συσχετίζει με marker. Προγραμματισμός Εφαρμογών Διαδικτύου 4

5 Περιεχόμενα ενότητας  Google Maps API. Google Maps API.  Εξήγηση Γραμμών κώδικα υπηρεσίας Google Maps. Εξήγηση Γραμμών κώδικα υπηρεσίας Google Maps.  Έλεγχος Υποστήριξης geolocation. Έλεγχος Υποστήριξης geolocation.  Markers. Markers.  Infowindow. Infowindow.  Συσχέτιση infowindow με marker. Συσχέτιση infowindow με marker.  Markers και Database. Markers και Database. Προγραμματισμός Εφαρμογών Διαδικτύου 5

6 Google Maps API  Προγραμματιστική διεπαφή που επιτρέπει την ενσωμάτωση της υπηρεσίας Google Maps στο δικό σας site.  Δεδομένης της αλληλεπίδρασης που παρέχει στον χρήστη όταν αυτός χρησιμοποιεί χάρτες στον browser, η γλώσσα προγραμματισμού για τoν προγραμματισμό της αλληλεπίδρασης είναι η JavaScript.  Mέσω AJAX κλήσεων μπορούμε βέβαια να εμπλέξουμε και server side scripting  π.χ. για να πάρουμε κάποιες πληροφορίες από ΒΔ και να τις προβάλουμε πάνω στο χάρτη  Sites με Google Maps παίζουν ΟΚ και σε mobile browsers και μάλιστα αξιοποιούν και τον αισθητήρα GPS των κινητών συσκευών.  Τελευταία έκδοση: JavaScript Maps API v3 (με αυτή θα δουλέψουμε).  Δωρεάν υπηρεσία για μη εμπορικά sites. Απαιτεί όμως Google Account και λήψη ενός κλειδιού. Για το κλειδί:  https://developers.google.com/maps/documentation/javascript/tutorial#api_key https://developers.google.com/maps/documentation/javascript/tutorial#api_key  Πρέπει να δηλώσετε σε ποια (δικά σας) domains (sites) χρησιμοποιείτε το κλειδί.  Τεκμηρίωση: https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/  Είναι ο καλύτερος τρόπος για να μάθετε να χρησιμοποιείτε το Google Maps API.  Ένα πρώτο παράδειγμα κώδικα βρίσκεται στη σελίδα:  https://developers.google.com/maps/documentation/javascript/tutorial https://developers.google.com/maps/documentation/javascript/tutorial Προγραμματισμός Εφαρμογών Διαδικτύου 6

7 Απλό Παράδειγμα 1 2 3 4 5 6 html { height: 100% } 7 body { height: 100%; margin: 0; padding: 0 } 8 #map-canvas { height: 100% } 9 10 <script type="text/javascript" 11 src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> 12 13 14 function initialize() { 15 var mapOptions = { 16 center: new google.maps.LatLng(-34.397, 150.644), 17 zoom: 8, 18 mapTypeId: google.maps.MapTypeId.ROADMAP 19 }; 20 var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 21 } 22 google.maps.event.addDomListener(window, 'load', initialize); 23 24 25 26 Προγραμματισμός Εφαρμογών Διαδικτύου 7

8 Εξήγηση Γραμμών Παραδείγματος  1: HTML 5 - αν ο browser δεν το κατανοεί θα μπει σε mode συμβατότητας (quirks).  5-9: CSS - ζητούμε όλη την επιφάνεια (viewport) του παραθύρου του browser. Ο χάρτης θα δημιουργηθεί μέσα στο div με id map-canvas που φαίνεται και στην 25.  10-12: Ενσωμάτωση του Google Maps. Εδώ χρειάζεται να βάλετε το κλειδί στη θέση του API_KEY. Στο sensor λέτε αν θέλετε χρήση αισθητήρα προσδιορισμού θέσης (GPS ή εναλλακτικά μέσω δικτύου GSM ή μέσω της IP αλλά με χαμηλή ακρίβεια). Βάλτε TRUE ή FALSE αν δεν θέλετε. Υπάρχει απλή (http) και secure (https) έκδοση.  4-21: η συνάρτηση που κάνει όλη τη δουλειά αρχικοποίησης του χάρτη. Ειδικότερα:  15-19: Ορίζουμε μια δομή ΜapOptions με αρχικές τιμές για το χάρτη 16: γεωγραφικές συντεταγμένες του κέντρου του χάρτη 17: αρχική τιμή zoom για τον χάρτη 18: τύπος χάρτη (στο παράδειγμα απλός οδικός χάρτης)  20: εδώ λέμε στο Google Map API να δημιουργήσει ένα χάρτη μέσα στο div με id map_canvas με τις αρχικές ρυθμίσεις που ορίσαμε στην δομή mapOptions.  22: Στο load event της σελίδας προσαρτούμε την συνάρτηση initialize.  Είναι σαν να βάζουμε onload="initialize();" στην ετικέτα body της σελίδας.  Αυτό τον τρόπο ορισμού συναρτήσεων ως event handlers (χειριστές συμβάντων) να τον κατανοήσετε άμεσα καθώς χρησιμοποιείται κατά κόρο στα επόμενα. Προγραμματισμός Εφαρμογών Διαδικτύου 8

9 Βασικές Έννοιες 1 https://developers.google.com/maps/documentation/javascript/reference https://developers.google.com/maps/documentation/javascript/reference  Που εμφανίζεται ο χάρτης;  Μέσα σε κάποιο block element, div κατά κύριο λόγο. Αυτό θα πρέπει να έχει id καθώς μέσω του id το Maps API θα καταλάβει που θα σχεδιάσει το χάρτη. Το div αυτό θα πρέπει να έχει ρητές διαστάσεις, απόλυτες (π.χ. σε px) ή σχετικές (π.χ. ποσοστό % επί του πατρικού στοιχείου) καθώς με βάση αυτές το API αποφασίζει τις διαστάσεις του χάρτη.  Πώς ορίζουμε γεωγραφικά σημεία;  Υπάρχει μέθοδος που ορίζει ένα γεωγραφικό σημείο με βάση το γεωγραφικό πλάτος (latitude ή lat) και μήκος (longitude ή long). Παράδειγμα:  var myPoint = new google.maps.LatLng(-34.397, 150.644); προσοχή στο θέμα case sensitivity – η JavaScript είναι case sensitive τα lat και long δίνονται σε δεκαδικές τιμές – αν τα έχετε σε "μοίρες λεπτά δεύτερα" πρέπει να τα μετατρέψετε (υπάρχουν on-line converters) οι τιμές στα lat και long είναι θετικές ή αρνητικές με πεδίο τιμών: lat (-90, 90), long (-180, 180) σε database σας καλύπτει ο τύπος decimal(10,7) που δίνει 10 ψηφία σύνολο, με 7 δεκαδικά (επαρκούν τα δεκαδικά – τόσο χρησιμοποιεί και η Google) Προγραμματισμός Εφαρμογών Διαδικτύου 9

10 Βασικές Έννοιες 2  Πόσοι τύποι χάρτη υπάρχουν; 4: ROADMAP, SATELLITE, TERRAIN, HYBRID ROADMAP HYBRID TERRAIN  Ο τύπος SATELLITE είναι σαν το HYBRID αλλά χωρίς δρόμους.  Στις παραμέτρους αρχικοποίησης (γραμμή 15 slide #3) ορίζουμε τον τύπο μέσω της ιδιότητας mapTypeId με τον ακόλουθο τρόπο: mapTypeId: google.maps.MapTypeId.ROADMAP  Απαιτούμενες Ρυθμίσεις Χάρτη (map options)  Για την αρχικοποίηση του χάρτη χρειάζονται κάποιες βασικές πληροφορίες. Αυτές ορίζονται με μια δομή (γραμμή 15 slide #3) που χτίζεται σε μια μεταβλητή. Αυτή η δομή δυνητικά περιλαμβάνει μεγάλο πλήθος παραμέτρων (πάνω από 30) αλλά συνήθως ορίζουμε 3 από αυτές, τις υποχρεωτικές. center: το γεωγραφικό σημείο στο κέντρο του χάρτη mapTypeId: ο τύπος του χάρτη (βλ. παραπάνω) zoom: το αρχικό επίπεδο zoom Προγραμματισμός Εφαρμογών Διαδικτύου 10

11 Βασικές Έννοιες 3  Παράδειγμα Ορισμού Δομής Αρχικοποίησης: var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };  Υπάρχουν ιδιότητες για "πειράξετε" τα πάντα (!) αν και σε πρώτο στάδιο δεν είναι απαραίτητο. Ενδεικτικά: draggable: αν ο χάρτης θα μπορεί να συρθεί με το mouse mapTypeControl: αν θα παρέχετε το control αλλαγής τύπου χάρτη maxZoom και minZoom Πλήρη τεκμηρίωση του τι υπάρχει και τι κάνει το κάθε τι, θα βρείτε στο URL στο slide #5. Μερικά πράγματα που ρυθμίζονται φαίνονται στην εικόνα.  Δημιουργία Χάρτη var map=new google.maps.Map(elementRef,mapOptions);  Το elementRef είναι μια αναφορά σε κάποιο html στοιχείο (π.χ. σε κάποιο div). Αν έχετε πχ ένα div με id="foo" τότε πρόσβαση σε αυτό σας δίνει η γνωστή εντολή: document.getElementById("foo") Προγραμματισμός Εφαρμογών Διαδικτύου 11

12 Έλεγχος Υποστήριξης geolocation (1/3)  Έλεγχος για το αν ο browser υποστηρίζει geolocation  μέσω αισθητήρα GPS, αν υπάρχει  με εναλλακτικούς τρόπους αν δεν υπάρχει GPS μέσω GSM τριγωνισμού (το κάνει το κινητό) μέσω διεύθυνσης IP (το κάνει ο browser με βάση την IP της συσκευής – χαμηλή ακρίβεια)  αν δεν το υποστηρίζει ο broweser (παλιός browser/JavaScript engine) το μόνο που μπορείτε να κάνετε είναι να βγάλετε ένα alert  Παράδειγμα: if(navigator.geolocation) { //ορισμός callback συναρτήσεων για τον χειρισμό επιτυχούς ή ανεπιτυχούς //προσδιορισμού θέσης navigator.geolocation.getCurrentPosition(cbGetCurPosOK, cbGetCurPosFail); } else { //o browser δεν υποστηρίζει geolocation alert('Your browser doesn\'t support geolocation.') }  Ο παραπάνω κώδικας μπαίνει μετά την δημιουργία του map object. Στο αρχικό παράδειγμα θα έμπαινε μετά τη γραμμή 20  Οι 2 callback συναρτήσεις (τα κόκκινα) πρέπει να οριστούν από εμάς. 2 callback συναρτήσεις Προγραμματισμός Εφαρμογών Διαδικτύου 12

13 Έλεγχος Υποστήριξης geolocation (3/3)  Callback συναρτήσεις (2 από 2) προσδιορισμού geolocation  Μη επιτυχής προσδιορισμός τρέχουσας θέσης (όχι επειδή δεν το υποστηρίζει ο browser – όταν το υποστηρίζει αλλά δεν μπορεί να δώσει στίγμα θέσης (π.χ. δεν βλέπει δορυφόρο) ) function cbGetCurPosFail(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: alert("Location information is unavailable."); break; case error.TIMEOUT: alert("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: alert("An unknown error occurred.") break; } Προγραμματισμός Εφαρμογών Διαδικτύου 13

14 Markers  Markers (…πινέζες!)  Είναι πολύ καλό να ορίσετε έναν πίνακα (array) που θα βοηθήσει στην διαχείριση των markers. Για παράδειγμα: var markers = []; (χρησιμοποιείται παρακάτω!!!)  Στον πίνακα markers μπορούμε να προσθέσουμε και να αφαιρέσουμε αναφορές σε markers.  Παράδειγμα δημιουργίας ενός marker για το σημείο location και ενσωμάτωσή του στον πίνακα markers. Προσοχή, τα μπλε παρακάτω θεωρείται ότι έχουν οριστεί ήδη: marker = new google.maps.Marker({ position: location,//το γεω-σημείο που θα μπει η πινέζα map: myMap,//ο χάρτης (map object) title: title,//το tooltip της πινέζας (κείμενο) icon: 'gasstation.png',//το icon της πινέζας draggable: true });//αν θα μπορούμε να το σύρουμε markers.push(marker);//ενσωμάτωση στο array markers  Οι πινέζες φαίνονται by default εφόσον οριστεί η παράμετρος myMap. Αν δεν οριστεί, τότε:  Εμφάνιση: markers[i].setMap(mapHandler); //συνδέουμε το market με χάρτη  Απόκρυψη: markers[i].setMap(null); //αποσυνδέουμε το market  Στις "πινέζες" μπορούμε να συνδέσουμε κάποιο infowindow (πλαίσιο που εμφανίζεται όταν κάνουμε click στην "πινέζα") και να ορίσουμε callback συναρτήσεις(event handlers) για διάφορα events (click, σύρσιμο, κτλ).  Παρατήρηση: Μεταξύ { και } υπάρχει μια δομή MarkerOptions που αρχικοποιεί το marker. Προγραμματισμός Εφαρμογών Διαδικτύου 14

15 Zoom στους markers  Η zoomExtends υλοποιεί zoom στο μικρότερο ορθογώνιο που περιέχει τις πινέζες. function zoomExtends() { //ορίζουμε ένα object-ορθογώνιο (για να ζουμάρουμε μετά πάνω του) var bounds = new google.maps.LatLngBounds(); //σαρώνουμε όλα τα markers και αναπροσαρμόζουμε τις συντεταγμένες //του παραπάνω ορθογωνίου ώστε τα markers να περιέχονται μέσα του for (var i = 0; i < markers.length; i++) { bounds.extend(markers[i].position); } //zoomάρουμε πάνω στο οριστικοποιημένο ορθογώνιο map.fitBounds(bounds); } Προγραμματισμός Εφαρμογών Διαδικτύου 15

16 Infowindow  To infowindow είναι ένα πλαίσιο που εμφανίζεται όταν ο χρήστης κάνει click πάνω σε marker και συνήθως χρησιμοποιείται για να δοθεί επιπλέον πληροφορία για το σημείο που επισημάνει ο market ή γενικότερα για κάποιο σημείο.  ΠΡΟΣΟΧΗ! Δεν φτιάχνουμε ένα infowindow για κάθε marker. Μπορούμε να έχουμε ένα μόνο infowindow και να το συσχετίζουμε κάθε φορά με τον marker στον οποίο έκανε click ο χρήστης (να το γεμίζουμε με περιεχόμενο και να το εμφανίζουμε.  Δημιουργία infowindow: var infowindow = new google.maps.InfoWindow ( { map: mymap, position: myPosition, content: 'You are here!' } );  map: αναφορά (reference) στο χάρτη στον οποίο ανήκει το infowindow (πρέπει να έχει δημιουργηθεί map object πριν!)  position: το γεωγραφικό σημείο με το οποίο σχετίζεται το infowindow  content: τι θα γράφει μέσα το infowindow (μπορεί να είναι απλό κείμενο αλλά και html)  Παρατήρηση : Στην πράξη, μεταξύ { και } παραπάνω, υπάρχει μια δομή InfoWindowOptions που αρχικοποιεί το infowindow (όπως η MapOptions αρχικοποιεί ένα map object και η MarkerOptions ένα marker object). Προγραμματισμός Εφαρμογών Διαδικτύου 16

17 Συσχέτιση infowindow με marker  Είναι κάτι που χρειαζόμαστε συχνά. Έχοντας φτιάξει ένα marker (με reference myMarker) και ένα infowindow (με reference myInfowindow) μπορούμε να ορίσουμε έναν event handler στο marker (π.χ. για το event 'click' στον marker) ώστε όταν κάνουμε click πάνω του να εμφανίζεται το infowindow. google.maps.event.addListener( myMarker, 'click', function(){ myInfowindow.setContent(infowintext); myInfowindow.open(map,this); } );  myMarker είναι μια αναφορά (reference) σε marker που έχουμε φτιάξει πριν  'click' είναι το event που θέλουμε να "πιάνουμε"  myInfowindow είναι μια αναφορά (reference) σε infowindow που έχουμε φτιάξει πριν  function() {... } είναι η callback συνάρτηση που υλοποιεί τον event handler.  Στο παράδειγμα παραπάνω, μόλις γίνει click στον συσχετισμένο marker, η callback συνάρτηση τροφοδοτεί με περιεχόμενο το infowindow (2 η γραμμή) και στη συνέχεια παρουσιάζει το infowindow στην οθόνη.  Με την ευκαιρία του παραπάνω event handler, να τονιστεί ότι υπάρχουν διαθέσιμα για προγραμματισμό πάνω από 20 διαφορετικά events σε σχέση με τις "πινέζες" (click, διπλό click, δεξί click, ξεκίνημα συρσίματος, mouse over, mouse out, κτλ.) Προγραμματισμός Εφαρμογών Διαδικτύου 17

18 Markers και Database  Αν θέλετε να δημιουργήσετε markers σε σχέση με data σε μια database μετά από αλληλεπίδραση με το χάρτη ή κάποια άλλα στοιχεία διεπαφής, θα πρέπει:  να ζητήσετε τα data σε XML μορφή με AJAX κλίση  να σαρώσετε τα XML data στην callback συνάρτηση χειρισμού του XML αποτελέσματος της AJAX κλήσης (βλ. slide 19 σε slides για AJAX) και για κάθε εγγραφή πιθανώς να φτιάχνετε κάποιο marker και να το κάνετε push στο array διαχείρισης των markers (βλ. slide #11). Διαγραφή Markers  Για να διαγράψετε markers:  αποκρύψτε τα από το χάρτη (βλ. slide #11), και  αδειάστε τον πίνακα διαχείρισης (βλ. slide #11) markers = []; Το Google Maps API είναι ιδιαίτερα πλούσιο σε ικανότητες και αξίζει να το γνωρίζει κανείς (έστω στα βασικά του σημεία) Προγραμματισμός Εφαρμογών Διαδικτύου 18

19 Καλό Καλοκαίρι! Προγραμματισμός Εφαρμογών Διαδικτύου 19

20 Τέλος Ενότητας