Πώς να ενσωματώσετε τους Χάρτες Google στον ιστότοπο: 4 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:33

Vηφίστε με στο Challenge Maps!

Πρόσφατα, δημιούργησα έναν ιστότοπο που χρησιμοποιεί τους Χάρτες Google. Η ενσωμάτωση των Χαρτών Google στον ιστότοπό μου ήταν αρκετά εύκολη και όχι τόσο δύσκολη. Σε αυτό το Instructables, θα σας δείξω πόσο εύκολο είναι να ενσωματώσετε τους Χάρτες Google στον ιστότοπό σας.

Για να είμαι ειλικρινής μαζί σας, μόλις ενσωμάτωσα τους Χάρτες Google στον ιστότοπό μου μόνο για διασκέδαση. Δεν υπάρχουν τόσα πολλά πράγματα που πρέπει να κάνετε ενώ βρίσκεστε σε καραντίνα, οπότε γιατί να μην δημιουργήσετε έναν ιστότοπο που χρησιμοποιεί τους Χάρτες Google και στη συνέχεια να δείξετε στους ανθρώπους τα βήματα που έχω κάνει κατά τη δημιουργία αυτού του ιστότοπου.

Τώρα πρέπει να πω, πρέπει να γνωρίζετε ένα ή δύο πράγματα για το HTML και το CSS για να ενσωματώσετε τους Χάρτες Google στον ιστότοπό σας. Εάν δεν γνωρίζετε τίποτα για HTML ή CSS, δοκιμάστε να μεταβείτε στη διεύθυνση

Σημείωση: Δεν είμαι συνδεδεμένος με το W3Schools σε οποιοδήποτε σχήμα ή μορφή. Είναι απλώς ένας ιστότοπος που θεωρώ ότι είναι χρήσιμος όταν μαθαίνω HTML και CSS.

Προμήθειες

• Επεξεργαστής κειμένου (θα χρησιμοποιηθεί για την προσαρμογή του ιστότοπού σας και την παροχή του περιεχομένου στον ιστότοπό σας).
• Χάρτες Google (τι θα ενσωματωθεί στον ιστότοπό σας).
• Βασική κατανόηση HTML και CSS (αυτές είναι οι ακόλουθες γλώσσες προγραμματισμού που θα χρησιμοποιούνταν κατά την προσαρμογή του ιστότοπού σας και την παροχή περιεχομένου στον ιστότοπό σας).

Βήμα 1: Παρέχετε περιεχόμενο στον ιστότοπό σας

Μεταβείτε στο λογισμικό επεξεργασίας κειμένου στον υπολογιστή σας. Για παράδειγμα, επειδή έχω Windows, πρέπει να πάω στο Σημειωματάριο. Αφού μεταβείτε στο Σημειωματάριο πληκτρολογήστε τα εξής:

Χάρτες Google

Χάρτες Google

Αφού ολοκληρώσετε την πληκτρολόγηση των παρακάτω στο Σημειωματάριο, μεταβείτε στους Χάρτες Google, όπου αργότερα θα λάβετε τον κωδικό που θα χρησιμοποιήσετε για την ενσωμάτωση των Χαρτών Google στον ιστότοπό σας.

Ακολουθεί ο σύνδεσμος για να μεταβείτε στους Χάρτες Google:

Βήμα 2: Ενσωματώστε τους Χάρτες Google στον ιστότοπό σας

Μόλις βρεθείτε στους Χάρτες Google, κάντε κλικ στο κουμπί "Μενού" και, στη συνέχεια, αναζητήστε "Κοινή χρήση ή ενσωμάτωση χάρτη". Μόλις δείτε "Κοινή χρήση ή ενσωμάτωση χάρτη", κάντε κλικ σε αυτό. Αφού κάνετε κλικ σε αυτό, θα πρέπει να δείτε "Αποστολή συνδέσμου" και "Ενσωμάτωση χάρτη". Τώρα κάντε κλικ στο "Ενσωμάτωση χάρτη", μόλις κάνετε κλικ στο "Ενσωμάτωση χάρτη" θα πρέπει τώρα να δείτε ένα κάτω βέλος στα αριστερά ενός πλαισίου κειμένου που θα χρησιμοποιηθεί για να επιλέξετε πόσο μεγάλο ή μικρό θέλετε να είναι ο χάρτης. Αντιγράψτε το κείμενο στο πλαίσιο. Και επικολλήστε το κείμενο στο HTML του ιστότοπού σας.

Βήμα 3: Προσαρμόστε τον ιστότοπό σας

Επιστρέψτε στο λογισμικό επεξεργασίας κειμένου στον υπολογιστή σας και πληκτρολογήστε τα ακόλουθα:

Σώμα Χαρτών Google {φόντο-χρώμα: rgb (129, 207, 224, 1);}

Χάρτες Google

Η ετικέτα στυλ χρησιμοποιείται για την προσαρμογή του ιστότοπού σας. Τώρα, θα σας συμβουλεύσω ότι αυτό το βήμα χρησιμοποιεί CSS. Μπορείτε να πληκτρολογήσετε τα παρακάτω, έτσι ώστε η δική σας να μοιάζει ακριβώς με τον ιστότοπό μου.

Μόλις τελειώσετε, αποθηκεύστε το αρχείο σας ως "Google Maps.html". Μην ξεχνάτε το τμήμα html γιατί αν δεν συμπεριλάβετε αυτό το μέρος, δεν μπορείτε να δημιουργήσετε έναν ιστότοπο.

Βήμα 4: Κοιτάξτε το τελικό προϊόν σας

Μόλις τελειώσετε ακολουθώντας όλα τα βήματα αυτού του Οδηγού, ρίξτε μια καλή ματιά στο τελικό σας προϊόν. Εάν είστε ευχαριστημένοι με το τελικό σας προϊόν, αυτό είναι υπέροχο. Αλλά, αν δεν είστε ευχαριστημένοι με το τελικό σας προϊόν, επιστρέψτε στο Σημειωματάριό σας και προσπαθήστε να διορθώσετε το τελικό σας προϊόν, έτσι ώστε την επόμενη φορά που θα ρίξετε μια καλή ματιά στο τελικό σας προϊόν, να είστε ευχαριστημένοι με αυτό που έχετε δημιουργήσει τα χέρια σου.

Εάν θέλετε να δείτε τον πηγαίο κώδικα, μπορείτε να τον βρείτε στο κάτω μέρος του παρόντος Οδηγού. Σας ευχαριστώ για την προβολή των οδηγιών μου και την καλή κωδικοποίηση!

Για υπενθύμιση, ψηφίστε με στο Challenge Maps!