Google Maps V3 | 1ο, Γενικά

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 1ο, Γενικά

Δημοσίευση από fafos » 29 Αύγ 2011 19:38

Σε συνέχεια των βοηθημάτων μου για τους χάρτες της Google θα μάθουμε πως να δημιουργούμε χάρτες με την νέα έκδοση 3 (έχει φτάσει ήδη στην 3,6).

Πριν προχωρήσω διαβάστε τα παρακάτω:

1. Τις περισσότερες πληροφορίες πήρα από φίλο ο οποίος ετοιμάζει μία πολύ καλή εφαρμογή για τους χάρτες. (εμπορική δυστυχώς)
2. Θα προσπαθήσω να δώσω τα βασικά στοιχεία μιας και είναι πολλές οι δυνατότητες και σχεδόν αδύνατον να αναλυθούν από ένα άτομο σε ένα forum.
3. Μην μου στέλνετε προσωπικά μηνύματα! Δεν θα τα απαντάω! Ότι θέλετε ρωτήστε εδώ μέσα!
4. Κάνετε τα τεστ σας με firefox, chrome κλπ... αποφύγετε τον explorer γιατί σε πολλές περιπτώσεις κρατάει cache και δεν δίνει σωστά αποτελέσματα!

πάμε παρακάτω...


ΓΕΝΙΚΑ ΣΤΟΙΧΕΙΑ ΓΙΑ ΤΗΝ V3:
Η V3 έρχεται με αρκετές διαφορές από την V2. Μία βασική αλλαγή είναι ότι δεν χρειάζεται πλέον ο κώδικας API και δουλεύει με ένα απλό link:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//maps.googleapis.com/maps/api/js?sensor=false"></script>
Επίσης δίνει πολλές άλλες δυνατότητες όπως να βρίσκει αυτόματα την τοποθεσία του χρήστη (geolocation) τις οποίες θα αναλύσουμε σε επόμενα βοηθήματα.

Δημιουργία χάρτη:

Όπως προανέφερα, ξεκινάμε πάντα με το script:

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="http&#58;//maps.googleapis.com/maps/api/js?sensor=false"></script>
Αυτή η γραμμή κώδικα πρέπει να είναι ΠΑΝΤΑ πάνω από οιανδήποτε άλλο κώδικα χρησιμοποιήσουμε για τον χάρτη μας για να μην έχουμε προβλήματα!

Το sensor=false είναι η προτεινόμενη τιμή ενώ το sensor=true το χρησιμοποιούμε κυρίως σε χάρτες που θέλουμε να δείξουμε στον χρήστη την περιοχή στην οποία βρίσκεται (με την βοήθεια της geolocation). Αυτό χρησιμοποιείται από ιστοσελίδες (για κινητά συνήθως) που δίνουν κάποιο υπολογιστή απόστασης από το σημείο που βρισκόμαστε έως το Χ σημείο (π.χ. είμαστε στην Ομόνοια και μας δείχνει την διαδρομή έως την Ακρόπολη).

Δείτε παραδείγματα: Απλός χάρτης | Με Geolocation

Πατώντας το πρώτο παράδειγμα απλώς θα σας δείξει έναν χάρτη κεντραρισμένο στην Αθήνα ενώ το 2ο παράδειγμα θα ζητήσει γνωστοποίηση της περιοχής μας και θα μας δείξει το κοντινότερο σημείο (σε κινητές συσκευές δουλεύει καλύτερα).

Άλλες τιμές:

language=XX: Μας δείχνει τον χάρτη σε συγκεκριμένη γλώσσα άσχετα από την γλώσσα του χρήστη. Αντικαθιστούμε το ΧΧ με τον κωδικό γλώσσας. Τους κωδικούς μπορείτε να τους δείτε εδώ: https://spreadsheets.google.com/pub?key ... 05KQ&gid=1
Δείτε ένα παράδειγμα με Ρώσικα: http://istopoli.com/tuts/gmv3/lang.html

region=XX: εδώ μπορούμε να ζητήσουμε να κεντράρει ο χάρτης σε συγκεκριμένη τοποθεσία (π.χ. region=GR και μέσα στον κώδικα: var query = "Ναύπλιο"; http://istopoli.com/tuts/gmv3/region.html ). Αυτό δεν το πολυχρησιμοποιούμε αφού μπορούμε να κεντράρουμε τον χάρτη μας δίνοντας στον κώδικα τις ακριβείς συντεταγμένες.

libraries=geometry ή adsense ή panoramio: εδώ καλούμε κάποιες βοηθητικές βιβλιοθήκες του χάρτη.
Με το geometry μας δίνεται η δυνατότητα να μετράμε αποστάσεις και εκτάσεις (περισσότερα: http://code.google.com/intl/el-GR/apis/ ... metry.html )
Με το adsense μπορούμε να έχουμε διαφημίσεις του google μέσα στον χάρτη μας (demo: http://istopoli.com/tuts/gmv3/ads.html) (περισσότερα: http://code.google.com/intl/el-GR/apis/ ... ising.html)
με το panoramio δείχνουμε φωτογραφίες που έχουν ανεβάσει οι χρήστες της ιστοσελίδας panoramio.com για την συγκεκριμένη περιοχή που δείχνει ο χάρτης μας (περισσότερα: http://code.google.com/intl/el-GR/apis/ ... mioLibrary )


OPTIONS - SETTINGS Google map

Ας δούμε τι επιλογές μας δίνουν οι χάρτες μας...
Αφού τοποθετήσαμε το script της google ανοίγουμε ένα νέο script όπου εκεί θα δώσουμε κάποιες επιλογές:

Κώδικας: Επιλογή όλων


<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize&#40;&#41; &#123;
        var mapOptions = &#123;
          center&#58; new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;,
          zoom&#58; 12,
          mapTypeId&#58; google.maps.MapTypeId.ROADMAP
        &#125;;
        var map = new google.maps.Map&#40;document.getElementById&#40;'map_canvas'&#41;,    mapOptions&#41;;
  &#125;
google.maps.event.addDomListener&#40;window, 'load', initialize&#41;; 
</script>
Δημιουργούμε την function initialize().
Κατόπιν, δημιουργούμε ένα var mapOptions (ή όπως αλλιώς θέλετε το ονομάζετε) και εκεί μέσα βάζουμε τις επιλογές - ρυθμίσεις του χάρτη μας:

center: new google.maps.LatLng(37.994636052022386, 23.751648349999982), συντεταγμένες όπου θα κεντράρει ο χάρτης μας

zoom: 12, το ζουμ με το οποίο θα ανοίξει ο χάρτης μας (από 0 έως 21, ανάλογα την περιοχή)

mapTypeId: google.maps.MapTypeId.ROADMAP με ποιον τύπο χάρτη θα ανοίξει ο χάρτης μας.
Αυτές βέβαια είναι μερικές από τις επιλογές που μπορούμε να βάλουμε στον χάρτη. Παρακάτω θα αναλύσουμε όλες τις επιλογές που έχουμε.
Να θυμάστε ότι στην τελευταία επιλογή δεν χρησιμοποιούμε κόμα!

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); εδώ λέμε να δημιουργήσει έναν χάρτη στο div με id=map_canvas τοποθετώντας τις επιλογές που του δώσαμε παραπάνω (mapOptions)

Μετά την function initialize() { ... } τοποθετούμε ένα κομμάτι κώδικα όπου του λέμε να δείξει τον χάρτη με το που θα ανοίξει η σελίδα:

Κώδικας: Επιλογή όλων

google.maps.event.addDomListener&#40;window, 'load', initialize&#41;; 
Το script είναι έτοιμο! Το μόνο που μένει είναι να βάλετε το div μέσα στο body της σελίδας σας για να δείξει τον χάρτη:

Κώδικας: Επιλογή όλων

<div id="map_canvas" style="width&#58;500px;height&#58;300px"></div>

Παρακάτω θα εξηγήσω τις επιλογές - ρυθμίσεις που μπορούμε να αλλάξουμε στον χάρτη μας...



......
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Google Maps V3 | 1ο, Γενικά

Δημοσίευση από fafos » 29 Αύγ 2011 21:12

Ας δούμε τις επιλογές του χάρτη αναλυτικά....


Είδη Χάρτη:

Τα βασικά είδη εμφάνισης του χάρτη είναι:

Roadmap: Εμφανίζει τον κλασσικό χάρτη
Satellite: Εμφανίζει τον χάρτη όπως φαίνεται από τον δορυφόρο (φυσικός)
Hybrid: Εμφανίζει τον χάρτη από δορυφόρο αλλά με τις ετικέτες τοποθεσιών, δρόμων κλπ
Terrain: Εμφανίζει τον χάρτη με ένα πιο "καρτουνίστικο" τρόπο

για να δώσουμε στον χάρτη να καταλάβει με ποιο είδος θέλουμε να ανοίγει δίνουμε ένα από τα παρακάτω:

Κώδικας: Επιλογή όλων

google.maps.MapTypeId.ROADMAP
 google.maps.MapTypeId.SATELLITE
google.maps.MapTypeId.HYBRID
google.maps.MapTypeId.TERRAIN
π.χ. το mapTypeId: google.maps.MapTypeId.SATELLITE θα μας ανοίξει τον χάρτη με προεπιλογή την εμφάνιση από δορυφόρο.

Αν θέλουμε να εμφανίζουμε στον χάρτη μόνο κάποια από τα είδη δημιουργούμε μία array (πριν την function initialize() ) με τα είδη που θέλουμε.. π.χ.:

Κώδικας: Επιλογή όλων

var mtypes = &#91;google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE &#93;;
αυτό θα μας εμφανίσει μόνο τις επιλογές για roadmap & satellite
κατόπιν θα βάλουμε τον παρακάτω κώδικα μέσα στα options του χάρτη:

Κώδικας: Επιλογή όλων

 var myMapOptions = &#123;
 ...άλλα options εδώ....

				mapTypeControl&#58; true,
				mapTypeControlOptions&#58; 
				&#123;

					mapTypeIds&#58; mtypes
				&#125;
  &#125;;
Μπορούμε επίσης να ρυθμίσουμε και την εμφάνιση των buttons που δείχνει τα είδη του χάρτη:
Horizontal Bar: η κλασσική εμφάνιση των buttons
Dropdown: δημιουργεί ένα dropdown menu με τα είδη του χάρτη..

για να δώσουμε το είδος γράφουμε τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

 var myMapOptions = &#123;
 ...άλλα options εδώ....

				mapTypeControl&#58; true,
				mapTypeControlOptions&#58; 
				&#123;
                                       style&#58; google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
					mapTypeIds&#58; mtypes
				&#125;
  &#125;;
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU για το dropdown menu)


Zoom Control:

Μπορούμε να δώσουμε το είδος του ζουμ κοντρόλ το οποίο συνήθως εμφανίζεται αριστερά επάνω στον χάρτη μας:

Default: με αυτήν την επιλογή το κοντρόλ προσαρμόζεται στο ύψος του χάρτη και εμφανίζει μικρό ή μεγάλο ζουμ κοντρόλ
Small: εμφανίζει μικρό κοντρόλ
Large: εμφανίζει το μεγάλο κοντρόλ

για να ορίσουμε το κοντρόλ δίνουμε τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

 var myMapOptions = &#123;
 ...άλλα options εδώ....

    zoomControl&#58; true,
  zoomControlOptions&#58; &#123;
    style&#58; google.maps.ZoomControlStyle.SMALL
&#125;,
 ...άλλα options εδώ....


  &#125;;
(θα εμφανίσει το μικρό κοντρόλ)

Αν δεν θέλουμε να εμφανίσουμε τα είδη ή το ζουμ κοντρόλ δίνουμε αντίστοιχα στα options: mapTypeControl: false ή zoomControl: false


Τοποθέτηση Ειδών και Ζουμ κοντρόλ πάω στον χάρτη:

Υπάρχει η δυνατότητα να τοποθετήσετε τα buttons των ειδών ή και το κοντρόλ του ζουμ σε διάφορες πλευρές-γωνίες του χάρτη. Στην παρακάτω εικόνα βλέπετε που μπορούν να τοποθετηθούν:

Εικόνα

Χρησιμοποιήστε τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

 var myMapOptions = &#123;
 ...άλλα options εδώ....

//για το ζουμ κοντρολ
zoomControl&#58; true,
zoomControlOptions&#58; &#123;

  position&#58; google.maps.ControlPosition.TOP_LEFT
  
&#125;,


//για είδη του χάρτη	
mapTypeControl&#58; true,
mapTypeControlOptions&#58; 
&#123;

	position&#58; google.maps.ControlPosition.TOP_RIGHT
&#125;,	
 ...άλλα options εδώ....


  &#125;;
αλλάζετε ανάλογα τις προτιμήσεις σας τα TOP_LEFT και TOP_RIGHT.

δείτε ένα παράδειγμα με μερικές ρυθμίσεις: http://istopoli.com/tuts/gmv3/controls.html


Υπάρχουν και μερικές άλλες επιλογές όπως η δημιουργία χάρτη με το δικό μας style (διαφορετικά χρώματα, εικόνες custom χάρτη κλπ) τα οποία θα δείξω σε διαφορετικό βοήθημα αφού έχουν αρκετή δουλειά για να γίνουν και να κατανοηθούν.


Στο επόμενο βοήθημα θα δούμε πως τοποθετούμε ένα marker (εικονίδιο) και το "σύννεφο κειμένου" (infowindow) στον χάρτη μας...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες