Εξοικείωση με τοςρ σάπτερ τος Google Η εηαηξεία Google δηαζέηεη έλα πάξα πνιύ θαηαηνπηζηηθό ηζηνρώξν ζρεηηθά κε ην πξνγξακκαηηζηηθό ηεο πεξηβάιινλ (API) ηόζν γηα ράξηεο όζν θαη άιιεο δξαζηεξηόηεηεο ζην δηαδίθηπν. Τν πεξηβάιινλ είλαη θηηαγκέλν κε ηερλνινγία AJAX θαη κπνξείηε πνιύ απιά θαη γξήγνξα λα δεκηνπξγήζεηε ράξηεο θαη λα ζώζεηε ηνλ θώδηθα ώζηε λα κπνξείηε λα ηνλ ρξεζηκνπνηήζεηε ζηα πξνγξάκκαηά ζαο. Σε έλα θπιινκεηξεηή δώζηε ηελ παξαθάησ δηεύζπλζε http://code.google.com/apis/ajax/playground/ Θα παξνπζηαζζεί ε παξαθάησ εηθόλα ζηε νπνία κπνξείηε λα επηιέμεηε ην Maps API θάλνληαο θιηθ πάλσ ζην + ηνπ Maps API, όπσο θαίλεηαη ζηελ παξαπάλσ εηθόλα. Έρεηε ηώξα κία ζεηξά από έηνηκα παξαδείγκαηα κε ηα νπνία κπνξείηε λα πεηξακαηηζηείηε. Δνθηκάζηε λα αλνίμεηε ην παξάδεηγκα Map Simple. Θα πάξεηε ηελ παξαθάησ εηθόλα. Όπσο ζα παξαηεξήζεηε κπνξείηε λα αιιάμεηε ηνλ θώδηθα πνπ ζαο παξνπζηάδεηαη ζε έλα παξάζπξν θαη λα δείηε άκεζα ηα απνηειέζκαηα ηνπ κε θιηθ ζην Run code Σελίδα 1
Κάληε ηελ παξαθάησ αιιαγή ζηνλ θώδηθα, αιιάδνληαο κόλν ηα θ θαη ι έηζη ώζηε λα παξνπζηαζζεί έλαο ράξηεο από ηελ Αλαηνιηθή Αηηηθή map.setcenter(new GLatLng(37.8, 23.98), 12); Σηηο ζπληεηαγκέλεο πξώηα δίλνπκε ην γεσγξαθηθό πιάηνο θ θαη κεηά ην γεσγξαθηθό κήθνο ι. Ο αξηζκόο κεηά ηηο ζπληεηαγκέλεο είλαη ν βαζκόο ηεο κεγέζπλζεο ηνπ ράξηε κε ηηκέο από 1-20. Μόιηο θάλεηε απηή ηελ αιιαγή θαη θάλεηε θιηθ ζην Run Code ζα πάξεηε ηνλ παξαθάησ ράξηε ηεο Αλαηνιηθήο Αηηηθήο Πποσθήκη σημείων (Placemark) Επηιέμηε ηώξα ην παξάδεηγκα Map Markers. Επηπιένλ θάληε θιηθ ζηελ επηινγή Edit HTML ζην δεμί παξάζπξν. Θα παξαηεξήζεηε όηη εκθαλίδεηαη πιένλ όινο ν θώδηθαο HTML ηεο ηζηνζειίδαο. Ο θώδηθαο απηόο εκθαλίδεηαη ακέζσο παξαθάησ. <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google Maps API Sample</title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=abqia Σελίδα 2
AAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwB ovxn7tdah5q"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng(37.4419, -122.1419), 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)); </script> </head> <body onload="initialize()" onunload="gunload()" style="font-family: Arial;border: 0 none;"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html> Όπσο ζα παξαηεξήζεηε ζηνλ παξαπάλσ θώδηθα ζην θπξίσο ζώκα (body) ηνπ HTML ππάξρεη κόλν ν νξηζκόο ηνπ πίλαθα πνπ ζα εκθαληζζεί ν ράξηεο θαη ην θόξησκα ηεο ζπλάξηεζεο initialize() ε νπνία ζηελ νπζία είλαη έλα JavaScript ην νπνίν θάλεη όιεο ηηο ππόινηπεο ελέξγεηεο ηνπ ράξηε. Ο θώδηθαο ηεο βξίζθεηαη ζην κέξνο head ηνπ θώδηθα HTML. Εκείο απιά ζα αιιάμνπκε κόλν ηα θ θαη ι ηεο εζηίαζεο ηνπ ράξηε θαζώο θαη ηνλ αξηζκό ηεο κεγέζπλζεο πνπ βξίζθεηαη ζηελ εληνιή map.setcenter. Αιιάμηε ηελ εληνιή απηή όπσο παξαθάησ θαη ηξέμηε ηνλ θώδηθα ( Run Code), ώζηε λα δηαπηζηώζεηε ηηο αιιαγέο. map.setcenter(new GLatLng(37.95, 23.75), 12); Παξνπζηάδεηαη ζηελ νζόλε ζαο ν παξαθάησ ράξηεο. Σελίδα 3
Παξαηεξήζηε όηη ν ράξηεο ζαο δελ έρεη δπλαηόηεηεο κεγέζπλζεο/ζκίθξπλζεο, νύηε αιιαγήο ηνπ είδνπο ηνπ ππνβάζξνπ ηνπ. Επίζεο ν ράξηεο καο είλαη αξθεηά κηθξόο νπόηε ζα ηνπ αιιάμνπκε ην κέγεζνο. Πξνζζέζηε αθξηβώο θάησ από ηελ πξνεγνύκελε εληνιή map.setcenter πνπ αιιάμαηε, ηνλ παξαθάησ θώδηθα map.addcontrol(new GLargeMapControl()); var mapcontrol = new GMapTypeControl(); map.addcontrol(mapcontrol); Επίζεο πεγαίλεηε ζην ηέινο ηνπ θώδηθα ζαο θαη αιιάμηε ηηο παξακέηξνπο width θαη height ζε 800 θαη 600 αληίζηνηρα όπσο παξαθάησ <div id="map_canvas" style="width: 800px; height: 600px"></div> Τξέμηε ηνλ θώδηθα πάιη γηα λα δείηε ηηο δηαθνξέο. Σηελ παξαθάησ εηθόλα έρεη πξνζηεζεί ε δπλαηόηεηα κεγέζπλζεο θαη ζκίθξπλζεο ηνπ ράξηε, ε δπλαηόηεηα αιιαγήο ηνπ ππνβάζξνπ ζε δνξπθνξηθνύ ή πβξηδηθνύ θαη ηέινο ην κέγεζόο ηνπ. Πξνζπαζήζηε λα αιιάμεηε ηε κεγέζπλζε ηνπ ράξηε κε θιηθ ζηα πιήθηξα αξηζηεξά ηνπ ράξηε ζαο θαη ην είδνο ηνπ ππνβάζξνπ κε θιηθ ζηηο επηινγέο πνπ βξίζθνληαη δεμηά ηνπ ράξηε ζαο. Σελίδα 4
Σην δεμί παξάζπξν επηιέμηε κε ην πνληίθη ζαο όιν ηνλ θώδηθα, αληηγξάςηε ην θαη επηθνιιήζηε ην ζε έλα λέν αξρείν πνπ έρεηε αλνίμεη κε ην NotePad ή θάπνην άιιν δηνξζσηή θώδηθα HTML( Web Builder, XML Spy θιπ). Σώζηε ην αξρείν απηό κε ην όλνκα random.html. (Πξνζνρή ζην NotePad πξέπεη λα αιιάμεηε ηνλ ηύπν ηνπ αξρείνπ ζαλ All files, γηαηί αιιηώο ζα πξνζζέζεη ηελ θαηάιεμε.txt ).oogle API Θα παξαηεξήζεηε ηώξα όηη κε δηπιό θιηθ πάλσ ζην όλνκα ηνπ, θαιείηαη ν θπιινκεηξεηήο πνπ έρεηε εγθαηεζηεκέλν ζηνλ ππνινγηζηή ζαο θαη ν ράξηεο εκθαλίδεηαη όπσο αθξηβώο θαη ζην πεξηβάιινλ ηνπ Google Playground. Μπνξείηε λα πεηξακαηηζηείηε θαη κε ηα ππόινηπα παξαδείγκαηα, ώζηε λα εμνηθεησζείηε κε ην πεξηβάιινλ ηνπ θαη ηηο δπλαηόηεηεο πνπ έρεηε κε ηηο δπλαηόηεηεο ηνπ Google API. Σημείωση: Τν πξνεγνύκελν παξάδεηγκα έηξεμε ζηνλ ππνινγηζηή ζαο ρσξίο λα ρξεηαζζεί λα πάξεηε έλα θιεηδί από ηελ Google. Απηό ζπκβαίλεη γηαηί ην ηξέρεηε ηνπηθά ζηνλ ππνινγηζηή ζαο. Αλ ρξεηαζζεί όκσο λα ην βάιεηε ζε έλα εμππεξεηεηή, ηόηε ζα πξέπεη λα ζπκπιεξώζεηε ηελ ειεθηξνληθή αίηεζε γηα ρνξήγεζε θιεηδηνύ από ηελ Google γηα ηνλ ζπγθεθξηκέλν εμππεξεηεηή. Σελίδα 5