Δικτυακές Εφαρμογές & Ηλεκτρονικό Εμπόριο

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΛΟΠΟΝΝΗΣΟΥ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ & ΤΕΧΝΟΛΟΓΙΑΣ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ Δικτυακές Εφαρμογές & Ηλεκτρονικό Εμπόριο Νικόλαος Δ. Τσελίκας Μάρτιος 2009

2 2

3 1. ΕΙΣΑΓΩΓΗ GOOGLE MAPS BASICS ΤΟ ΠΑΡΑΔΕΙΓΜΑ HELLO WORLD!!! Εγγραφή για ανάκτηση του Google Maps API Key Το "Hello, World" των Google Maps Γεωγραφικές Συντεταργμένες (Latitude και Longitude) Απεικονίσεις Χάρτη Info Windows MAP EVENTS Εισαγωγή στα Map Events Event Listeners Ορισμός Παραμέτρων στα Events Διαγραφή των Event Listeners MAPS CONTROLS Εισαγωγή στα Controls Προσθήκη Controls στον Χάρτη Αλλαγή θέσης των Controls στον Χάρτη Χρήση των προκαθορισμένων (default) controls MAP OVERLAYS Εισαγωγή στα Map Overlays Markers ΠΑΡΑΔΕΙΓΜΑ ΔΗΜΙΟΥΡΓΙΑΣ ΕΦΑΡΜΟΓΗΣ (STEP BY STEP) ΒΙΒΛΙΟΓΡΑΦΙΑ ΑΝΑΦΟΡΕΣ

4 1. Εισαγωγή Το Google Maps API αποτελεί μία προγραμματιστική διεπαφή για την ενσωμάτωση χαρτών Google (Google Maps) σε ιστοσελίδες με χρήση JavaScript. Πιο συγκεκριμένα, το API περιλαμβάνει ένα σύνολο λειτουργικοτήτων και υπηρεσιών, οι οποίες παρέχουν τη δυνατότητα για χειρισμό χαρτών και τον εμπλουτισμό τους με περιεχόμενο, με στόχο τη δημιουργία και παροχή προηγμένων βασισμένων σε χάρτες εφαρμογών μέσω ιστοσελίδων. Το Google Maps API οργανώνεται εννοιολογικά στις παρακάτω περιοχές, όπως αυτές προκύπτουν από την επίσημη βιβλιογραφία της Google ( GR/apis/maps/documentation/index.html): Basic Map Objects: περιλαμβάνει τις θεμελιώδεις έννοιες και τα αντικείμενα της διεπαφής, όπως τη χρήση του βασικού αντικειμένου GMap2 και τις βασικές λειτουργίες ενός χάρτη. Map Events: περιλαμβάνει το μοντέλο γεγονότων (Event Model) που αφορούν τον χάρτη και τα αντικείμενα αυτού. Map Controls: περιλαμβάνει τα στοιχεία διεπαφής χρήστη (User Interface, UI) που επιτρέπουν την αλληλεπίδραση του χρήστη με τον χάρτη. Map Overlays: περιλαμβάνει όλα εκείνα τα αντικείμενα που μπορούν να τοποθετηθούν πάνω σε έναν χάρτη σε συγκεκριμένα σημεία του (συντεταγμένες) ή περιοχές (π.χ. markers «πινέζες», icons, info windows κλπ.) Map Services: περιλαμβάνει όλες τις προηγμένες υπηρεσίες που παρέχει η διεπαφή (π.χ. geocoding, street view, google earth, search, directions κλπ.) Λεπτομερής ανάλυση καθώς και παράθεση αρκετών παραδειγμάτων για όλα τα παραπάνω παρουσιάζονται στις ενότητες που ακολουθούν. 4

5 2. Google Maps Basics Το παράδειγμα Hello world!!! Στην ενότητα αυτή θα υλοποιήσουμε την πρώτη μας απλή εφαρμογή με χρήση του Google Maps API. 2.1 Εγγραφή για ανάκτηση του Google Maps API Key Το πρώτο βήμα που απαιτείται προκειμένου να είναι δυνατή η χρήση του API είναι η ανάκτηση από τον χρήστη ενός κλειδιού, του Google Maps API Key. Προϋπόθεση για την ανάκτηση του κλειδιού είναι ο χρήστης να έχει ήδη δημιουργήσει (ή να δημιουργήσει) έναν λογαριασμό Google, με τον οποίο θα συνδεθεί άμεσα και το κλειδί που θα πάρει. Σημειώνουμε ότι δεν υπάρχει περιορισμός στον αριθμό των κλειδιών που μπορεί να ανακτήσει ένας χρήστης. Ωστόσο, κάθε κλειδί είναι έγκυρο για ένα directory ή domain. Αυτό που προτείνεται - για τις περισσότερες εφαρμογές - είναι η ανάκτηση του συγκεκριμένου κλειδιού με την εγγραφή του Domain Name. Με αυτόν τον τρόπο διασφαλίζουμε ότι το κλειδί θα είναι έγκυρο για τα ίδιο το domain, όλα τα subdomains, όλα τα URLs σε hosts εντός αυτών των domains και όλες τις πόρτες (ports) των hosts αυτών. Για παράδειγμα αν η εγγραφή γίνει για το το κλειδί θα είναι έγκυρο για τα: αλλά όχι για τα Ενώ αν η εγγραφή γίνει για το το κλειδί θα ισχύει για όλα τα παραπάνω URLs. 5

6 Επίσης το κλειδί που έχει ανακτηθεί για το είναι αποδεκτό μόνο εάν η πρόσβαση στην ιστοσελίδα πραγματοποιείται με χρήση του συγκεκριμένου URL και όχι με άμεση χρήση της IP διεύθυνσης του URL (π.χ. ή με χρήση κάποιου hostname το οποίο κάνει χρήση DNS εγγραφής ψευδωνύμου (CNAME record) και συνδέεται με το Η ανάκτηση του κλειδιού είναι δυνατή μέσω της ιστοσελίδας όπως φαίνεται στην παρακάτω εικόνα: Αφού ο χρήστης εισάγει το URL για το οποίο αιτείται την έκδοση κλειδιού (στο παραπάνω παράδειγμα βλέπουμε ότι έχει δηλωθεί ως URL το για τοπική μόνο χρήση), οδηγείται στην σελίδα Google Accounts προκειμένου να γίνει έλεγχος και πιστοποίηση του λογαριασμού Google (Google Account) ή να δημιουργήσει ένα νέο λογαριασμό για την περίπτωση που δεν έχει ήδη. 6

7 Αφού πραγματοποιηθεί ο έλεγχος ή δημιουργηθεί επιτυχώς ο νέος λογαριασμός, ο χρήστης παραλαμβάνει το κλειδί του, το οποίο και θα χρησιμοποιήσει στον κώδικα προκειμένου να είναι δυνατή η χρήση του API και κατά συνέπεια η εμφάνιση των χαρτών στην ιστοσελίδα του. Η χρήση του κλειδιού στον κώδικα παρουσιάζεται σε παράδειγμα που ακολουθεί στη συνέχεια. 7

8 2.2 Το "Hello, World" των Google Maps Στην ενότητα αυτή θα μελετηθεί μία απλή εφαρμογή για την εξοικείωση με τα βασικά αντικείμενα και τις λειτουργίες του Google Maps API. Το κομμάτι κώδικα που ακολουθεί χρησιμοποιείται για την εμφάνιση ενός χάρτη (διαστάσεων 500x300 pixels) κεντραρισμένου σε συγκεκριμένες συντεταγμένες

9 Το παραπάνω παράδειγμα περιλαμβάνει τα εξής: 1. Φαίνεται η φόρτωση του Google Maps API με χρήση του script tag. 2. Σημειώνεται το σημείο στο οποίο πρέπει να γράψουμε το κλειδί που πήραμε από τη διαδικασία που περιγράψαμε προηγουμένως (;key=abcdefg bla bla bla ). 3. Σημειώνεται το σημείο που πρέπει να δηλώσουμε (αν θέλουμε) τη γλώσσα στην οποία επιθυμούμε να εμφανίζεται η όλη λειτουργικότητα του χάρτη (&hl=el). 4. Φαίνεται η JavaScript μέθοδος για την δημιουργία του αντικειμένου "map" και το κεντράρισμα του χάρτη σε ένα σημείο με συγκεκριμένες γεωγραφικές συντεταγμένες. 5. Φαίνεται η αρχικοποίηση του αντικειμένου του χάρτη από το event onload του body tag. 6. Φαίνεται η δημιουργία ενός div element με το όνομα "map_canvas" για την εμφάνιση του χάρτη. Τα 6 αυτά βήματα αναλύονται περαιτέρω στη συνέχεια. Φόρτωση του Google Maps API <script src=" key=abcdefg =abcdefg&hl=el" type="text/javascript"> </script> 9

10 Με το συγκεκριμένο Java Script γνωστοποιείται στην εφαρμογή η τοποθεσία του Google Maps API ( και δηλώνεται το API κλειδί (;key=abcdefg) που ανακτήθηκε κατά τη διαδικασία της εγγραφής με αποτέλεσμα να καθίσταται δυνατή η πρόσβαση και χρήση από την εφαρμογή των κλάσεων και μεθόδων του Google Maps API. Στο συγκεκριμένο παράδειγμα το API Key που χρησιμοποιείται είναι το "abcdefg" Επίσης, στο συγκεκριμένο κομμάτι κώδικα επιλέγουμε και τη γλώσσα στην οποία επιθυμούμε να εμφανίζεται ο χάρτης καθώς και όλες οι πληροφορίες πάνω σε αυτόν προσθέτοντας την παράμετρο &hl=el ακριβώς μετά την δήλωση του API Key. Αυτό γίνεται γιατί το Google Maps API χρησιμοποιεί τα αγγλικά σαν προεπιλεγμένη γλώσσα. Δημιουργία και αρχικοποίηση του χάρτη function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 15); } } Στο σημείο αυτό ορίζεται μία μέθοδος, initialize(), η οποία δημιουργεί και αρχικοποιεί το αντικείμενο του χάρτη. var map = new GMap2(document.getElementById("map_canvas")); Η JavaScript κλάση που δημιουργεί τον χάρτη είναι η GMap2. Κάθε αντικείμενο της κλάσης αυτής ορίζει έναν χάρτη στην εφαρμογή. Μπορούμε να δημιουργήσουμε παραπάνω του ενός στιγμιοτύπου της κλάσης αυτής, ώστε να ορίσουμε παραπάνω του ενός χάρτη στην εφαρμογή μας. Δημιουργούμε ένα νέο στιγμιότυπο αυτής της κλάσης χρησιμοποιώντας τον new JavaScript operator. 10

11 Όταν δημιουργούμε ένα νέο στιγμιότυπο αυτής της κλάσης, ορίζουμε ένα DOM node (Document Object Model), το οποίο θα «περιέχει» το χάρτη. Ο παραπάνω κώδικας ορίζει μια μεταβλητή JavaScript (με το όνομα map) και την εκχωρεί σε ένα νέο GMap2 αντικείμενο. Η μέθοδος GMap2() είναι γνωστή σαν κατασκευαστής (constructor) και ο τύπος της είναι ο εξής: Κατασκευαστής GMap2(container, opts?) Περιγραφή Creates a new map inside the given HTML container, which is typically a DIV element. You may also pass optional parameters of type GMap2Options in the opts parameter. Σημειώστε ότι στην JavaScript δεν είναι απαραίτητο να ορίσουμε όλες τις παραμέτρους σε μία μέθοδο. map.setcenter(new GLatLng( , ), 15); Μόλις δημιουργήσουμε έναν χάρτη μέσω του GMap2 κατασκευαστή και χρειαζόμαστε ένα ακόμα βήμα για να τον αρχικοποιήσουμε. Αυτό γίνεται με χρήση της μεθόδου setcenter(). Αυτή η μέθοδος απαιτεί ένα ζεύγος συντεταγμένων GLatLng και το επίπεδο εστίασης. Η setcenter() πρέπει να ορίζεται πριν από κάθε άλλη λειτουργία του χάρτη. Το επίπεδο εστίασης κυμαίνεται από 0 (το οποίο απεικονίζει ολόκληρη την Γη) έως 19 (το οποίο μπορεί να απεικονίσει ακόμα και κτήρια). Για την Ελλάδα (έως σήμερα) σχεδόν όλη η χώρα καλύπτεται τουλάχιστον έως και το επίπεδο εστίασης 17. Σημείωση: Το επίπεδο εστίασης του χάρτη διαφοροποιείται από χώρα σε χώρα και από περιοχή σε περιοχή. 11

12 Φόρτωση του Χάρτη <body onload="initialize()" onunload="gunload()"> Για να φορτώσουμε τον χάρτη μόνο όταν φορτώνεται η HTML σελίδα, καλούμε στο <body> tag τη μέθοδο αρχικοποίησης του χάρτη, την initialize(), με την πραγματοποίηση του onload event. Η μέθοδος GUnload()χρησιμοποιείται για να μειώσουμε τα memory leaks. DOM Nodes του Χάρτη <div id="map_canvas" style="width: 500px; height: 300px"></div> Για να εμφανίσουμε τον χάρτη σε μία ιστοσελίδα τον τοποθετήσουμε σε ένα div element. Ορίζουμε ένα div element με το όνομα "map_canvas" και το μέγεθός του (σε pixels) χρησιμοποιώντας τα style attributes. Το μέγεθος του χάρτη μπορεί να οριστεί και με την χρήση της μεταβλητής GMapOptions στην μέθοδο αρχικοποίησης του χάρτη Γεωγραφικές Συντεταργμένες (Latitude και Longitude) Για την αναφορά σε συγκεκριμένα γεωγραφικά σημεία πάνω στο χάρτη με χρήση συντεταγμένων, το Google Maps API παρέχει την κλάση GLatLng. Δημιουργούμε ένα GLatLng αντικείμενο ορίζοντας σαν παραμέτρους τις γεωγραφικές συντεταγμένες (latitude, longitude) όπως παρακάτω: var mygeographiccoordinates = new GLatLng(myLatitude, mylongitude) 12

13 Σημείωση: Η διαδικασία μετατροπής μιας διεύθυνσης σε γεωγραφικό σημείο είναι γνωστή ως geocoding και θα συζητηθεί παρακάτω. Με χρήση γεωγραφικών συντεταγμένων είναι επίσης δυνατόν να καθοριστούν τα γεωγραφικά όρια ενός χάρτη. Για παράδειγμα, ένας χάρτης απεικονίζει πάντα ένα viewport, δηλαδή ένα παράθυρο μίας περιοχής με τα χαρακτηριστικά της. Το viewport μπορεί εύκολα να ορισθεί από ένα τετράγωνο μέσω του αντικειμένου GLatLngBounds που παρέχει τη δυνατότητα ορισμού μίας τετραγωνικής περιοχής, η οποία χρησιμοποιεί δύο GLatLng αντικείμενα που αναπαριστούν τη νοτιοδυτική και τη βορειανατολική άκρη του viewport. Τα GLatLng αντικείμενα έχουν πολλές εφαρμογές στα Google Maps API. Το GMarker αντικείμενο παίρνει σαν παράμετρο ένα GLatLng αντικείμενο, και τοποθετεί ένα marker («πινέζα») στον χάρτη στη δεδομένη γεωγραφική θέση. Το παρακάτω παράδειγμα χρησιμοποιεί τη μέθοδο getbounds() ώστε να επιστρέψει ένα συγκεκριμένο viewport και στη συνέχεια τοποθετεί τυχαία 10 markers («πινέζες») μέσα στα όρια του χάρτη: function initialize() { var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 13); } // Add 10 markers to the map at random locations var bounds = map.getbounds(); var southwest = bounds.getsouthwest(); var northeast = bounds.getnortheast(); var lngspan = northeast.lng() - southwest.lng(); var latspan = northeast.lat() - southwest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latspan * Math.random(), southwest.lng() + lngspan * Math.random()); map.addoverlay(new GMarker(point)); } Σημείωση: περισσότερες πληροφορίες για το GMarker αντικείμενο θα δούμε παρακάτω. 13

14 2.2.2 Απεικονίσεις Χάρτη Το Google Maps API εμφανίζει με προκαθορισμένο τρόπο τους χάρτες χρησιμοποιώντας την μορφή οδικού χάρτη. Όμως, σε μία εφαρμογή είναι δυνατή και η χρήση άλλων τύπων χαρτών από τους διαθέσιμους, οι οποίοι είναι οι παρακάτω: G_NORMAL_MAP- απεικόνιση της περιοχής ως μέρος οδικού χάρτη. G_SATELLITE_MAP απεικόνιση της περιοχής από δορυφόρο του Google Earth G_HYBRID_MAP απεικόνιση της περιοχής υπό μία υβριδική μορφή (μιας μίξης της NORMAL και της SATELLITE). G_PHYSICAL_MAP απεικόνιση της περιοχής ως μέρος γεωφυσικού χάρτη. G_DEFAULT_MAP_TYPES πίνακας με τις παραπάνω μορφές. Μπορούμε να τροποποιήσουμε τον τύπο του χάρτη χρησιμοποιώντας την setmaptype() μέθοδο του GMap2 αντικειμένου. Για παράδειγμα, ο παρακάτω κώδικας ορίζει τον χάρτη να χρησιμοποιεί τον SATELLITE τύπο. 14

15 var map = new GMap2(document.getElementById("map_canvas")); map.setmaptype(g_satellite_map); Σημείωση: Περισσότερα για map tiles θα δούμε παρακάτω Info Windows To Google Maps API παρέχει τη δυνατότητα χρήσης info-windows μέσω της κλάσης GinfoWindow, η οποία εμφανίζει HTML περιεχόμενο σε ένα pop-up παράθυρο μέσα στον ίδιο τον χάρτη. Το GInfoWindow αντικείμενο δεν έχει κατασκευαστή (constructor). Το pop-up παράθυρο δημιουργείται και ενσωματώνεται στον χάρτη όταν αυτός δημιουργείται και δεν είναι δυνατή η εμφάνιση περισσοτέρων του ενός παραθύρου σε έναν χάρτη. Το GMap2 αντικείμενο παρέχει την openinfowindow() μέθοδο, η οποία παίρνει σαν όρισμα το γεωγραφικό σημείο και ένα HTML DOM element. Η openinfowindowhtml() μέθοδος είναι ίδια, αλλά παίρνει μόνο ένα HTML αλφαριθμητικό σαν δεύτερη παράμετρο αντί για ένα DOM element. Για να δημιουργήσουμε ένα info window, καλούμε την openinfowindow μέθοδο, περνώντας σαν ορίσματα ένα γεωγραφικό σημείο και ένα DOM element που θέλουμε να εμφανίσουμε. Το παρακάτω παράδειγμα εμφανίζει ένα info window στο κέντρο του χάρτη με το μήνυμα "Hello world!!!". var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 13); map.openinfowindow(map.getcenter(), document.createtextnode("hello world!!!")); 15

16 16

17 3. Map Events 3.1 Εισαγωγή στα Map Events Η JavaScript ως γνωστόν ενσωματώνεται σε ιστοσελίδες και βασίζεται στην ύπαρξη γεγονότων (event driven). Αυτό σημαίνει ότι για την πραγματοποίηση οποιασδήποτε αλληλεπίδρασης απαιτείται η πραγματοποίηση/εκπλήρωση κάποιου γεγονότος (event), όπως για παράδειγμα το κλικ του ποντικιού ή η χρήση του πληκτρολογίου. Η πραγματοποίηση ενός γεγονότος προκαλεί την εκτέλεση κάποιας μεθόδου με χρήση των κατάλληλων event listeners. Το Google Maps API χρησιμοποιεί events, τα οποία είναι ανεξάρτητα από τα κοινά DOM events. Ωστόσο, αν και διαφορετικοί browsers υλοποιούν διαφορετικά DOM events, το Google Maps API παρέχει τον απαραίτητο μηχανισμό ώστε να ακούει, να αντιλαμβάνεται και να ανταποκρίνεται σε αυτά, χωρίς να χρειάζεται να χειριστεί κανείς τις ιδιαιτερότητες του κάθε browser. 3.2 Event Listeners Για τον χειρισμό των events στις εφαρμογές που κάνουν χρήση του Google Maps API χρησιμοποιούνται οι λειτουργίες που παρέχονται από το GEvent namespace για τη δημιουργία των event listeners. Κάθε αντικείμενο του Google Maps API μπορεί να αντιληφθεί ένα σύνολο από events. Για παράδειγμα, το GMap2 αντικείμενο μπορεί να διαχειριστεί και να ανταποκριθεί σε events όπως τα click, dblclick, move και άλλα. Κάθε γεγονός (event) πραγματοποιείται υπό συγκεκριμένες συνθήκες, οι οποίες καθορίζονται από τα επί μέρους ορίσματα του κάθε γεγονότος (event). Για παράδειγμα ένα event τύπου mousemove πραγματοποιείται όταν ο χρήστης κινεί το ποντίκι πάνω σε έναν χάρτη και έχει σαν όρισμα ένα αντικείμενο τύπου GlatLng με τις γεωγραφικές συντεταγμένες του σημείου στο οποίο είναι τοποθετημένο το ποντίκι. 17

18 Προκειμένου, λοιπόν, η εφαρμογή να είναι σε θέση να αντιληφθεί ένα γεγονός και ανάλογα με αυτό να εκτελέσει κάποια λειτουργία, απαιτείται η δημιουργία του κατάλληλου event listener με χρήση της static μεθόδου GEvent.addListener(). Αυτή η μέθοδος παίρνει σαν ορίσματα το event που πρέπει να «ακούει» καθώς και τη μέθοδο που θα κληθεί όταν πραγματοποιηθεί το συγκεκριμένο event. Για παράδειγμα, στον παρακάτω κώδικα, κάθε φορά που ο χρήστης κάνει click στον χάρτη εμφανίζεται ένα προειδοποιητικό μήνυμα: var map = new GMap2(document.getElementById("map")); map.setcenter(new GLatLng( , ), 13); GEvent.addListener(map, "click", function() { alert("you just clicked the map..."); }); Στο επόμενο παράδειγμα, κάθε φορά που ο χρήστης μετακινεί τον χάρτη εμφανίζονται κάτω από αυτόν οι συντεταγμένες του κέντρου του: var map = new GMap2(document.getElementById("map")); GEvent.addListener(map, "moveend", function() { var center = map.getcenter(); document.getelementbyid("message").innerhtml = center.tostring(); }); map.setcenter(new GLatLng( , ), 13); 18

19 3.3 Ορισμός Παραμέτρων στα Events Σε πολλά events παρέχεται η δυνατότητα να «περνάμε» ορίσματα. Για παράδειγμα, στο GMap2 "click" event μπορούμε να περάσουμε δυο ορίσματα (overlay,point). Στο επόμενο παράδειγμα, όταν ο χρήστης κάνει click στον χάρτη, εμφανίζεται ένα info window, το οποίο περιέχει τις γεωγραφικές συντεταγμένες του σημείου στο οποίο έκανε click ο χρήστης: GEvent.addListener(map,"click", function(overlay,latlng) { if (overlay) { // ignore if we click on the info window return; } var currentprojection = G_NORMAL_MAP.getProjection(); var myhtml = "Latitude: " + latlng.lat() + "<br/>longitude: " + latlng.lng(); map.openinfowindowhtml(latlng, myhtml); }); 19

20 3.4 Διαγραφή των Event Listeners Όταν ένας event listener δεν είναι πλέον απαραίτητος, πρέπει να διαγράφεται. Αυτό ίσως να χρειάζεται όταν θέλουμε να «πιάσουμε» ένα event μόνο μία φορά. Η διαγραφή των event listeners μπορεί να γίνει καλώντας την static μέθοδο removelistener(). 20

21 4. Maps Controls 4.1 Εισαγωγή στα Controls Οι χάρτες του Google περιλαμβάνουν στοιχεία αλληλεπίδρασης με το χρήστη (UserInterface- UI elements), ώστε να επιτρέπουν στον χρήστη να αλληλεπιδρά με τον χάρτη. Αυτά τα στοιχεία είναι γνωστά ως controls και μπορούμε να συμπεριλάβουμε παραλλαγές αυτών των controls στις Google Maps εφαρμογές. Επίσης υπάρχει η δυνατότητα χρήσης customized controls τροποποιώντας την υπάρχουσα κλάση GControl. Ορισμένα από τα σημαντικότερα και συνηθέστερα controls είναι τα εξής: GlargeMapControl3D το μεγάλο 3D pan/zoom control, όπως εμφανίζεται σήμερα (Μάρτιος 2009) στην ιστοσελίδα Google Maps GLargeMapControl το απλό μεγάλου μεγέθους pan/zoom control, όπως εμφανιζόταν παλαιότερα στην ιστοσελίδα Google Maps GSmallMapControl - το απλό μικρότερου μεγέθους pan/zoom control GsmallZoomControl3D - μικρού μεγέθους zoom control όπως εμφανίζεται σήμερα (Μάρτιος 2009) στην ιστοσελίδα Google Maps GsmallZoomControl - μικρού μεγέθους zoom control όπως εμφανιζόταν παλαιότερα στην ιστοσελίδα Google Maps GScaleControl κλίμακα του χάρτη GMapTypeControl κουμπιά (buttons) για την επιλογή διαφορετικών απεικονίσεων του χάρτη GHierarchicalMapTypeControl σύνολο από buttons και menu items για την τοποθέτηση πολλών επιλογέων διαφορετικών τύπων χαρτών GOverviewMapControl χάρτης επισκόπησης στη γωνία του χάρτη Τα GMapTypeControl και GHierarchicalMapTypeControl αποτελούν ειδικές περιπτώσεις και χρειάζονται ειδική διαμόρφωση. Το GMapTypeControl απεικονίζει πάνω στον χάρτη ένα συγκεκριμένο σετ επιλογών απεικόνισης, το οποίο περιλαμβάνει τα εξής: 21

22 G_NORMAL_MAP - η προκαθορισμένη οδική μορφή G_SATELLITE_MAP απεικόνιση δορυφορικών εικόνων του Google Earth G_HYBRID_MAP απεικόνιση μιας μίξης της NORMAL και της SATELLITE Στο σετ αυτό δεν περιλαμβάνεται η απεικόνιση του γεωφυσικού χάρτη της Γης - G_PHYSICAL_MAP. Επίσης, αυτό το σετ μπορεί να τροποποιηθεί αφαιρώντας κάποια από τις δυνατές επιλογές με χρήση της GMap2.removeMapType() ή προσθέτοντας αντίστοιχα κάποια με χρήση της GMap2.addMapType(). Στο παράδειγμα που ακολουθεί αφαιρείται από τις επιλογές απεικόνισης η υβριδική, G_HYBRID_MAP, και παραμένουν οι άλλες δύο (οδική και δορυφορική) ενώ παράλληλα παρατηρούμε ότι ορίζεται εκ νέου η διάσταση του χάρτη (σε 640x320 pixels): var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } ); map.removemaptype(g_hybrid_map); map.setcenter(new GLatLng( , ), 13); var mapcontrol = new GMapTypeControl(); map.addcontrol(mapcontrol); map.addcontrol(new GLargeMapControl()); 22

23 4.2 Προσθήκη Controls στον Χάρτη Η προσθήκη των controls στον χάρτη πραγματοποιείται με την μέθοδο addcontrol(). Για παράδειγμα, για να προσθέσουμε το control εστίασης (zoom) πρέπει να συμπεριλάβουμε το παρακάτω κομμάτι κώδικα στην εφαρμογή μας: map.addcontrol(new GLargeMapControl()); Μπορούμε επίσης να προσθέσουμε διάφορα controls στον χάρτη. Στο παρακάτω παράδειγμα προσθέτουμε τα GSmallMapControl και GMapTypeControl controls: var map = new GMap2(document.getElementById("map")); map.addcontrol(new GSmallMapControl()); map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 13); 23

24 4.3 Αλλαγή θέσης των Controls στον Χάρτη Η μέθοδος addcontrol παίρνει μία δεύτερη παράμετρο, την GControlPosition, η οποία επιτρέπει τον καθορισμό της θέσης των controls στον χάρτη. Οι τιμές της GControlPosition μπορεί να είναι μία από τις: G_ANCHOR_TOP_RIGHT (πάνω δεξιά που είναι και η προκαθορισμένη θέση) G_ANCHOR_TOP_LEFT (πάνω αριστερά) G_ANCHOR_BOTTOM_RIGHT (κάτω δεξιά) G_ANCHOR_BOTTOM_LEFT (κάτω αριστερά) κάθε μία από τις οποίες καθορίζει την γωνία που θα τοποθετηθεί το control. Εάν αυτή η παράμετρος δεν ορίζεται, τότε το Maps API χρησιμοποιεί την προκαθορισμένη (default) θέση του control. Η GControlPosition μπορεί επίσης να καθορίσει την απόσταση (σε pixels) από τις άκρες του χάρτη όπου θα τοποθετηθεί το control. Αυτό γίνεται με την χρήση της κλάσης GSize. Το παρακάτω παράδειγμα προσθέτει ένα GMapTypeControl control στην πάνω-δεξιά γωνία με 10 pixels απόσταση από την άκρη του χάρτη (padding). Κάνοντας διπλό click στον χάρτη το control θα μεταφερθεί στην κάτω-δεξιά γωνία του χάρτη: var map = new GMap2(document.getElementById"map_canvas")); var maptypecontrol = new GMapTypeControl(); var topright = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)); var bottomright = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)); map.addcontrol(maptypecontrol, topright); GEvent.addListener(map, "dblclick", function() { map.removecontrol(maptypecontrol); map.addcontrol(new GMapTypeControl(), bottomright); }); map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng( , ), 13); 24

25 Πριν το διπλό click: Μετά το διπλό click: 4.4 Χρήση των προκαθορισμένων (default) controls Εναλλακτικά, αντί να ορίζουμε ένα-ένα τα controls που επιθυμούμε να εμφανίζονται στον χάρτη, μπορούμε να χρησιμοποιήσουμε την μέθοδο GMap2.setUIToDefault(). Με τη μέθοδο αυτή ο χάρτης της εφαρμογής αποκτά το look&feel των Google Maps ( και περιλαμβάνει το μεγάλο 3D pan/zoom control, τις τέσσερις επιλογές απεικόνισης του χάρτη και την κλίμακα. Επίσης πρέπει να αναφερθεί ότι 25

26 σε περίπτωση που υπάρξουν αλλαγές στo UI των Google Maps, τότε οι αλλαγές αυτές θα πραγματοποιηθούν αυτόματα και στους χάρτες που κάνουν χρήση της μεθόδου GMap2.setUIToDefault(). var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 15); map.setuitodefault(); 26

27 5. Map Overlays 5.1 Εισαγωγή στα Map Overlays Τα overlays είναι αντικείμενα στον χάρτη τοποθετημένα σε συγκεκριμένα σημεία/γεωγραφικές συντεταγμένες. Τα overlays απεικονίζουν, στην ουσία, αντικείμενα που προστίθενται στον χάρτη για να προσδιορίσουν σημεία, γραμμές ή περιοχές. Το Google Maps API παρέχει διάφορους τύπους overlays: Σημεία στον χάρτη που εμφανίζονται με τη χρήση markers. Τα markers («πινέζες») είναι αντικείμενα τύπου GMarker. Γραμμές στον χάρτη που εμφανίζονται με τη χρήση των polylines (οι οποίες αναπαριστούν ένα πλήθος από σημεία). Οι polylines είναι αντικείμενα τύπου GPolyline. Περιοχές σε έναν χάρτη εμφανίζονται με τη χρήση είτε των polygons (εάν πρόκειται για περιοχές μη ορισμένου σχήματος), είτε των ground overlays (εάν πρόκειται για περιοχές ορθογώνιου σχήματος). Ο χάρτης σαν αντικείμενο εμφανίζεται σαν tile overlay. Είναι δυνατή η τροποποίησή του με τη χρήση της κλάσης GTileLayerOverlay ή η δημιουργία νέου τύπου με τη χρήση της κλάσης GMapType. Το info window είναι επίσης ένα είδος overlay. Κάθε overlay υλοποιεί ένα GOverlay interface. Τα overlays μπορούν να προστεθούν στον χάρτη με τη χρήση της GMap2.addOverlay() μεθόδου και μπορούν να αφαιρεθούν με την μέθοδο GMap2.removeOverlay(). 5.2 Markers Τα markers («πινέζες») χρησιμοποιούνται για να ορίσουν ή να τονίσουν κάποια σημεία στον χάρτη. Χρησιμοποιούν το προκαθορισμένο G_DEFAULT_ICON. Ο GMarker constructor παίρνει σαν όρισμα ένα αντικείμενο τύπου GLatLng και ένα προαιρετικό GMarkerOptions. 27

28 Τα markers έχουν σχεδιαστεί έτσι ώστε να μπορούν να αλληλεπιδρούν. Το βασικό event που «ακούν» είναι το click event και συνήθως χρησιμοποιούνται μέσα σε event listeners με απώτερο σκοπό να εμφανίσουν ένα info window. Στο παρακάτω παράδειγμα τοποθετούνται 10 markers σε τυχαία σημεία στον χάρτη. var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 13); // Add 10 markers to the map at random locations var bounds = map.getbounds(); var southwest = bounds.getsouthwest(); var northeast = bounds.getnortheast(); var lngspan = northeast.lng() - southwest.lng(); var latspan = northeast.lat() - southwest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latspan * Math.random(), southwest.lng() + lngspan * Math.random()); map.addoverlay(new GMarker(point)); } 28

29 Κινούμενα Markers Η αλληλεπίδραση των markers είναι δυνατή είτε βάσει του event click είτε με το event μετακίνησης ( drag ), δηλ. κατά τη μετακίνησή τους σε μία νέα θέση. Τα κινούμενα markers ( draggable markers ) «ακούν» στα εξής 4 διαφορετικά events: click, dragstart, drag και dragend για να καθορίσουν την κατάστασή τους. Για να καταστήσουμε κάποιο marker κινούμενο, θα πρέπει να το αρχικοποιήσουμε θέτοντας την επιλογή draggable σε true. Στο παρακάτω παράδειγμα, τοποθετούμε ένα κινούμενο marker στον χάρτη και προσθέτουμε κατάλληλα event listeners για τα events dragstart και dragend. var map = new GMap2(document.getElementById("map_canvas")); var center = new GLatLng( , ); map.setcenter(center, 13); var marker = new GMarker(center, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeinfowindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openinfowindowhtml("this is just a dummy message... "); }); map.addoverlay(marker); 29

30 Εικονίδια Τα markers δίνουν τη δυνατότητα να οριστεί διαφορετικό εικονίδιο από το προκαθορισμένο που μοιάζει με «κόκκινη πινέζα» πάνω στον χάρτη. Τα ελάχιστα χαρακτηριστικά που πρέπει οριστούν για ένα νέο εικονίδιο είναι η εικόνα, το μέγεθός του GSize, και το περιθώριο της εικόνας. Τα πιο απλά εικονίδια που μπορούμε να χρησιμοποιήσουμε βασίζονται στο αντικείμενο G_DEFAULT_ICON. Η δημιουργία εικονιδίου που βασίζεται σε αυτόν τον τύπο μας επιτρέπει να το μετατρέψουμε εύκολα, αλλάζοντας μόνο ορισμένες από τις ιδιότητές του. Στο παρακάτω παράδειγμα, δημιουργούμε ένα εικονίδιο τύπου G_DEFAULT_ICON και μετά το τροποποιούμε κατάλληλα ώστε να αλλάξουμε την τελική του εμφάνιση (σε σχέση πάντοτε με το προκαθορισμένο εικονίδιο «κόκκινη πινέζα»). var map = new GMap2(document.getElementById("map_canvas")); map.addcontrol(new GSmallMapControl()); map.setcenter(new GLatLng( , ), 13); // Create our "tiny" marker icon var blueicon = new GIcon(G_DEFAULT_ICON); blueicon.image = " // Set up our GMarkerOptions object markeroptions = { icon:blueicon }; // Add 10 markers to the map at random locations var bounds = map.getbounds(); var southwest = bounds.getsouthwest(); var northeast = bounds.getnortheast(); var lngspan = northeast.lng() - southwest.lng(); var latspan = northeast.lat() - southwest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latspan * Math.random(), southwest.lng() + lngspan * Math.random()); map.addoverlay(new GMarker(point, markeroptions)); } 30

31 Στο επόμενο παράδειγμα δημιουργούνται εικονίδια με τη χρήση του Google RideFinder, "mini" marker. Πρέπει να καθορίσουμε την εικόνα, την ύπαρξη (ή μη) σκιάς, τα σημεία όπου θα τοποθετήσουμε το εικονίδιο στον χάρτη και τα σημεία όπου θα εμφανίζεται το info window πάνω στο εικονίδιο. var map = new GMap2(document.getElementById("map")); map.addcontrol(new GSmallMapControl()); map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 13); // Create our "tiny" marker icon var tinyicon = new GIcon(); tinyicon.image = " tinyicon.shadow = " tinyicon.iconsize = new GSize(12, 20); tinyicon.shadowsize = new GSize(22, 20); tinyicon.iconanchor = new GPoint(6, 20); tinyicon.infowindowanchor = new GPoint(5, 1); // Set up our GMarkerOptions object literal markeroptions = { icon:tinyicon }; 31

32 // Add 10 markers to the map at random locations var bounds = map.getbounds(); var southwest = bounds.getsouthwest(); var northeast = bounds.getnortheast(); var lngspan = northeast.lng() - southwest.lng(); var latspan = northeast.lat() - southwest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latspan * Math.random(), southwest.lng() + lngspan * Math.random()); map.addoverlay(new GMarker(point, markeroptions)); } Custom Icons Το αντικείμενο GIcon παρέχει τη δυνατότητα πολλαπλών ρυθμίσεων ώστε να είμαστε σε θέση να πάρουμε την καλύτερη δυνατή εμφάνιση και λειτουργικότητα των εικονιδίων. Σε πολλές περιπτώσεις τα εικονίδια έχουν διαφορετικές εικόνες, αλλά το ίδιο μέγεθος και την ίδια σκιά. Ο πιο απλός τρόπος για να πετύχουμε ένα τέτοιο αποτέλεσμα είναι να χρησιμοποιήσουμε ένα αντίγραφο του constructor της κλάσης GIcon, το οποίο θα έχει όλες τις αρχικές ιδιότητες, και κατόπιν να το τροποποιήσουμε. var map = new GMap2(document.getElementById("map_canvas")); map.addcontrol(new GSmallMapControl()); map.addcontrol(new GMapTypeControl()); 32

33 map.setcenter(new GLatLng( , ), 13); // Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var baseicon = new GIcon(); baseicon.shadow = " baseicon.iconsize = new GSize(20, 34); baseicon.shadowsize = new GSize(37, 34); baseicon.iconanchor = new GPoint(9, 34); baseicon.infowindowanchor = new GPoint(9, 2); baseicon.infoshadowanchor = new GPoint(18, 25); // Creates a marker whose info window displays the letter corresponding // to the given index. function createmarker(point, index) { // Create a lettered icon for this point using our icon class var letter = String.fromCharCode("A".charCodeAt(0) + index); var letteredicon = new GIcon(baseIcon); letteredicon.image = " + letter + ".png"; // Set up our GMarkerOptions object markeroptions = { icon:letteredicon }; var marker = new GMarker(point, markeroptions); GEvent.addListener(marker, "click", function() { marker.openinfowindowhtml("marker <b>" + letter + "</b>"); }); return marker; } // Add 10 markers to the map at random locations var bounds = map.getbounds(); var southwest = bounds.getsouthwest(); var northeast = bounds.getnortheast(); var lngspan = northeast.lng() - southwest.lng(); var latspan = northeast.lat() - southwest.lat(); for (var i = 0; i < 10; i++) { var point = new GLatLng(southWest.lat() + latspan * Math.random(), southwest.lng() + lngspan * Math.random()); map.addoverlay(createmarker(point, i)); } 33

34 34

35 6. Παράδειγμα δημιουργίας εφαρμογής (step by step) Να δημιουργήσετε σε μία ιστοσελίδα έναν χάρτη διαστάσεων 900x500 pixels κεντραρισμένο στην Πλατεία Ομονοίας (συντεταγμένες: , ) του κέντρου της Αθήνας (βάσει του Google MAPs API). Στη συνέχεια να κάνετε βήμα-βήμα τα παρακάτω: 1) Να δοκιμάστε τις διαφορετικές απεικονίσεις του χάρτη. 2) Να προσθέσετε (κάτω και δεξιά) ένα MapOverview. 3) Να προσθέσετε τη λειτουργικότητα αύξησης/μείωσης της εστίασης του χάρτη όταν συμβαίνει διπλό click (αριστερό διπλό click - zoom in ενώ δεξί διπλό click - zoom out). 4) Να προσθέσετε τη λειτουργικότητα αύξησης/μείωσης (zoom-in/zoom-out) της εστίασης του χάρτη όταν γίνεται χρήση του scroll wheel (τροχού) του ποντικιού. 5) Να προσθέσετε τη λειτουργικότητα εμφάνισης επιλογής διαφορετικού τύπου χάρτη. 6) Να προσθέσετε τη λειτουργικότητα μικρής και μεγάλης μπάρας για τη πλοήγηση και την επίτευξη αυξομείωσης εστίασης του χάρτη (και να καταλήξετε σε μία από τις δύο εναλλακτικές). 7) Να προσθέσετε έναν marker (κλασικού τύπου «κόκκινης πινέζας»), ο οποίος να «δείχνει» την Πλατεία Ομονοίας. 8) Να προσθέσετε τη λειτουργικότητα στον προηγούμενο marker να εμφανίζει κάποιο info window το οποίο θα περιέχει κάποια πληροφορία με την εκκίνηση του χάρτη. 9) Να τροποποιήσετε τη λειτουργικότητα του παραπάνω marker, ώστε το info window να εμφανίζει την προηγούμενη πληροφορία όταν ο χρήστης κάνει click πάνω στον marker. 10) Τέλος, να αλλάξετε όλα τα προηγούμενα map controls με το τρέχον προκαθορισμένο (default) από το Google MAPs API. 35

36 Δημιουργία ιστοσελίδας που περιέχει χάρτη διαστάσεων 900x500 pixels κεντραρισμένο στην Πλατεία Ομονοίας (συντεταγμένες: , ) του κέντρου της Αθήνας. 36

37 37

38 1α) Δοκιμάζοντας τον χάρτη με δορυφορική απεικόνιση. 38

39 Δικτυακές Εφαρμογές & Ηλεκτρονικό Εμπόριο 39

40 1β) Δοκιμάζοντας τον χάρτη με υβριδική απεικόνιση. 40

41 Δικτυακές Εφαρμογές & Ηλεκτρονικό Εμπόριο 41

42 1γ) Δοκιμάζοντας τον χάρτη με γεωφυσική απεικόνιση. 42

43 43

44 2) Προσθήκη (κάτω και δεξιά) του MapOverview. 44

45 45

46 3) Προσθήκη της λειτουργικότητας αυξομείωσης της εστίασης του χάρτη (zoom-in/zoom-out) όταν συμβαίνει διπλό click. 46

47 47

48 4) Προσθήκη της λειτουργικότητας αυξομείωσης της εστίασης του χάρτη (zoom-in/zoom-out) όταν γίνεται χρήση του scroll wheel (τροχού) του ποντικιού. 48

49 49

50 50

51 5) Προσθήκη της λειτουργικότητας εμφάνισης επιλογής διαφορετικού τύπου χάρτη. 51

52 52

53 6α) Προσθήκη της λειτουργικότητας μικρής μπάρας για τη πλοήγηση και την επίτευξη αυξομείωσης εστίασης του χάρτη. 53

54 54

55 6β) Προσθήκη της λειτουργικότητας μεγάλης μπάρας για τη πλοήγηση και την επίτευξη αυξομείωσης εστίασης του χάρτη. 55

56 56

57 7) Προσθήκη ενός marker (κλασικού τύπου «κόκκινης πινέζας»), ο οποίος «δείχνει» την Πλατεία Ομονοίας. 57

58 58

59 8) Προσθήκη λειτουργικότητας στον marker για την εμφάνιση info window το οποίο θα περιέχει κάποια πληροφορία με την εκκίνηση του χάρτη. 59

60 60

61 9) Τροποποίηση της λειτουργικότητας του marker, ώστε το info window να εμφανίζει την πληροφορία όταν ο χρήστης κάνει click πάνω στον marker. 61

62 62

63 10) Αλλαγή όλων των προηγούμενων map controls με το τρέχον προκαθορισμένο (default) του Google MAPs API. (ΠΡΟΣΟΧΗ: η έκδοση του χάρτη πρέπει να αλλάξει από v = 2 σε v = 2.x ). 63

64 64

65 7. Βιβλιογραφία Αναφορές [1] [2] [3] [4] [5] 65