Obwohl es so viele Karten-Apps und -Dienste gibt, die Sie von Punkt A nach Punkt B bringen, ist Google Maps definitiv der König der Karten . Ich verwende es auf meinem Computer, Tablet und zu 90 % auf meinem Smartphone. Es hat die besten Daten, die meisten Navigations- und Routenoptionen und coole Funktionen wie Street View und Informationen zu Fußgängern, Radfahrern und öffentlichen Verkehrsmitteln.

Was aber, wenn Sie eine Karte oder Wegbeschreibungen außerhalb der Google-Website verwenden müssen? Angenommen^(Suppose) , Sie haben Ihre eigene Hochzeitswebsite oder einen persönlichen Blog und Gäste könnten Ihre Website besuchen, die Adresse eingeben, von der sie kommen, und automatisch eine Wegbeschreibung zum Veranstaltungsort erhalten!

Nun, es gibt ein paar Möglichkeiten, wie Sie dies erreichen können. Am einfachsten ist es, die Karte einfach mit dem von Google Maps^{(Google Maps)} generierten Einbettungscode in Ihre Webseite einzubetten . Der zweite Weg ist etwas technischer, aber anpassbarer und dynamischer. Ich werde beide Methoden unten erwähnen.

Google Map einbetten

Wenn Sie nur Wegbeschreibungen von einem Ort zum anderen anzeigen möchten, ist es am einfachsten, die angezeigte Karte mit dem Einbettungscode einzubetten. Legen Sie zunächst^(First) die gewünschten Wegbeschreibungen in Google Maps fest^{(Google Maps)} und klicken Sie dann auf das Zahnradsymbol unten rechts auf der Seite.

Klicken Sie auf Karte teilen oder einbetten^{( Share or embed map)} und dann auf die Registerkarte Karte^{(Embed map)} einbetten . Hier können Sie eine Größe für Ihre Karte auswählen und dann den Iframe-Code kopieren und auf einer beliebigen Webseite ablegen.

Der einzige Nachteil dieser Methode ist, dass der Benutzer nur eine statische Karte sieht. In der zweiten Methode unten können Sie ein Formular erstellen, in dem der Benutzer eine beliebige Startadresse eingeben kann, und es wird eine Karte von dieser Adresse zu einer Zieladresse Ihrer Wahl erstellt.

Erstellen Sie ein Google Maps-Formular

Um zu veranschaulichen, was ich mit der zweiten Methode meine, geben Sie eine US-Adresse in das Feld unten ein, um eine Wegbeschreibung von Ihrem Standort zu meinem Haus zu erhalten:

Cool oder? Sie können dieses kleine Formular ganz einfach auf jeder Website, jedem Blog oder überall dort erstellen, wo Sie HTML -Code einfügen können! Dies ist auch ideal für Websites kleiner Unternehmen, da Sie es auf Ihrer Kontaktseite anzeigen können und die Leute schnell eine Wegbeschreibung erhalten können, anstatt Ihre Adresse kopieren, ein neues Fenster öffnen und dann ihre Startadresse eingeben zu müssen.

Wie gehen wir also vor, um dieses modifizierte Feld zum Abrufen der Wegbeschreibung zu erstellen? Nun^(Well) , zuerst müssen wir die korrekte Syntax für die URL ermitteln^(URL) , die Google für Wegbeschreibungen verwendet. Glücklicherweise können wir das herausfinden, indem wir Wegbeschreibungen zwischen zwei Orten abrufen und dann einfach die URL aus der Adressleiste kopieren. Sie können auch auf das kleine Zahnradsymbol ganz unten rechts auf der Seite klicken und Karte teilen oder einbetten^{(Share or embed map)} auswählen .

Die Registerkarte Link teilen enthält die ^(Share)URL , die dieselbe URL in der Adressleiste Ihres Browsers ist. Ich habe die gesamte URL unten eingefügt, nur um Ihnen zu zeigen, wie sie aussieht.

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

Huch! Das ist ziemlich lang! Da ist eine Menge Zeug drin, von dem das meiste keinen Sinn ergibt! Die URL-Parameter von Google Maps^{(Google Maps URL)} waren früher sehr unkompliziert und einfach, aber die neue URL- Struktur ist ziemlich kompliziert. Zum Glück können Sie die alten Parameter weiterhin verwenden und Google konvertiert sie automatisch in die neue Version. Um zu sehen, was ich meine, schau dir den Link unten an.

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

Gehen Sie voran und geben Sie ihm eine Chance. Setzen Sie eine Adresse in Anführungszeichen für die Start- und Endadresse und fügen Sie die URL in Ihren Browser ein! Ich habe start durch meine Heimatstadt New Orleans und end durch Houston , TX ersetzt, also sieht die URL meiner Google Maps - Wegbeschreibung so aus:

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

Es klappt! Wie Sie jedoch sehen können, wandelt Google Maps die Links in etwas viel Komplizierteres um, sobald die Karte vollständig geladen ist. Ok, jetzt, da wir eine vernünftige URL haben , die wir an Google Maps übergeben können, müssen wir ein einfaches Formular mit zwei Feldern erstellen, eines für die Startadresse und eines für die Zieladresse.

Wenn Sie möchten, dass die Leute einfach ihre Adresse eingeben und eine Wegbeschreibung zu Ihrem Ort erhalten, möchten wir, dass das zweite Feld ausgeblendet und bereits auf die Zieladresse eingestellt ist.

<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>

Sehen Sie sich den obigen Code an. Die erste Zeile beginnt mit dem Formular und besagt, dass die Daten an maps.google.com/maps gesendet werden sollen, wenn auf die Schaltfläche „Senden“ geklickt wird. Das target=blank bedeutet, dass das Ergebnis in einem neuen Fenster geöffnet werden soll. Dann haben wir ein Textfeld für die Startadresse, das leer ist.

Das zweite Textfeld ist ausgeblendet und der Wert ist die gewünschte Zieladresse. Schließlich gibt es noch einen Submit-Button mit dem Titel „Get Directions“. Wenn jetzt jemand seine Adresse eingibt, erhält er Folgendes:

Mit ein paar zusätzlichen Parametern können Sie die Wegbeschreibung und die Karte noch weiter anpassen. Nehmen wir beispielsweise an, Sie möchten nicht, dass die Standardansicht Karten ist, sondern stattdessen Satellit^(Satellite) und Verkehr^(Traffic) anzeigen soll .

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

Beachten Sie die Felder layer=t und t=hURL . layer=t ist für die Verkehrsschicht und t=h bedeutet hybride Karte! t kann auch auf m für normale Karte, k für Satellit und  p für Gelände eingestellt werden. z ist die Zoomstufe und Sie können sie von 1 bis 20 ändern. In der obigen URL ist sie auf 7 eingestellt. Fügen Sie diese einfach^(Just) an Ihre endgültige URL an und Sie haben jetzt ein hochgradig angepasstes Google Maps-Formular zum Anfordern von Wegbeschreibungen^{(Google Maps Get Directions)} auf Ihrer Website !

Haben Sie irgendwelche Probleme damit, posten Sie einen Kommentar und ich werde versuchen zu helfen! Genießen!

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping apps and services out there to get you from point A to point Β, the definitive king of maps іѕ Gоogle Maps. I use it on my computer, tаblet and 90% of the timе on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Streеt 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 Maps spricht nicht oder gibt keine Sprachanweisungen? 12 Möglichkeiten zur Behebung

• 9 versteckte Funktionen in Google Maps, die Sie sich ansehen sollten

• So zeigen Sie Ihren Google Maps-Suchverlauf an

• So verwenden Sie mehrere Haltestellen in Google Maps

• So betten Sie Google-Formulare auf Ihrer Website ein

• Was ist der erweiterte Schutz in Google Chrome und wie wird er aktiviert?

• Kommentare in Google Docs hinzufügen und auflösen

• So verwenden Sie SUMIF in Google Sheets

• So legen Sie eine Stecknadel in Google Maps auf Desktop und Handy ab

• 3 Möglichkeiten zum Erstellen von Rahmen in Google Docs

• So ändern Sie das Standard-Google-Konto

• So exportieren und importieren Sie Chrome-Lesezeichen

• So sichern Sie den Google Chrome-Verlauf

• Was ist die Google-App und wie wird sie verwendet?

• 8 großartige Anwendungen für Google Maps Street View

• So verwenden Sie den Inkognito-Modus von Google Maps auf einem Android-Gerät

• Was ist ein Google-Fehler „ungewöhnlicher Datenverkehr“ und wie kann er behoben werden?

• So verwenden Sie Dropdown-Listen von Google Sheets

• So kündigen oder pausieren Sie ein YouTube Premium-Abonnement

• Was sind Local Guides für Google Maps?