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

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

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

Ενσωματώστε τον χάρτη Google

Εάν θέλετε να εμφανίζετε μόνο οδηγίες από μια τοποθεσία σε άλλη, το πιο εύκολο πράγμα που μπορείτε να κάνετε είναι να ενσωματώσετε οποιονδήποτε χάρτη βλέπετε χρησιμοποιώντας τον κώδικα ενσωμάτωσης. Πρώτα^(First) , προχωρήστε και ρυθμίστε όποιες κατευθύνσεις θέλετε στους Χάρτες Google^{(Google Maps)} και, στη συνέχεια, κάντε κλικ στο εικονίδιο με το γρανάζι κάτω δεξιά στη σελίδα.

Κάντε κλικ στην επιλογή Κοινή χρήση ή ενσωμάτωση χάρτη^{( Share or embed map)} και, στη συνέχεια, κάντε κλικ στην καρτέλα Ενσωμάτωση χάρτη^{(Embed map)} . Εδώ μπορείτε να επιλέξετε ένα μέγεθος για τον χάρτη σας και στη συνέχεια να αντιγράψετε τον κώδικα iframe και να τον αποθέσετε σε οποιαδήποτε ιστοσελίδα θέλετε.

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

Δημιουργία Φόρμας Χαρτών Google

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

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

Πώς μπορούμε, λοιπόν, να δημιουργήσουμε αυτό το τροποποιημένο πλαίσιο οδηγιών λήψης; Λοιπόν^(Well) , πρώτα, θα χρειαστεί να λάβουμε τη σωστή σύνταξη για τη διεύθυνση URL^(URL) που χρησιμοποιεί η Google για οδηγίες. Ευτυχώς, μπορούμε να το καταλάβουμε λαμβάνοντας οδηγίες μεταξύ δύο μερών και, στη συνέχεια, απλώς αντιγράφοντας τη διεύθυνση URL^(URL) από τη γραμμή διευθύνσεων. Μπορείτε επίσης να κάνετε κλικ στο μικροσκοπικό εικονίδιο με το γρανάζι στο κάτω δεξιά μέρος της σελίδας και να επιλέξετε Κοινή χρήση ή ενσωμάτωση χάρτη^{(Share or embed map)} .

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

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

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

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

Προχώρα και δώσε μια ευκαιρία. Βάλτε μια διεύθυνση σε εισαγωγικά για τη διεύθυνση έναρξης και λήξης και επικολλήστε τη διεύθυνση URL^(URL) στο πρόγραμμα περιήγησής σας! Αντικατέστησα την αρχή με την πατρίδα μου τη Νέα Ορλεάνη^{(New Orleans)} και το τέλος με το Χιούστον^(Houston) , Τέξας, οπότε η διεύθυνση URL των οδηγιών των ^(URL)Χαρτών Google^{(Google Maps)} φαίνεται ως εξής:

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

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

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

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

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

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

Μπορείτε να προσαρμόσετε τις οδηγίες και να χαρτογραφήσετε ακόμη περισσότερο με μερικές επιπλέον παραμέτρους. Για παράδειγμα, ας υποθέσουμε ότι δεν θέλετε η προεπιλεγμένη προβολή να είναι χάρτες, αλλά αντ' αυτού θέλετε να είναι Δορυφόρος^(Satellite) και να εμφανίζεται η κυκλοφορία^(Traffic) .

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

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

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

Add Google Maps Driving Directions to Your Website

Even thоυgh there are so many mapping apps and services out there to get yоu from point Α to point Β, the definitive king of mapѕ is Google Maрs. I use it on my computer, tablet and 90% of thе time on my smartphone. It’s got the beѕt data, the moѕt navigation and routing optіons and сool features like Street View and walking, biking and mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

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

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

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

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

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

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

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

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Οι Χάρτες Google δεν μιλάνε ή δεν δίνουν φωνητικές οδηγίες; 12 τρόποι για να διορθώσετε

• 9 κρυφές λειτουργίες στους Χάρτες Google που πρέπει να ελέγξετε

• Πώς να προβάλετε το ιστορικό αναζήτησης των Χαρτών Google

• Πώς να χρησιμοποιήσετε πολλές στάσεις στους Χάρτες Google

• Πώς να ενσωματώσετε Φόρμες Google στον ιστότοπό σας

• Λείπει το γραφικό στοιχείο της γραμμής αναζήτησης Google; Πώς να το επαναφέρετε στο Android

• Πώς να διαγράψετε το ιστορικό YouTube και τη δραστηριότητα αναζήτησης

• Πώς να χρησιμοποιήσετε το SUMIF στα Φύλλα Google

• Πώς να δημιουργήσετε προσαρμοσμένες διαδρομές στους Χάρτες Google

• Πώς να απενεργοποιήσετε την Ασφαλή Αναζήτηση Google

• Πώς να κατεβάσετε τους Χάρτες στους Χάρτες Google για προβολή εκτός σύνδεσης

• Πώς να χρησιμοποιήσετε το Ημερολόγιο Google: 10 επαγγελματικές συμβουλές

• Πώς να χρησιμοποιήσετε το Οικογενειακό Ημερολόγιο Google για να διατηρήσετε την οικογένειά σας έγκαιρα

• Πώς να φτιάξετε μια επαγγελματική κάρτα στο Google Drive

• Πώς να χρησιμοποιήσετε τις αναπτυσσόμενες λίστες των Φύλλων Google

• Πώς να στείλετε ιδιωτικά email στο Gmail

• Τι είναι οι κωδικοί Google Maps Plus και πώς να τους χρησιμοποιήσετε

• Μπορείτε να διαγράψετε όλα τα μηνύματα ηλεκτρονικού ταχυδρομείου από το Gmail ταυτόχρονα;

• Πώς να δείτε το Ιστορικό τοποθεσίας των Χαρτών Google

• Πώς λειτουργεί ο αλγόριθμος YouTube;