Πώς να προσθέσετε χάρτες στην εφαρμογή σας: ενσωματώσεις, διαδραστικοί χάρτες και εντοπιστές καταστημάτων
Για να προσθέσετε χάρτη στην εφαρμογή σας, αποφασίστε πρώτα αν χρειάζεστε στατική ενσωμάτωση (μία τοποθεσία με καρφίτσα, όπως «βρείτε το κατάστημά μας») ή διαδραστικό χάρτη (πολλές καρφίτσες από τα δεδομένα σας, φίλτρα, ομαδοποίηση, «κοντά μου»). Για μία τοποθεσία, ο ενσωματωμένος χάρτης είναι το γρηγορότερο και, με το Maps Embed API της Google, δωρεάν. Για διαδραστικούς χάρτες, χρησιμοποιήστε βιβλιοθήκη χαρτών JavaScript (Google Maps JavaScript API, Mapbox GL JS ή το open-source Leaflet με πάροχο πλακιδίων), αποθηκεύστε το γεωγραφικό πλάτος και μήκος κάθε τοποθεσίας στη βάση σας και περιορίστε το κλειδί API στο δικό σας domain. Οι λεπτομέρειες των παρόχων παρακάτω προέρχονται από την τεκμηρίωση των ίδιων των παρόχων, όπως ίσχυε τον Σεπτέμβριο 2026.
Τι είδους χάρτη χρειάζεστε;
| Ανάγκη | Παράδειγμα | Απλούστερη προσέγγιση |
|---|---|---|
| Μία τοποθεσία | Σελίδα επικοινωνίας για ένα καφέ | Ενσωματωμένος χάρτης |
| Μερικές σταθερές τοποθεσίες | Τρία υποκαταστήματα | Ενσωμάτωση για κάθε υποκατάστημα, ή μικρός διαδραστικός χάρτης |
| Πολλές τοποθεσίες από τα δεδομένα σας | Κατάλογος, αγγελίες ακινήτων, εκδηλώσεις | Διαδραστικός χάρτης με δείκτες από τη βάση σας |
| Αναζήτηση με βάση την απόσταση | «Κλινικές σε ακτίνα 10 km» | Αποθηκευμένες συντεταγμένες και ερώτημα απόστασης |
| Διαδρομές ή οδηγίες | Ζώνες παράδοσης, «οδηγίες» | Σύνδεσμος οδηγιών, ή API δρομολόγησης |
Οι περισσότεροι ιστότοποι μικρών επιχειρήσεων χρειάζονται μόνο την πρώτη γραμμή. Οι κατάλογοι, οι αγορές και οι ιστότοποι αγγελιών χρειάζονται την τρίτη και την τέταρτη.
Οι επιλογές σας
| Επιλογή | Τι είναι | Σημειώσεις κόστους (Σεπτέμβριος 2026) | Κατάλληλη για |
|---|---|---|---|
| Google Maps Embed API | iframe που δείχνει μια τοποθεσία ή αναζήτηση | Η τεκμηρίωση της Google: όλα τα αιτήματα είναι δωρεάν με απεριόριστη χρήση· απαιτείται κλειδί API | Μία τοποθεσία σε σελίδα |
| Google Maps JavaScript API | Πλήρως διαδραστικός χάρτης Google | Dynamic Maps: 10.000 δωρεάν γεγονότα τον μήνα, μετά πληρωμή ανά 1.000 | Οικεία εμφάνιση, δεδομένα τοποθεσιών της Google |
| Mapbox GL JS | Διαδραστικοί διανυσματικοί χάρτες με προσαρμοσμένα στυλ | Η Mapbox αναφέρει 50.000 δωρεάν φορτώσεις χάρτη τον μήνα για τον web, μετά 5,00 $ ανά 1.000 | Χάρτες με δικό σας στυλ |
| Leaflet + πλακίδια | Βιβλιοθήκη χαρτών ανοιχτού κώδικα· επιλέγετε την πηγή πλακιδίων | Το Leaflet είναι δωρεάν· τα πλακίδια εξαρτώνται από τον πάροχο | Ελαφριοί χάρτες, αποφυγή δέσμευσης σε πάροχο |
Google Maps Platform
Ο οδηγός εκκίνησης της Google λέει ότι πρέπει να δημιουργήσετε έργο Cloud με ενεργοποιημένη χρέωση και να ενεργοποιήσετε τα APIs που θέλετε. Η τιμολόγηση pay-as-you-go δίνει SKUs Essentials, συμπεριλαμβανομένων των Dynamic Maps, με μηνιαίο δωρεάν όριο 10.000 γεγονότων, και αναφέρει τα Dynamic Maps στα 7,00 $ ανά 1.000 γεγονότα πάνω από αυτό (στο πρώτο επίπεδο όγκου). Το SKU Maps Embed αναφέρεται ως απεριόριστο και δωρεάν. Η Google πουλά επίσης μηνιαία πακέτα συνδρομής. Ελέγξτε την τιμολόγηση Google Maps Platform για τους τρέχοντες αριθμούς.
Mapbox
Η σελίδα τιμών της Mapbox αναφέρει 50.000 δωρεάν μηνιαίες φορτώσεις χάρτη για το Mapbox GL JS στον web, και μετά 5,00 $ ανά 1.000 φορτώσεις. Δείτε τιμολόγηση Mapbox.
Leaflet και OpenStreetMap
Το Leaflet περιγράφει τον εαυτό του ως βιβλιοθήκη JavaScript ανοιχτού κώδικα για φιλικούς προς κινητά διαδραστικούς χάρτες, περίπου 42 KB JavaScript. Χρειάζεται πλακίδια χάρτη (τις εικόνες του χάρτη) από κάπου. Οι δημόσιοι διακομιστές πλακιδίων του OpenStreetMap είναι δελεαστικοί, αλλά η πολιτική χρήσης πλακιδίων απαιτεί ορατή αναφορά, απαγορεύει τη μαζική λήψη, δεν προσφέρει εγγύηση υπηρεσίας και προειδοποιεί ότι η πρόσβαση για εμπορικές υπηρεσίες μπορεί να αποσυρθεί. Για πραγματικό προϊόν, χρησιμοποιήστε εμπορική ή φιλοξενούμενη από εσάς πηγή πλακιδίων που δουλεύει με το Leaflet.
Κλειδιά API: δημόσια, αλλά περιορισμένα
Τα κλειδιά χαρτών που χρησιμοποιούνται στον browser είναι ορατά σε όποιον ανοίγει τη σελίδα σας. Αυτό είναι αναμενόμενο, αλλά σημαίνει ότι κάποιος μπορεί να αντιγράψει το κλειδί σας και να αυξήσει τη χρέωση. Η καθοδήγηση ασφαλείας της Google είναι να προσθέσετε περιορισμούς ιστότοπου (HTTP referrer) με τα domains σας, και περιορισμούς API ώστε το κλειδί να δουλεύει μόνο για τα APIs που χρησιμοποιείτε.
Τα κλειδιά για υπηρεσίες server (για παράδειγμα γεωκωδικοποίηση χιλιάδων διευθύνσεων) πρέπει να είναι ξεχωριστά και να φυλάσσονται ως μυστικά του server, όχι στη σελίδα. Ορίστε επίσης ειδοποιήσεις προϋπολογισμού ή όρια στην κονσόλα του παρόχου, ώστε ένα λάθος να μην γίνει μεγάλος λογαριασμός.
Γεωκωδικοποίηση: μετατρέψτε τις διευθύνσεις σε συντεταγμένες μία φορά
Οι χάρτες σχεδιάζουν γεωγραφικό πλάτος και μήκος, όχι διευθύνσεις. Η μετατροπή μιας διεύθυνσης σε συντεταγμένες λέγεται γεωκωδικοποίηση, και οι περισσότεροι πάροχοι την χρεώνουν ανά αίτημα. Το αποδοτικό μοτίβο:
- Όταν αποθηκεύεται μια αγγελία, γεωκωδικοποιήστε τη διεύθυνση στον server.
- Αποθηκεύστε το γεωγραφικό πλάτος και μήκος στη βάση δεδομένων.
- Ο χάρτης διαβάζει τις αποθηκευμένες συντεταγμένες· ποτέ δεν γεωκωδικοποιεί κατά την προβολή της σελίδας.
Ελέγξτε τους όρους κάθε παρόχου για το πόσο καιρό μπορείτε να αποθηκεύετε τα αποτελέσματα γεωκωδικοποίησης· διαφέρουν.
Παραδείγματα prompts
Ένας ενσωματωμένος χάρτης:
Στη σελίδα Επικοινωνία, πρόσθεσε ενσωματωμένο χάρτη Google που δείχνει τη διεύθυνσή μας (12 High Street, Leeds) με το Maps Embed API και το κλειδί στο GOOGLE_MAPS_EMBED_KEY. Βάλε από κάτω σύνδεσμο «Οδηγίες». Να είναι πλήρους πλάτους στα κινητά και να φορτώνει καθυστερημένα.
Διαδραστικός χάρτης αγγελιών:
Πρόσθεσε γεωγραφικό πλάτος και μήκος στον πίνακα listings. Όταν δημιουργείται μια αγγελία ή αλλάζει η διεύθυνσή της, γεωκωδικοποίησέ την στον server με το κλειδί στο GEOCODING_API_KEY και αποθήκευσε τις συντεταγμένες. Στη σελίδα Περιήγηση, δείξε χάρτη με δείκτη για κάθε αγγελία με Leaflet, με ομαδοποίηση όταν οι δείκτες επικαλύπτονται. Το κλικ σε δείκτη δείχνει τίτλο, τιμή και σύνδεσμο. Ο χάρτης και η λίστα να χρησιμοποιούν τα ίδια φίλτρα.
«Κοντά μου»:
Πρόσθεσε κουμπί «Κοντά μου» που ζητά την τοποθεσία του επισκέπτη και δείχνει αγγελίες σε ακτίνα 10 km, ταξινομημένες κατά απόσταση. Αν αρνηθεί την πρόσβαση στην τοποθεσία, άφησέ τον να πληκτρολογήσει μια πόλη.
Βήμα προς βήμα
- Επιλέξτε τον τύπο χάρτη από τον πίνακα της αρχής.
- Δημιουργήστε λογαριασμό στον πάροχο και ένα έργο, και ενεργοποιήστε μόνο τα APIs που χρειάζεστε.
- Δημιουργήστε κλειδιά: ένα κλειδί για τον browser περιορισμένο στα domains σας (συμπεριλαμβανομένου του domain προεπισκόπησης ενώ χτίζετε) και, αν χρειάζεται, ένα κλειδί server για γεωκωδικοποίηση.
- Αποθηκεύστε τα κλειδιά ως μυστικά και ζητήστε από τον builder σας να τα χρησιμοποιεί· το κλειδί του browser παραμένει περιορισμένο, παρότι καταλήγει στη σελίδα.
- Αποθηκεύστε συντεταγμένες για κάθε τοποθεσία στη βάση σας.
- Χτίστε τον χάρτη: δείκτες, αναδυόμενα παράθυρα, ομαδοποίηση και λογική αρχική εστίαση.
- Συνδυάστε τον με λίστα. Ένας χάρτης μόνος του είναι δύσχρηστος στο κινητό και για αναγνώστες οθόνης. Δείξτε τα ίδια αποτελέσματα και ως λίστα.
- Ορίστε ειδοποίηση προϋπολογισμού στην κονσόλα του παρόχου.
- Δημοσιεύστε και ελέγξτε στο ζωντανό domain, γιατί οι περιορισμοί αναφορέα συχνά μπλοκάρουν τον χάρτη μέχρι να προστεθεί το ζωντανό domain.
Συχνά λάθη
- Κλειδιά χωρίς περιορισμούς. Οποιοσδήποτε μπορεί να τα ξαναχρησιμοποιήσει στον δικό του ιστότοπο.
- Γεωκωδικοποίηση σε κάθε προβολή σελίδας. Αργό και ακριβό· κάντε γεωκωδικοποίηση μία φορά κατά την αποθήκευση.
- Ξεχασμένο το ζωντανό domain στους περιορισμούς κλειδιού. Δουλεύει στην προεπισκόπηση, γκρι κενό κουτί στην παραγωγή.
- Διατάξεις μόνο με χάρτη. Καρφίτσες χωρίς λίστα είναι επώδυνες σε μικρές οθόνες και μη προσβάσιμες.
- Εκατοντάδες δείκτες χωρίς ομαδοποίηση. Δυσανάγνωστοι και αργοί.
- Λείπει η αναφορά. Οι περισσότεροι πάροχοι χαρτών και πλακιδίων την απαιτούν, και το να την κρύβετε παραβιάζει τους όρους τους.
- Ζήτηση τοποθεσίας στη φόρτωση σελίδας. Ζητήστε μόνο όταν ο χρήστης πατήσει «Κοντά μου».
Λίστα ελέγχου
- Επιλέχθηκε ο σωστός τύπος χάρτη για τη δουλειά
- Κλειδί browser περιορισμένο στα domains και στα απαιτούμενα APIs
- Κλειδιά server αποθηκευμένα ως μυστικά
- Συντεταγμένες αποθηκευμένες στη βάση, γεωκωδικοποιημένες μία φορά
- Τα αποτελέσματα εμφανίζονται και ως λίστα
- Ομαδοποίηση για πολλούς δείκτες
- Η αναφορά είναι ορατή
- Ειδοποίηση προϋπολογισμού ορισμένη στον πάροχο
- Ελεγμένο στο δημοσιευμένο domain και σε κινητό
Προσθήκη χαρτών με το Mythex
Το Mythex δεν έχει ενσωματωμένη ενοποίηση χαρτών· φέρνετε το δικό σας κλειδί παρόχου, το προσθέτετε ως μυστικό του έργου (ή το επικολλάτε όταν ο agent δείξει κάρτα μυστικών) και ζητάτε τον χάρτη στη συνομιλία, όπως περιγράφεται στο Ενσωμάτωση οποιουδήποτε API. Οι συντεταγμένες μπαίνουν στη βάση δεδομένων του έργου. Θυμηθείτε να προσθέσετε και τα δύο domains, προεπισκόπησης και δημοσιευμένο, στους περιορισμούς ιστότοπου του κλειδιού, και δημοσιεύστε ξανά μετά από αλλαγές μυστικών.
Οι χάρτες συνήθως βρίσκονται δίπλα σε αναζήτηση και λίστες: δείτε πώς να προσθέσετε αναζήτηση στην εφαρμογή σας, πώς να φτιάξετε ιστότοπο καταλόγου και πώς να φτιάξετε ιστότοπο μικρής επιχείρησης.
Ερωτήσεις
Ποιος είναι ο ευκολότερος τρόπος να βάλω χάρτη σε ιστότοπο;
Ενσωματώστε έναν χάρτη με μία καρφίτσα, για παράδειγμα με το Maps Embed API της Google σε iframe. Η τεκμηρίωση της Google λέει ότι τα αιτήματα Maps Embed είναι δωρεάν με απεριόριστη χρήση, αν και χρειάζεστε ακόμη κλειδί API.
Είναι δωρεάν το Google Maps σε εφαρμογή;
Εν μέρει. Από τον Σεπτέμβριο 2026, η τιμολόγηση pay-as-you-go της Google δίνει σε κάθε SKU Essentials, συμπεριλαμβανομένων των Dynamic Maps, 10.000 δωρεάν γεγονότα τον μήνα, ενώ το Maps Embed είναι απεριόριστο και δωρεάν. Χρειάζεστε πάντως έργο Google Cloud με ενεργοποιημένη τη χρέωση για να ξεκινήσετε.
Είναι ασφαλές να βάλω το κλειδί Google Maps στον browser;
Τα κλειδιά για χάρτες στον browser είναι ορατά σε όλους, οπότε η Google προτείνει να τα περιορίζετε στις διευθύνσεις του ιστότοπού σας και μόνο στα APIs που χρησιμοποιείτε. Τα κλειδιά για υπηρεσίες server, όπως η γεωκωδικοποίηση, πρέπει να μένουν στον server.
Μπορώ να χρησιμοποιήσω δωρεάν το OpenStreetMap;
Τα δεδομένα του OpenStreetMap είναι δωρεάν για χρήση με αναφορά, αλλά οι δημόσιοι διακομιστές πλακιδίων (tiles) χρηματοδοτούνται από δωρεές, χωρίς εγγύηση υπηρεσίας, και η πολιτική προειδοποιεί ότι η πρόσβαση μπορεί να αποσυρθεί για εμπορικούς χρήστες. Για παραγωγική εφαρμογή, χρησιμοποιήστε πάροχο πλακιδίων ή φιλοξενήστε τα μόνοι σας.