Αποκτήστε ένα κλειδί API Χαρτών Google για τον ιστότοπό σας
Ο καλύτερος τρόπος για να προσθέσετε έναν χάρτη Google στον ιστότοπό σας είναι να χρησιμοποιήσετε το API Χαρτών Google. Και η Google συνιστά να λάβετε ένα κλειδί API για να χρησιμοποιήσετε τους χάρτες.
Δεν απαιτείται να λάβετε ένα κλειδί API για να χρησιμοποιήσετε το Google Maps API v3, αλλά είναι πολύ χρήσιμο καθώς σας επιτρέπει να παρακολουθείτε τη χρήση σας και να πληρώνετε για πρόσθετη πρόσβαση. Το API Χαρτών Google v3 έχει μια ποσόστωση 1 αιτήματος ανά δευτερόλεπτο ανά χρήστη, με μέγιστο αριθμό 25.000 αιτήσεων ανά ημέρα. Εάν οι σελίδες σας υπερβαίνουν αυτά τα όρια, θα χρειαστεί να ενεργοποιήσετε τη χρέωση για να λάβετε περισσότερα.
Πώς να αποκτήσετε ένα κλειδί API Χαρτών Google
- Συνδεθείτε στο Google χρησιμοποιώντας το Λογαριασμό σας Google.
- Μεταβείτε στην Κονσόλα προγραμματιστών
- Μετακινηθείτε στη λίστα και βρείτε το API Χάρτες Google v3, στη συνέχεια κάντε κλικ στο κουμπί "OFF" για να το ενεργοποιήσετε.
- Διαβάστε και συμφωνείτε με τους όρους.
- Μεταβείτε στην κονσόλα API και επιλέξτε "Πρόσβαση API" από το αριστερό μενού
- Στην ενότητα "Απλή πρόσβαση API", κάντε κλικ στο κουμπί "Δημιουργία νέου διακομιστή …".
- Καταχωρίστε τη διεύθυνση IP του διακομιστή ιστού σας. Αυτή είναι η διεύθυνση IP από την οποία προέρχονται τα αιτήματα των Χαρτών σας. Εάν δεν γνωρίζετε τη διεύθυνση IP σας, μπορείτε να την αναζητήσετε.
- Αντιγράψτε το κείμενο στη γραμμή "API key:" (χωρίς να συμπεριλαμβάνεται ο τίτλος). Αυτό είναι το κλειδί API για τους χάρτες σας.
Μετατροπή της διεύθυνσής σας σε συντεταγμένες
Για να χρησιμοποιήσετε τους Χάρτες Google στις ιστοσελίδες σας, πρέπει να έχετε το γεωγραφικό πλάτος και μήκος για τη θέση. Μπορείτε να τα πάρετε από ένα GPS ή μπορείτε να χρησιμοποιήσετε ένα ηλεκτρονικό εργαλείο όπως το Geocoder.us για να σας πω.
- Μεταβείτε στο Geocoder.us και πληκτρολογήστε τη διεύθυνσή σας στο πλαίσιο αναζήτησης.
- Αντιγράψτε τον πρώτο αριθμό για το γεωγραφικό πλάτος (χωρίς ένα γράμμα μπροστά) και επικολλήστε το σε ένα αρχείο κειμένου. Δεν χρειάζεστε την ένδειξη βαθμού (º).
- Αντιγράψτε τον πρώτο αριθμό για το μήκος (και πάλι χωρίς ένα γράμμα μπροστά) και επικολλήστε το στο αρχείο κειμένου.
Το πλάτος και το γεωγραφικό μήκος σας θα μοιάζουν με αυτό:
40.756076-73.990838
Το Geocoder.us λειτουργεί μόνο για τις διευθύνσεις των Η.Π.Α. Αν χρειάζεστε τις συντεταγμένες σε άλλη χώρα, θα πρέπει να αναζητήσετε ένα παρόμοιο εργαλείο στην περιοχή σας.
03 του 05Προσθήκη του χάρτη στην ιστοσελίδα σας
Πρώτα, προσθέστε το Script Map στο
του εγγράφου σας
Ανοίξτε την ιστοσελίδα σας και προσθέστε τα παρακάτω στην ΚΕΦΑΛΙ του εγγράφου σας.
Αλλάξτε το επισημασμένο τμήμα στους αριθμούς γεωγραφικού πλάτους και γεωγραφικού μήκους που γράψατε στο βήμα 2.
Δεύτερον, προσθέστε το στοιχείο χάρτη στη σελίδα σας
Μόλις προσθέσετε όλα τα στοιχεία σεναρίου στο ΚΕΦΑΛΙ του εγγράφου σας, πρέπει να τοποθετήσετε τον χάρτη σας στη σελίδα. Κάνετε αυτό προσθέτοντας ένα DIV στοιχείο με το id = "χάρτη-καμβά" Χαρακτηριστικό. Σας συνιστούμε να στυλ αυτό το div με το πλάτος και το ύψος που θα χωρέσει στη σελίδα σας:
Τέλος, μεταφορτώστε και δοκιμάστε
Το τελευταίο πράγμα που πρέπει να κάνετε είναι να ανεβάσετε τη σελίδα σας και να ελέγξετε ότι εμφανίζεται ο χάρτης σας. Ακολουθεί ένα παράδειγμα ενός χάρτη της Google στη σελίδα. Σημειώστε, λόγω του τρόπου με τον οποίο λειτουργεί το cdcc.com, θα πρέπει να κάνετε κλικ σε ένα σύνδεσμο για να εμφανιστεί ο χάρτης. Αυτό δεν συμβαίνει στη σελίδα σας.
Εάν ο χάρτης σας δεν εμφανίζεται, δοκιμάστε να την αρχικοποιήσετε με ένα ΣΩΜΑ Χαρακτηριστικό:
onload = "αρχικοποίηση ()" >
Άλλα πράγματα για να ελέγξετε αν ο χάρτης σας δεν φορτώνει περιλαμβάνουν:
- Ψάξτε για τυπογραφικά λάθη στη JavaScript σας, συμπεριλαμβανομένης της περίπτωσης. Η JavaScript διακρίνει τις πεζούλες.
- Βεβαιωθείτε ότι έχετε το
ανίπταμαι διαγωνίωςκαικέντροεπιλογές. - Βεβαιωθείτε ότι το δικό σας
DIVστοιχείο στη σελίδα με το σωστό αναγνωριστικό. - Βεβαιωθείτε ότι το δικό σας
DIVτο στοιχείο έχει ύψος.
Προσθέστε ένα δείκτη στο χάρτη σας
Αλλά τι καλό είναι ένας χάρτης της τοποθεσίας σας εάν δεν υπάρχει δείκτης που να λέει στους ανθρώπους πού πρέπει να πάνε;
Για να προσθέσετε έναν τυπικό κόκκινο δείκτη του Google Maps, προσθέστε τα παρακάτω στο script κάτω από το χάρτης var = … γραμμή:
var myLatlng = νέο google.maps.LatLng ( γεωγραφικό πλάτος γεωγραφικό μήκος );var marker = νέο google.maps.Marker ({θέση: myLatlng,χάρτης: χάρτης,τίτλος:" Πρώην '});
Αλλάξτε το επισημασμένο κείμενο στο γεωγραφικό πλάτος και το γεωγραφικό μήκος και τον τίτλο που θέλετε να εμφανίζεται όταν οι άνθρωποι αιωρούνται πάνω από το δείκτη.
Μπορείτε να προσθέσετε όσες σημειώσεις στη σελίδα επιθυμείτε, προσθέστε νέες μεταβλητές με νέες συντεταγμένες και τίτλους, αλλά εάν ο χάρτης είναι πολύ μικρός για να εμφανιστούν όλοι οι δείκτες, δεν θα εμφανίζονται εκτός εάν ο αναγνώστης μεγεθυνθεί.
var latlng 2 = νέο google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({θέση: latlng 2 ,χάρτης: χάρτης,τίτλος:" Apple Computer '});
Ακολουθεί ένα παράδειγμα ενός χάρτη Google με ένα δείκτη. Σημειώστε, λόγω του τρόπου με τον οποίο λειτουργεί το CMS του About.com, πρέπει να κάνετε κλικ σε ένα σύνδεσμο για να εμφανιστεί ο χάρτης. Αυτό δεν συμβαίνει στη σελίδα σας.
05 του 05Προσθέστε έναν δεύτερο (ή περισσότερους) χάρτες στη σελίδα σας
Αν εξετάσατε την παράδειξή μου σελίδα Google Maps, θα παρατηρήσετε ότι στη σελίδα εμφανίζονται περισσότεροι από ένας χάρτες. Αυτό είναι πολύ εύκολο να γίνει. Δείτε πώς.
- Αποκτήστε το γεωγραφικό πλάτος και το γεωγραφικό μήκος όλων των χαρτών που θέλετε να εμφανίζονται όπως μάθαμε στο βήμα 2 αυτού του σεμιναρίου.
- Εισαγάγετε τον πρώτο χάρτη όπως μάθαμε στο βήμα 3 αυτού του σεμιναρίου. Αν θέλετε ο χάρτης να έχει ένα δείκτη, προσθέστε το δείκτη όπως στο βήμα 4.
- Για το δεύτερο χάρτη, θα πρέπει να προσθέσετε 3 νέες γραμμές στο script initialize ():
var latlng2 = νέο google.maps.LatLng ( δεύτερες συντεταγμένες );var myOptions2 = {ζουμ: 18, κέντρο: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = νέο google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Αν θέλετε επίσης ένα δείκτη στο νέο χάρτη, προσθέστε ένα δεύτερο δείκτη που δείχνει τις δύο συντεταγμένες και το δεύτερο χάρτη:
var myMarker2 = νέο google.maps.Marker ({θέση: latlng2 , χάρτης: map2 , τίτλος:" Ο τίτλος του δείκτη σας ' }); - Στη συνέχεια, προσθέστε το δεύτερο μέρος που θέλετε ο δεύτερος χάρτης. Και φροντίστε να το δώσετε
id = "map_canvas_2"ΤΑΥΤΟΤΗΤΑ. - Όταν φορτώνεται η σελίδα σας, θα εμφανιστούν δύο χάρτες
Εδώ είναι ο κώδικας μιας σελίδας με δύο χάρτες Google σε αυτό:
