Fügen Sie Ihrer Website Google Maps-Wegbeschreibungen hinzu

Obwohl es so viele Karten-Apps und -Dienste gibt, die Sie von Punkt A nach Punkt B führen, ist Google Maps der endgültige König der Karten. Ich verwende es auf meinem Computer, Tablet und zu 90% auf meinem Smartphone. Es verfügt über die besten Daten, die meisten Navigations- und Routenoptionen sowie coole Funktionen wie Street View und Informationen zu Fuß, Rad und Nahverkehr.

Was aber, wenn Sie eine Karte oder eine Wegbeschreibung außerhalb der Google-Website verwenden müssen? Angenommen, Sie haben eine 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, dies zu erreichen. Am einfachsten ist es, die Karte einfach mit dem von Google Maps generierten Code 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 Richtungen von einem Ort zu einem anderen anzeigen möchten, ist es am einfachsten, die eingebettete Karte mithilfe des Einbettungscodes einzubetten. Legen Sie zunächst die gewünschten Richtungen in Google Maps fest und klicken Sie dann auf das Zahnradsymbol unten rechts auf der Seite.

Klicke auf Karte teilen oder einbetten und klicken Sie dann auf Karte einbinden Tab. Hier können Sie eine Größe für Ihre Karte auswählen und dann den Iframe-Code kopieren und auf eine beliebige Webseite legen.

Der einzige Nachteil dieser Methode ist, dass der Benutzer nur eine statische Karte sieht. Mit der zweiten Methode unten können Sie ein Formular erstellen, in das der Benutzer eine Startadresse eingeben kann. Von dieser Adresse wird eine Karte zu einer Zieladresse Ihrer Wahl generiert.

Erstellen Sie ein Google Maps-Formular

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

Cool was? Sie können dieses kleine Formular problemlos auf jeder Website, in jedem Blog oder an anderen Stellen erstellen, an denen Sie HTML-Code einfügen können! Dies ist auch für kleine Unternehmen gut geeignet, da Sie sie auf Ihrer Kontaktseite anzeigen können. Die Benutzer können sich schnell Wegbeschreibungen anzeigen lassen, anstatt Ihre Adresse zu kopieren, ein neues Fenster zu öffnen und dann ihre Startadresse einzugeben.

Wie gehen wir nun vor, um diese modifizierte Get-Wegbeschreibung-Box zu erstellen? Zunächst müssen wir die korrekte Syntax für die URL erhalten, die Google für Wegbeschreibungen verwendet. Glücklicherweise können wir das herausfinden, indem Sie Wegbeschreibungen zwischen zwei Orten abrufen und dann einfach die URL aus der Adressleiste kopieren. Sie können auch auf das kleine Zahnradsymbol rechts unten auf der Seite klicken und wählen Karte teilen oder einbetten.

Die Registerkarte "Link freigeben" enthält die URL, die der URL in der Adressleiste Ihres Browsers entspricht. Ich habe die gesamte URL unten eingefügt, 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,0894! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892

Yikes! Das ist ziemlich lang! Es gibt eine Menge Sachen, von denen die meisten keinen Sinn machen! Die URL-Parameter von Google Maps waren früher sehr einfach und unkompliziert, aber die neue URL-Struktur ist recht kompliziert. Glücklicherweise können Sie die alten Parameter weiterhin verwenden, und Google konvertiert sie automatisch in die neue Version. Um zu sehen, was ich meine, checke den Link unten.

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

Mach weiter und probiere es aus. Geben Sie eine Adresse in Anführungszeichen für die Start- und Endadresse ein und fügen Sie die URL in Ihren Browser ein! Ich ersetze Start mit meiner Heimatstadt New Orleans und ende mit Houston, TX. So sieht meine URL für Google Maps-Anweisungen aus:

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

Es klappt! Wie Sie sehen, konvertiert Google Maps die Links jedoch in etwas weitaus komplexeres, sobald die Karte vollständig geladen ist. Nun, da wir nun eine vernünftige URL für Google Maps haben, 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 Benutzer nur ihre Adresse eingeben und eine Wegbeschreibung zu Ihrem Ort erhalten, möchten wir, dass das zweite Feld ausgeblendet ist und bereits auf die Zieladresse eingestellt ist.

Geben Sie Ihre Startadresse ein:

Überprüfen Sie den Code oben. Die erste Zeile beginnt mit dem Formular und besagt, dass die Daten an maps.google.com/maps gesendet werden müssen, wenn auf die Schaltfläche "Senden" geklickt wird. Das target = leer 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 Zieladresse, die wir wünschen. Schließlich gibt es noch eine Schaltfläche zum Senden mit dem Titel „Wegbeschreibung abrufen“. Wenn jemand jetzt seine Adresse eingibt, erhält er Folgendes:

Sie können die Richtungen anpassen und mit einigen zusätzlichen Parametern noch mehr Karten erstellen. Nehmen wir beispielsweise an, Sie möchten nicht, dass die Standardansicht Karten sind, sondern stattdessen Satellit und zeigen Der Verkehr.

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 Schicht = t und t = h Felder in der URL. Schicht = t ist für die Verkehrsschicht und t = h bedeutet Hybridkarte! t kann auch auf gesetzt werden m für normale Karte, k für Satellit und p für das Gelände. z Dies ist die Zoomstufe, die Sie von 1 bis 20 ändern können. In der obigen URL ist sie auf 7 gesetzt. Fügen Sie einfach Ihre endgültige URL hinzu, und Sie haben jetzt ein benutzerdefiniertes Google Maps-Wegbeschreibungen-Formular auf Ihrer Website!

Habe Probleme damit, schreibe einen Kommentar und ich werde versuchen zu helfen! Genießen!