Οι χάρτες αποτελούν ουσιαστική πτυχή οποιουδήποτε ιστοτόπου επιχειρήσεων. Ακόμα κι αν είστε πλήρως διαδικτυακοί, οι πελάτες επιθυμούν ακόμα να γνωρίζουν ποιοι είστε και πού ζείτε. Οι Χάρτες Google είναι τώρα η προεπιλογή για πολλούς ιστότοπους, καθώς είναι ο πιο εύκολος τρόπος χρήσης, φαινομενικά ο πιο ακριβής και δωρεάν. Μέχρι το τέλος αυτού του σεμιναρίου, θα ξέρετε ακριβώς πώς να ενσωματώσετε έναν ανταποκρινόμενο χάρτη Google στον ιστότοπό σας.
Οι προεπιλεγμένοι Χάρτες Google δεν ανταποκρίνονται πάντοτε, οπότε δεν μπορεί να κλιμακωθεί σε διαφορετικά μεγέθη οθόνης. Ανάλογα με το αν χρησιμοποιείτε ένα πρόσθετο WordPress ή το ενσωματώνετε μόνοι σας χρησιμοποιώντας κώδικα, ίσως χρειαστεί να προσθέσετε μερικές γραμμές CSS για να κάνετε τον χάρτη ευαίσθητο.
Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές
Η απάντηση είναι ένας βασικός όρος εδώ. Περιγράφει το σχεδιασμό ιστοσελίδων που λαμβάνει υπόψη την εμπειρία και τη συσκευή του χρήστη, για να διασφαλίσει ότι είναι το ίδιο ανεξάρτητα από τη συσκευή που χρησιμοποιείτε για την πρόσβαση στον ιστότοπο. Για παράδειγμα, ένας ανταποκρινόμενος ιστότοπος πρέπει να παρέχει την ίδια ποιότητα εμπειρίας, είτε το επισκέπτεστε σε επιτραπέζιο υπολογιστή, tablet ή smartphone.
Για να γίνει αυτό, ο ιστότοπος πρέπει να προσαρμοστεί σε διαφορετικές αναλύσεις, μεγέθη οθόνης και να αγγίξει.
Ενσωμάτωση ενός ανταποκριτικού χάρτη Google σε έναν ιστότοπο
Υπάρχουν τρεις τρόποι που γνωρίζω για να ενσωματώσετε τους Χάρτες Google σε έναν ιστότοπο. Εάν χρησιμοποιείτε ένα θέμα WordPress, ενδέχεται να έχει ενσωματωθεί η δυνατότητα. Μπορείτε επίσης να χρησιμοποιήσετε μια προσθήκη ή να ενσωματώσετε κώδικα απευθείας από το Google σε οποιονδήποτε ιστότοπο. Οι πρώτες και οι δεύτερες επιλογές είναι τέλειες για τους χρήστες του WordPress, άλλα CMS χρησιμοποιούν plugins για να καλύπτεστε εκεί. Η τελική επιλογή, χρησιμοποιώντας κώδικα, θα πρέπει να λειτουργεί στις περισσότερες ιστοσελίδες ανεξάρτητα από τον τρόπο κατασκευής τους.
Χρησιμοποιήστε ένα θέμα WordPress για να ενσωματώσετε έναν ανταποκρινόμενο χάρτη Google
Ορισμένα θέματα του WordPress θα έχουν μια λειτουργία ειδικά για τους Χάρτες Google. Καθώς οι χάρτες είναι τόσο θεμελιώδεις για τις σύγχρονες ιστοσελίδες, ορισμένοι σχεδιαστές θεμάτων τους έχουν εφαρμόσει άμεσα στα σχέδιά τους. Αν το θέμα σας διαθέτει λειτουργία χάρτη, θα χρειαστεί πιθανώς ένα API Χαρτών Google για να το λειτουργήσει. Προσθέτετε το API στις επιλογές θεμάτων και θα μιλήσει απευθείας με την Google για να χτίσει το χάρτη σε κάθε επίσκεψη.
- Επισκεφθείτε αυτήν τη σελίδα στον ιστότοπο της Google για να ξεκινήσετε τη διαδικασία API.
- Επιλέξτε το μπλε κουμπί Get Started.
- Επιλέξτε το εικονίδιο μενού τριών γραμμών στην επάνω αριστερή γωνία της νέας οθόνης.
- Επιλέξτε APIs & Services και έπειτα Πιστοποιητικά.
- Επιλέξτε Δημιουργία διαπιστευτηρίων και έπειτα κλειδί API.
- Επιλέξτε το κλειδί περιορισμού και επιλέξτε παραπομπές HTTP.
- Επιλέξτε Αποθήκευση.
- Αντιγράψτε το κλειδί API και επικολλήστε το στη σελίδα επιλογών σχεδιασμού που το απαιτεί.
Μόλις έχετε το κλειδί API, μπορείτε να εφαρμόσετε το Google Map στον ιστότοπό σας χρησιμοποιώντας τα εργαλεία σχεδιασμού θέματος. Όσο το θέμα ανταποκρίνεται, ο χάρτης πρέπει να είναι πάρα πολύ.
Χρησιμοποιήστε μια προσθήκη για την ενσωμάτωση ενός ανταποκριτικού χάρτη Google
Το WordPress χρησιμοποιεί plugins, το Joomla χρησιμοποιεί επεκτάσεις, το Drupal χρησιμοποιεί ενότητες ή plugins και άλλα CMS χρησιμοποιούν παρόμοιες συμβάσεις ονομασίας. Είτε έτσι είτε αλλιώς, τα plugins αναφέρονται σε αρθρωτά στοιχεία που μπορείτε να βιδώσετε στο core CMS σας για να προσθέσετε χαρακτηριστικά. Μια χρήσιμη λειτουργία είναι ένας Χάρτης Google. Αν το θέμα του ιστότοπού σας δεν περιλαμβάνει ένα στοιχείο χαρτών και δεν θέλετε να κάνετε τον κώδικα μόνοι σας, ένα πρόσθετο είναι το επόμενο καλύτερο πράγμα.
- Στο WordPress, περιηγηθείτε στο Plugins και Add New.
- Αναζητήστε τους Χάρτες Google και επιλέξτε μια προσθήκη που σας αρέσει η εμφάνιση.
- Ενεργοποιήστε το στο Plugins και μεταβείτε στις Ρυθμίσεις.
- Προσθέστε το API Χαρτών Google που δημιουργήσατε παραπάνω, όπου αναφέρεται και Αποθήκευση.
- Εφαρμόστε την προσθήκη όπου θέλετε να εμφανίζεται ο χάρτης.
Άλλα CMS διαφέρουν ελαφρώς στις ονομασίες τους και τις θέσεις του μενού αλλά η αρχή είναι πολύ ίδια. Τα περισσότερα, αν όχι όλα, πρόσθετα χάρτη απαιτούν να λειτουργήσει το API Χαρτών Google.
Χρησιμοποιήστε τον κώδικα για να ενσωματώσετε έναν ανταποκρινόμενο χάρτη Google
Αν δεν χρησιμοποιείτε το WordPress ή άλλο CMS, μπορείτε ακόμα να ενσωματώσετε έναν ανταποκρινόμενο χάρτη Google. Απλά πρέπει να χρησιμοποιήσετε τον κώδικα αντί για μια ενότητα. Παίρνει λίγο περισσότερη δουλειά, αλλά θα παρέχει τους ίδιους χάρτες που ανταποκρίνονται.
- Επισκεφθείτε τους Χάρτες Google και περιηγηθείτε μέχρι ο χάρτης που θέλετε να εμφανίζεται γεμίσει την οθόνη.
- Επιλέξτε το μπλε Share link και αντιγράψτε τον κώδικα από το Embed Map.
- Προσθέστε τον συγκεκριμένο κωδικό ενσωμάτωσης στον παρακάτω κώδικα μεταξύ και.
- Προσθέστε τον κώδικα μέσα στην HTML της ιστοσελίδας όπου θέλετε να δείτε τον χάρτη.
- Αποθηκεύστε τις αλλαγές σας.
Ο κώδικας:
Αυτός δεν είναι ο κώδικας μου, βρήκα το σε απευθείας σύνδεση αλλά το εξέτασα στον ιστότοπό μου. Λειτουργεί σαν γοητεία και πρέπει να δουλεύει αν χρησιμοποιείτε CMS, HTML, Hugo ή μία από τις πολλές άλλες γλώσσες ιστότοπων ή εργαλεία σελίδας.
