In diesem Artikel zeige ich Ihnen, wie Sie eine responsive Google Maps-Karte zu einer WordPress-Webseite (z. B. für eine Kontaktseite) hinzufügen, ohne ein Plugin zu verwenden. Ich werde WordPress 6.0 für dieses Tutorial sowie das Twenty Twenty Two-Design verwenden, das das Standarddesign für diese Version von WordPress ist.
Mit der Google Maps-Funktion können Sie den Standort Ihres Unternehmens auf einer interaktiven Karte anzeigen, sodass Website-Besucher leicht sehen können, wo Sie sich befinden, und mit der Karte interagieren, um zu sehen, was sich sonst noch in Ihrer Umgebung befindet, Wegbeschreibungen zu erhalten usw. Sie zeigt Website-Besuchern dass Sie ein lokales Unternehmen sind und einen realen, physischen Standort haben. Es ist sehr üblich, dass Unternehmen eine Karte auf ihrer Kontaktseite haben.
Es gibt Unmengen von Google Maps-Plugins, aber viele von ihnen sind klobig und erfordern entweder eine Zahlung für die vollständigen Plugin-Funktionen oder ein Google-Entwicklerkonto mit komplizierten Schritten, die zu einem weniger als wünschenswerten Ergebnis führen.
Abgesehen davon gibt es eine wirklich einfache Möglichkeit, Google Maps ohne Plugins und ohne ein paar komplizierte Schritte zu Ihren WordPress 6.0-Seiten hinzuzufügen. Tauchen wir ein.
Schritt 1: Erstellen Sie einen HTML-Block
Melden Sie sich zunächst im Admin-Bereich Ihrer WordPress-Site an und navigieren Sie zum Abschnitt „Seiten“ (roter Pfeil im obigen Bild).
Klicken Sie auf die Seite, zu der Sie Ihre Google Maps-Funktion hinzufügen möchten (Sie können auf den Seitennamen klicken, in meinem Fall „Kontakt“ – blauer Pfeil im obigen Bild – oder einfach unter dem Seitennamen auf „Bearbeiten“ klicken).
Wenn Sie ein Blockthema wie Twenty Twenty Two verwenden, befinden Sie sich jetzt im Blockeditor für Ihre Seite. Scrollen Sie nach unten zu der Stelle, an der Sie Ihre Karte einfügen möchten.
Klicken Sie als Nächstes auf das „+“-Symbol (den „Block Inserter“ – roter Pfeil im Bild oben), um einen Block einzufügen.
Suchen Sie im Suchfeld nach „Gruppe“ (im Foto grün umrandet) und klicken Sie, um den Gruppenblock hinzuzufügen (roter Pfeil). Auf diese Weise können Sie dem Blockelement einige benutzerdefinierte Einstellungen hinzufügen.
Klicken Sie beispielsweise auf die Option „Ausrichtung ändern“ (roter Pfeil) und wählen Sie „Volle Breite“ (grüner Pfeil). Dadurch wird die Breite des Blocks, der unsere interaktive Karte von Google Maps enthält, auf volle Breite gesetzt.
Klicken Sie als Nächstes auf die große Schaltfläche „+“ innerhalb der Gruppe (roter Pfeil auf dem obigen Foto). Suchen Sie in der Suchleiste nach „HTML“ (grün umrandet) und klicken Sie auf den Block „Benutzerdefiniertes HTML“ (blauer Pfeil).
Sie werden sehen, dass jetzt „Write html…“ (roter Pfeil) steht. Hier fügen wir unsere Karte hinzu.
Schritt 2: Google Maps-Einbettungs-HTML generieren
Wir müssen jetzt unsere Karte mit Google Maps generieren. Öffnen Sie dazu einen neuen Browser-Tab und navigieren Sie zu Google.com, falls dies nicht Ihr Standard-Suchbrowser ist.
Geben Sie als Nächstes die Adresse ein, die auf Ihrer Karte angezeigt werden soll. Für dieses Beispiel verwende ich das Empire State Building (roter Pfeil). Sie können für diesen Teil die genaue Adresse Ihres Unternehmens verwenden (dh Hausnummer, Straße, Stadt, Bundesland und Postleitzahl – oder was auch immer Sie für internationale Adressen eingeben, wenn Sie sich nicht in den USA befinden).
Klicken Sie auf das Kartenbild, das für Ihre Adresse auf der Seite mit den Suchmaschinenergebnissen angezeigt wird (roter Pfeil im Bild – dieser befindet sich entweder in der Mitte der Seite oder rechts davon, je nachdem, ob Sie eine Adresse oder den Namen eingegeben haben ein Ort, wie ich es getan habe).
Ihre Adresse erscheint nun als Markierung auf der Vollbildkarte (roter Pfeil im obigen Bild). Außerdem sehen Sie mehrere Symbole unter der Adresse oder dem Titel des gesuchten Ortes. Zu diesen Symbolen gehören „Wegbeschreibung“, „Speichern“, „In der Nähe“, „An Telefon senden“ und „Teilen“. Klicken Sie auf das Symbol „Teilen“ (blauer Pfeil).
Klicken Sie auf der angezeigten Registerkarte „Teilen“ auf die Registerkarte „Karte einbetten“ (blauer Pfeil auf dem obigen Foto).
Auf dieser Registerkarte sehen Sie eine Vorschau Ihres eingebetteten Google Maps-Widgets. Auf der linken Seite des Codes (grüner Pfeil) befindet sich ein Größen-Dropdown-Menü – Sie können eine vorgefertigte Größe auswählen oder „Benutzerdefiniert“ wählen, um Ihre eigene Größe festzulegen. Ich wähle die Option „Benutzerdefiniert“ (roter Pfeil).
Hier sehen Sie die Abmessungen für meine benutzerdefinierte Karte. Ich setze die Höhe oder die erste Dimension auf 1200 (roter Pfeil). Ich lasse die Breite auf 600 eingestellt. Sie können auf „Vorschau in Originalgröße“ (grüner Pfeil) klicken, um die Karte in einem neuen Pop-up-Fenster in voller Größe anzuzeigen (stellen Sie sicher, dass Sie alle Pop-up-Blocker deaktivieren, falls vorhanden eingeschaltet, um das Fenster nicht zu blockieren). Verlassen Sie das Vorschaufenster, sobald Sie fertig sind.
Klicken Sie anschließend auf den Link „HTML kopieren“ (blauer Pfeil). Dies ist der Code, den wir in unsere WordPress-Seite einfügen werden.
Schritt 3: Fügen Sie den HTML-Code in die WordPress-Seite ein
Navigieren Sie zurück zum Browser-Tab, der Ihre WordPress-Website enthält. Klicken Sie auf den leeren HTML-Block mit der Aufschrift „Write HTML here…“ und fügen Sie den Code (roter Pfeil) ein, indem Sie Strg+V auf Ihrer Tastatur drücken (cmd+V auf einem Mac).
Wenn Sie in der Block-Symbolleiste auf die Option „Vorschau“ klicken (roter Pfeil), sehen Sie jetzt Ihre Karte auf Ihrer Seite (grüner Pfeil). Klicken Sie erneut auf die Option „HTML“, um zum HTML-Code (blauer Pfeil) zurückzukehren.
Wir haben unsere Karte auf unserer Seite eingebettet, aber sie reagiert nicht – das heißt, wenn wir die Karte auf einem kleineren Bildschirm wie einem Tablet oder Telefon anzeigen, passt sie ihre Größe nicht an den Bildschirm an. Um dies zu beheben, müssen wir dem HTML-Code ein benutzerdefiniertes Design hinzufügen.
Schritt 4: Machen Sie Google Maps responsiv
ich werde sein Verwenden von Code, den ich von dieser Website erhalten habe um die Einbettung von Google Maps responsiv zu machen. Scrollen Sie nach unten zum Abschnitt „Wie man Google Maps responsiv einbettet“ (roter Pfeil). Scrollen Sie dann nach unten zum zweiten Codesatz (blauer Pfeil).
Kopieren Sie alles von „ ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
Navigieren Sie zurück zu WordPress. Klicken Sie mit der Maus ganz vorne in den HTML-Code, um diesen neuen Code am Anfang einzufügen (roter Pfeil). Drücken Sie Strg+V, um Ihren Code einzufügen.
Klicken Sie schließlich ganz am Ende des HTML-Codes (roter Pfeil) und geben Sie „ “, um alles zu schließen. Im Grunde haben Sie gerade Ihren HTML-Code in ein benutzerdefiniertes Design verpackt. Dieses Styling weist den Browser des Besuchers an, die Größe der Karte basierend auf der Größe des Fensters, in dem er sie betrachtet, zu ändern.
Schritt 5: Passen Sie das Seitenverhältnis der interaktiven Karte an
Es gibt noch eine letzte Sache, die wir tun müssen – scrollen Sie zurück zum Anfang des Codes, bis Sie „padding-bottom: 75%“ sehen. (roter Pfeil). Dieser Codeabschnitt bestimmt das Seitenverhältnis der Karte.
Da ich die Größe meiner Karte auf 1200 x 600 geändert habe, hat sie ein Seitenverhältnis von 2:1. Dazu muss ich den Prozentsatz auf „50 %“ ändern (roter Pfeil).
Wenn Sie sich nicht sicher sind, welchen Prozentsatz Sie für Ihre Karte verwenden sollen, nehmen Sie einfach das Seitenverhältnis (z. B. 16:9) und teilen Sie die zweite Zahl durch die erste, um Ihren Prozentsatz zu erhalten (9 geteilt durch 16 ergibt 56.25 %).
Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu übernehmen (blauer Pfeil im obigen Bild), und klicken Sie dann unten links auf „Seite anzeigen“, um das Ergebnis anzuzeigen.
Sie sollten jetzt Ihr Google Maps-Widget angezeigt sehen (roter Pfeil im obigen Bild).
Sie können die Reaktionsfähigkeit testen, indem Sie die Größe Ihres Browsers verkleinern und dann zurück zu dem Bereich der Webseite scrollen, der die Karte enthält.
Das war's für dieses Tutorial! Wenn es Ihnen gefallen hat und Sie lernen möchten, wie Sie Ihre eigene professionelle WordPress-Website von Grund auf neu erstellen, können Sie sich bei my anmelden Kurs „WordPress 6.0 für Nicht-Programmierer“ auf Udemy, oder schauen Sie sich meine anderen Tutorials an!
