Προσθέστε Οδηγίες οδήγησης για τους Χάρτες Google στον ιστότοπό σας

Παρόλο που υπάρχουν τόσες εφαρμογές και υπηρεσίες χαρτογράφησης εκεί έξω για να φτάσετε από το σημείο Α στο σημείο Β, ο οριστικός βασιλιάς των χαρτών είναι οι Χάρτες Google. Το χρησιμοποιώ στον υπολογιστή μου, στο tablet μου και στο 90% του χρόνου στο smartphone μου. Διαθέτει τα καλύτερα δεδομένα, τις περισσότερες επιλογές πλοήγησης και δρομολόγησης και δροσερά χαρακτηριστικά, όπως Street View και πληροφορίες για τα πόδια, ποδηλασία και μαζικές μεταφορές.

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

Λοιπόν, υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να το ολοκληρώσετε. Ο ευκολότερος τρόπος είναι να ενσωματώσετε απλώς τον χάρτη στην ιστοσελίδα σας χρησιμοποιώντας τον κώδικα ενσωμάτωσης που δημιουργείται από τους Χάρτες Google. Ο δεύτερος τρόπος είναι λίγο πιο τεχνικός, αλλά περισσότερο προσαρμόσιμος και δυναμικός. Θα αναφέρω και τις δύο μεθόδους παρακάτω.

Ενσωματώστε το Google Map

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

Κάντε κλικ στο Κοινή χρήση ή ενσωμάτωση χάρτη και στη συνέχεια κάντε κλικ στο Ενσωματώστε το χάρτη αυτί. Εδώ μπορείτε να επιλέξετε ένα μέγεθος για τον χάρτη σας και στη συνέχεια να αντιγράψετε τον κωδικό iframe και να το αποθέσετε σε οποιαδήποτε ιστοσελίδα σας αρέσει.

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

Δημιουργήστε τη φόρμα Google Maps

Για να διευκρινίσετε τι εννοώ με τη δεύτερη μέθοδο, προχωρήστε και πληκτρολογήστε μια διεύθυνση ΗΠΑ στο παρακάτω πλαίσιο για να λάβετε οδηγίες από την τοποθεσία σας στο σπίτι μου:

Cool; Μπορείτε να δημιουργήσετε εύκολα αυτή τη μικρή φόρμα σε οποιοδήποτε ιστοτόπο, blog ή οπουδήποτε μπορείτε να βάλετε κώδικα HTML! Αυτό είναι επίσης καλό για ιστότοπους μικρών επιχειρήσεων, καθώς μπορείτε να το ρίξετε στη σελίδα επαφών σας και οι άνθρωποι μπορούν να πάρουν οδηγίες γρήγορα, αντί να χρειάζεται να αντιγράψετε τη διεύθυνσή σας, να ανοίξετε ένα νέο παράθυρο και στη συνέχεια να πληκτρολογήσετε την αρχική τους διεύθυνση.

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

Η καρτέλα "Κοινή χρήση" θα περιέχει τη διεύθυνση URL, η οποία είναι η ίδια διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης. Έχω προχωρήσει και επικολλήθηκε ολόκληρη τη διεύθυνση URL παρακάτω μόνο για να σας δείξει τι μοιάζει.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Deerfield + Rd, + Allen, + TX + 75013, + ΗΠΑ / @ 33.1125686, -96.7557749,13z / data =! 3m1! 4b1! 4m13! 4m12! 1m5! 1m1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.762484! 2d33.08947! 1m5! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892

Yikes! Αυτό είναι πολύ καιρό! Υπάρχουν πολλά πράγματα εκεί, τα περισσότερα από τα οποία δεν έχουν νόημα! Οι παράμετροι του URL των Χαρτών Google ήταν πολύ απλές και εύκολες, αλλά η νέα δομή διευθύνσεων URL είναι πολύ περίπλοκη. Ευτυχώς, μπορείτε να χρησιμοποιήσετε τις παλιές παραμέτρους και η Google θα τις μετατρέψει αυτόματα στη νέα έκδοση. Για να δείτε τι εννοώ, δείτε τον παρακάτω σύνδεσμο.

http://maps.google.com/maps?saddr=start&daddr=end

Πήγαινε και δώσε μια βολή. Τοποθετήστε μια διεύθυνση σε εισαγωγικά για την διεύθυνση έναρξης και λήξης και επικολλήστε τη διεύθυνση URL στο πρόγραμμα περιήγησής σας! Αντικατέστησα αρχικά με την πατρίδα μου στη Νέα Ορλεάνη και τελειώσω με το Houston, TX, γι 'αυτό και μοιάζει η διεύθυνση URL των οδηγιών μου για τα Χάρτες Google:

http://maps.google.com/maps?saddr="new orleans, la & daddr = "houston, tx"

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

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

Εισαγάγετε την αρχική σας διεύθυνση:

Ελέγξτε τον παραπάνω κωδικό. Η πρώτη γραμμή ξεκινά μια φόρμα και λέει ότι όταν κάνετε κλικ στο κουμπί υποβολής, τα δεδομένα πρέπει να σταλούν στο maps.google.com/maps. ο στόχος = κενό σημαίνει ότι θέλουμε το αποτέλεσμα να ανοίξει σε ένα νέο παράθυρο. Στη συνέχεια, έχουμε ένα πλαίσιο κειμένου για τη διεύθυνση έναρξης, το οποίο είναι κενό.

Το δεύτερο πλαίσιο κειμένου είναι κρυφό και η τιμή είναι η διεύθυνση προορισμού που επιθυμούμε. Τέλος, υπάρχει ένα κουμπί υποβολής με τον τίτλο "Λήψη Οδηγιών". Τώρα όταν κάποιος πληκτρολογεί στη διεύθυνσή τους, θα πάρουν αυτό:

Μπορείτε να προσαρμόσετε τις οδηγίες και να χαρτογραφήσετε ακόμη περισσότερο με μερικές επιπλέον παραμέτρους. Για παράδειγμα, ας πούμε ότι δεν θέλετε η προεπιλεγμένη προβολή να είναι χάρτες, αλλά θέλετε να είναι Δορυφόρος και δείχνουν ΚΙΝΗΣΗ στους ΔΡΟΜΟΥΣ.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Παρατηρήστε το στρώμα = t και t = h πεδία στη διεύθυνση URL. layer = t είναι για το στρώμα κυκλοφορίας και t = h σημαίνει υβριδικό χάρτη! t μπορεί επίσης να ρυθμιστεί σε m για κανονικό χάρτη, κ για δορυφόρο και Π για το έδαφος. z είναι το επίπεδο ζουμ και μπορείτε να το αλλάξετε από 1 σε 20. Στην παραπάνω διεύθυνση URL έχει οριστεί σε 7. Ακριβώς στρέψτε τα στην τελική διεύθυνση URL και τώρα έχετε μια πολύ προσαρμοσμένη φόρμα Google Maps Get Directions στον ιστότοπό σας!

Έχετε κάποια προβλήματα με αυτό, δημοσιεύστε ένα σχόλιο και θα προσπαθήσω να βοηθήσω! Απολαμβάνω!