Google Maps V3 | 6ο, Custom Styling

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

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

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

Google Maps V3 | 6ο, Custom Styling

Δημοσίευση από fafos » 08 Σεπ 2011 23:27

Συνέχεια από εδώ: http://www.freestuff.gr/forums/viewtopic.php?t=57993

Custom Styling

Η Google μας δίνει την δυνατότητα να αλλάξουμε το style του χάρτη μας εύκολα με λίγο κώδικα(json). Μπορούμε να αλλάξουμε τα χρώματα, να επεξεργαστούμε την εμφάνιση διάφορων μερών του χάρτη (π.χ. μπορούμε να μην δείχνουμε τους δρόμους ή τους τίτλους των οδών).

Δείτε ένα παράδειγμα εδώ: http://istopoli.com/tuts/gmv3/styling.html

Όπως θα βλέπετε στο παράδειγμα, έχω αλλάξει τα χρώματα της θάλασσας, των πόλεων κλπ. Για να κάνουμε αυτές τις αλλαγές χρειαζόμαστε να δώσουμε κάποιες τιμές σε μεταβλητές τις οποίες θα τις κάνουμε json array.

Η Google δίνει ένα πολύ καλό εργαλείο για να δημιουργούμε αυτές τις arrays: http://gmaps-samples-v3.googlecode.com/ ... index.html (τρώει κάτι κολλήματα μερικές φορές)

Δίνουμε έναν τίτλο για την array (π.χ. styling) και εκεί βάζουμε τις τιμές των μεταβλητών όπως παρακάτω:

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

 var styling =[ 

{ featureType: "water", 
stylers: [{ visibility: "on" }, 
{ hue: "#ff0022" }, 
{ saturation: -14 }, 
{ lightness: -17 }, 
{ gamma: 1.34 }] 
} 

];
με αυτές τις τιμές αλλάζουμε το χρώμα της θάλασσας, λιμνών, ποταμιών και όπου υπάρχει νερό σε κάτι ποιο κόκκινο. Τις μεταβλητές θα τις αναλύσω παρακάτω..

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

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

	var styledMapOptions = {
		map : map,
		name : "fafos"
	}
	
	var testmap = new google.maps.StyledMapType(styling, styledMapOptions);
	
	map.mapTypes.set('fafos', testmap);
	map.setMapTypeId('fafos');
δίνουμε έναν τίτλο για το νέο style (εδώ fafos, εσείς βέβαια δίνετε ότι θέλετε) και την json (styling) sto var testmap = new google.maps.StyledMapType(styling, styledMapOptions); (το testmap είναι άλλος ένας τίτλος που μπορείτε να αλλάξετε)
Ο νέος χάρτης είναι έτοιμος...
Το μόνο πρόβλημα είναι ότι αν ο χρήστης αλλάξει τον τύπο του χάρτη (π.χ. σε δορυφόρική κάτοψη) δεν μπορεί να εμφανίσει τον δικό μας χάρτη πάλι παρά μόνο αν ανανεώσει την σελίδα!
Για να λύσουμε το πρόβλημα κάνουμε ότι και εδώ: http://istopoli.com/tuts/gmv3/styling_d.html

Όπως θα βλέπετε στο παράδειγμα έχω προσθέσει ένα button στον χάρτη με τίτλο "Fafos Styling"... αυτό γίνεται εύκολα προσθέτοντας τον παρακάτω κώδικα μέσα στα option του χάρτη:
,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'Fafos Style']
}
και μετά στα options του style μας:

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

  marker.setMap(map); 
	var styledMapOptions = {
		map : map,
		name : "Fafos Style"
	}
	
	var stylemap = new google.maps.StyledMapType(styling, styledMapOptions);
	
	map.mapTypes.set('Fafos Style', stylemap);
	map.setMapTypeId('Fafos Style');
}
(στο παράδειγμα έχω βάλει και έναν marker για να να δείτε πως τον τοποθετούμαι)

Ας δούμε τις μεταβλητές μας:

administrative τιμές για τις διοικητικές περιοχές (χώρε,νομοί πόλεις κλπ).
administrative.country τιμές για στις χώρες.
administrative.land_parcel τιμές για αγροτεμάχια.
administrative.locality τιμές για τις τοποθεσίες.
administrative.neighborhood τιμές για τις γειτονιές.
administrative.province τιμές για τις επαρχίες.
all τιμές για όλους τους τύπους της επιλογής.
landscape τιμές για όλα τα τοπία.
landscape.man_made τιμές για τις τεχνητές κατασκευές (σπίτια, γήπεδα κλπ).
landscape.natural τιμές για τα φυσικά τοπία (βουνά, πεδιάδες κλπ).
poi τιμές για τα σημεία ενδιαφέροντος.
poi.attraction τιμές για τα αξιοθέατα για τους τουρίστες.
poi.business τιμές για στις επιχειρήσεις.
poi.government τιμές για κτίρια της κυβέρνησης.
poi.medical τιμές για τις υπηρεσίες έκτακτης ανάγκης (νοσοκομεία, φαρμακεία, αστυνομία, γιατρούς, κλπ).
poi.park τιμές για τα πάρκα.
poi.place_of_worship τιμές για χώρους λατρείας, όπως η εκκλησία, ναός, ή τζαμί.
poi.school τιμές για τα σχολεία.
poi.sports_complex τιμές για αθλητικά συγκροτήματα.
road τιμές για όλους τους δρόμους.
road.arterial τιμές για τις οδικές αρτηρίες.
road.highway τιμές για τις εθνικές οδούς.
road.local τιμές για τις τοπικές οδούς.
transit τιμές για όλους τους σταθμούς διέλευσης και τις γραμμές μεταφορικών μέσων.
transit.line τιμές για τις γραμμές μεταφορικών μέσων.
transit.station τιμές για όλους τους σταθμούς μεταφορικών μέσων (μετρό, λεωφορεία κλπ).
transit.station.airport τιμές για τα αεροδρόμια.
transit.station.bus τιμές για τις στάσεις των λεωφορείων.
transit.station.rail τιμές για σιδηροδρομικούς σταθμούς.
water τιμές για όπου υπάρχει νερό (θάλασσα, λίμνες, ποτάμια κλπ).

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

το poi:

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

{ featureType: "poi", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#ff0022" }, { saturation: -14 }, { lightness: -17 }, { gamma: 1.34 } ] }
μόνο το poi.parks:

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

{ featureType: "poi.parks", elementType: "geometry", stylers: [ { visibility: "on" }, { hue: "#ff0022" }, { saturation: -14 }, { lightness: -17 }, { gamma: 1.34 } ] }
το visibility μπορεί να πάρει τιμές "on" ή "off" ενώ το elementType μπορεί να πάρει τιμές: "all" (για τα πάντα), "geometry" (για το γραφικό μέρος του χάρτη) και "labels" (για τους τίτλους και τα εικονίδια του χάρτη -τίτλοι πόλεων, οδών κλπ, εικονίδια σταθμών μετρό κλπ-)

έτσι λοιπόν αν δώσουμε τιμές: featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } κλπ κλπ όλοι οι τίτλοι και τα εικονίδια για τα σημεία ενδιαφέροντος θα εξαφανιστούν από τον χάρτη!
δείτε εδώ ένα παράδειγμα όπου έχω εξαφανίσει σχεδόν τα πάντα: http://istopoli.com/tuts/gmv3/styling_c.html
και εδώ που έχω αφήσει μόνο τα σημεία ενδιαφέροντος εκτός από τα poi.medical (νοσοκομεία, φαρμακεία, αστυνομία, γιατρούς, κλπ) και τα transit (σταθμούς μετρό κλπ): http://istopoli.com/tuts/gmv3/styling_b.html

Τα χρώματα μπορείτε να τα ρυθμίσετε δίνοντας στο "hue" τον κωδικό χρώματος και με τα "saturation", "lightness" ,"gamma" να κάνετε μικρο διορθώσεις.

Αυτά για το styling του χάρτη μας....


Επόμενο βοήθημα: Εύρεση διαδρομών (directions) πάνω στον χάρτη.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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