Τι πρέπει να γνωρίζετε
- μεταβείτε στο Κονσόλα Google Cloud Platform και δημιουργήστε ή επιλέξτε ένα έργο και, στη συνέχεια, κάντε κλικ στο Να συνεχίσει. Στο Διαπιστευτήρια σελίδα, πάρτε ένα Κλειδί API.
- Εισαγάγετε τον κώδικα JavaScript (φαίνεται παρακάτω) στην ενότητα BODY του εγγράφου HTML.
- Στην κεφαλή του εγγράφου HTML, καθορίστε τους περιορισμούς CSS για το χάρτη, όπως το μέγεθος, τα χρώματα και την τοποθέτηση σελίδας.
Αυτό το άρθρο εξηγεί πώς να εισαγάγετε έναν χάρτη Google με έναν δείκτη θέσης στην ιστοσελίδα σας. Αυτή η διαδικασία περιλαμβάνει τη λήψη ενός ειδικού κλειδιού λογισμικού από την Google και στη συνέχεια την προσθήκη της σχετικής JavaScript στη σελίδα.
Αποκτήστε ένα κλειδί API Χαρτών Google
Προκειμένου να προστατεύσει τους διακομιστές του από το βομβαρδισμό από αιτήματα για χάρτες και αναζητήσεις τοποθεσίας, η Google σβήνει την πρόσβαση στη βάση δεδομένων των Χαρτών της. Πρέπει να εγγραφείτε στην Google ως προγραμματιστής για να αποκτήσετε ένα μοναδικό κλειδί για να χρησιμοποιήσετε τη διεπαφή προγραμματισμού εφαρμογών για να ζητήσετε δεδομένα από τους διακομιστές των Χαρτών. Το κλειδί API είναι δωρεάν, εκτός εάν χρειάζεστε βαριά πρόσβαση στους διακομιστές της Google (για παράδειγμα, για να αναπτύξετε μια εφαρμογή ιστού).
Για να καταχωρήσετε το κλειδί API σας:
μεταβείτε στο Κονσόλα Google Cloud Platform και, αφού συνδεθείτε με τον λογαριασμό σας Google, δημιουργήστε ένα νέο έργο ή επιλέξτε ένα υπάρχον.
Κάντε κλικ Να συνεχίσει για να ενεργοποιήσετε το API και τυχόν σχετικές υπηρεσίες.
Στο Διαπιστευτήρια σελίδα, πάρτε ένα Κλειδί API. Εάν είναι απαραίτητο, ορίστε σχετικούς περιορισμούς στο κλειδί.
Ασφαλίστε το κλειδί API σας χρησιμοποιώντας βέλτιστες πρακτικές συνιστάται από την Google.
Εάν πιστεύετε ότι θα πρέπει να εμφανίζεται ο χάρτης πιο συχνά από ό, τι επιτρέπει το δωρεάν όριο, ρυθμίστε μια ρύθμιση χρέωσης με την Google. Οι περισσότεροι ιστότοποι, ειδικά ιστολόγια χαμηλής κυκλοφορίας ή εξειδικευμένοι ιστότοποι, είναι απίθανο να καταναλώσουν μεγάλο μέρος της κατανομής των ποσοστώσεων.
Εισαγάγετε το JavaScript στην ιστοσελίδα σας
Εισαγάγετε τον ακόλουθο κώδικα στην ιστοσελίδα σας, στην ενότητα BODY του εγγράφου HTML:
// Αρχικοποιήστε και προσθέστε τη συνάρτηση χάρτη initMap () {
// Η τοποθεσία του flag var flag = {lat: XXX, lng: YYY};
// Ο χάρτης, με επίκεντρο το flag var map = new google.maps. Χάρτης (document.getElementById ('map'), {zoom: 4, center: flag});
// Ο δείκτης, τοποθετημένος στο flag var marker = new google.maps. Δείκτης ({θέση: σημαία, χάρτης: χάρτης}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
Σε αυτόν τον κωδικό, αλλάξτε τα εξής:
- Αντικαθιστώ σημαία με ένα όνομα που αναφέρεται στην τοποθεσία που καρφιτσώνετε. Κρατήστε το απλό και σύντομο (όπως Σπίτι ή γραφείο ή Παρίσι ή Ντιτρόιτ). Μπορείτε να εκτελέσετε αυτόν τον κωδικό αφήνοντας σημαία ως έχει, αλλά η αλλαγή του ονόματος υποστηρίζει την επαναχρησιμοποίηση αυτού του κωδικού στην ίδια σελίδα, για την ενσωμάτωση πολλών διαφορετικών χαρτών.
- Αντικαθιστώ XXX και Εεε με το γεωγραφικό πλάτος και μήκος, σε δεκαδικά ψηφία, της θέσης του δείκτη του χάρτη. Πρέπει να αντικαταστήσετε αυτές τις τιμές για να εμφανιστεί σωστά ο χάρτης. Ένας εύκολος τρόπος για να βρείτε το γεωγραφικό πλάτος και μήκος είναι να ανοίξετε τους Χάρτες Google και να κάνετε δεξί κλικ στην ακριβή τοποθεσία που σκοπεύετε να επισημάνετε. Στο μενού περιβάλλοντος, επιλέξτε Τι είναι εδώ; για να δείτε το γεωγραφικό πλάτος και μήκος.
- Αντικαθιστώ ΣΑΣ_API_KEY με το κλειδί API που λάβατε από την Google. Μην τοποθετείτε κενά μεταξύ του σημείου ίσου και του συμπλέγματος. Χωρίς το κλειδί, το ερώτημα θα αποτύχει και ο χάρτης δεν θα εμφανίζεται σωστά.
Βέλτιστες πρακτικές
Στην κεφαλή του εγγράφου HTML, καθορίστε τους περιορισμούς CSS για το χάρτη, όπως το μέγεθος, τα χρώματα και την τοποθέτηση σελίδας.
Το σενάριο χάρτη της Google περιέχει χαρακτηριστικά όπως ανίπταμαι διαγωνίως και κέντρο που είναι ανοιχτά για τροποποίηση τελικού χρήστη. Αυτή η πιο προηγμένη τεχνική υποστηρίζεται μέσω της τεκμηρίωσης προγραμματιστών της Google.
Ένα API Χαρτών Google είναι ένα πολύτιμο στοιχείο. Οι οδηγίες βέλτιστης πρακτικής της Google προσφέρουν εξαιρετικές συμβουλές για την ασφάλεια του κλειδιού κατά της κακής χρήσης από άλλους. Η σωστή ασφάλεια είναι ιδιαίτερα σημαντική αν έχετε ρυθμίσει ένα σύστημα πληρωμών για πρόσβαση API, καθώς θα μπορούσατε να αντιμετωπίσετε έναν απότομο λογαριασμό, εάν τα διαπιστευτήριά σας κλαπεί. Συγκεκριμένα, το παράδειγμα που έχουμε δείξει εδώ κάνει ενσωματώστε το κλειδί API απευθείας στον κώδικα - το κάναμε με σκοπό την επίδειξη της διαδικασίας. Σε ένα περιβάλλον παραγωγής, ωστόσο, είναι καλύτερο να καθορίσετε μεταβλητές περιβάλλοντος για το κλειδί αντί να εισάγετε το κλειδί απευθείας.