Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 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 Απλό Παράδειγμα html { height: 100% } 7 body { height: 100%; margin: 0; padding: 0 } 8 #map-canvas { height: 100% } 9 10

Διαφημίσεις Google