Vollständige Anleitung: So betten Sie Google Maps in WordPress ein

So betten Sie einen einzelnen Google Maps-Standort in WordPress ein

Beginnen wir mit der einfachsten Möglichkeit, einen Google Maps-Standort auf Ihrer WordPress-Site anzuzeigen. Wenn Sie nur eine Karte mit einem einzelnen Standort oder einer Ansicht einbetten möchten, benötigen Sie keine ausgefallenen Tools oder Plugins – Sie müssen lediglich den Google Maps-Einbettungscode in Ihre WordPress-Site einfügen .

So funktioniert das Ganze:

Gehen Sie wie gewohnt auf die Google Maps-Website und suchen Sie nach dem Ort, den Sie einbetten möchten. Sie können nach allem suchen. Das ist:

• Ein ganzes Land
• Eine bestimmte Stadt
• Ein bestimmtes Geschäft
• Sie nennen es

Es spielt keine Rolle!

Sobald Sie den Ort haben, den Sie auf Ihrer Karte anzeigen möchten, suchen Sie in der linken Seitenleiste nach der Schaltfläche „ Teilen “:

Sie sollten ein kleines Popup-Fenster sehen. Klicken Sie in diesem Popup auf die Option Karte einbetten:

Wählen Sie dann Ihre gewünschte Größe aus dem Dropdown-Menü aus. Und sobald Sie die gewünschte Größe ausgewählt haben, kopieren Sie den Code in das Feld:

Gehen Sie jetzt zu dem WordPress-Beitrag oder der Seite, auf der Sie die Google Maps-Box einbetten möchten.

Wechseln Sie im WordPress-Editor zur Registerkarte Text und fügen Sie den Code, den Sie aus Google Maps kopiert haben, an der Stelle ein, an der Ihre Karte erscheinen soll:

Veröffentlichen Sie jetzt Ihren Beitrag wie gewohnt und Sie sollten Ihr Google Maps-Feld im Front-End Ihrer WordPress-Site sehen:

Einfach genug, oder?

Sie können auch eine ähnliche Methode verwenden, um Google Maps-Wegbeschreibungen in WordPress einzubetten. Der einzige Unterschied ist die Startschnittstelle. Anstatt die Schaltfläche „ Teilen “ sofort zu sehen, müssen Sie auf das Hamburger-Symbol klicken und die Option „ Teilen oder Karte einbetten “ auswählen:

So betten Sie Google Maps mit mehreren Standortmarkierungen in WordPress ein

Wenn Sie eine Google Maps-Box mit mehreren Standortmarkierungen in WordPress einbetten möchten, sind die Dinge etwas anders.

Während ich Ihnen im nächsten Abschnitt zwei Google Maps-WordPress-Plug-ins zeigen werde, die Ihnen dabei helfen, dies zu erreichen, benötigen Sie dafür eigentlich kein Plug-in .

Stattdessen können Sie Ihre eigene Karte mit Google My Maps erstellen und diese Karte dann mit einer ähnlichen Methode wie der oben beschriebenen in WordPress einbetten.

Um zu beginnen, gehen Sie zu Google My Maps und klicken Sie auf Erste Schritte , um die Benutzeroberfläche zu starten. Klicken Sie in der Benutzeroberfläche auf die Option zum Erstellen einer neuen Karte :

Verwenden Sie dann die Benutzeroberfläche, um Ihre Karte zu erstellen. Es kann ein wenig schwierig sein, loszulegen – aber sobald Sie den Dreh raus haben, ist es ziemlich einfach zu bedienen. Sie können mithilfe des Suchfelds nach Dingen suchen und mithilfe der Schaltfläche „Markierung“ Markierungen auf der Karte hinzufügen:

Wenn Sie mit Ihrer Karte zufrieden sind, klicken Sie oben auf das Symbol mit den drei Punkten und wählen Sie Auf meiner Website einbetten aus .

Dann können Sie wie zuvor den Code, den Google Maps Ihnen gibt, in die Registerkarte „ Text “ des WordPress-Editors einfügen, um die Karte auf Ihrer WordPress-Site anzuzeigen.

WordPress-Plugins, mit denen Sie noch besser mit Google Maps arbeiten können

Während Sie nicht wirklich ein Plugin benötigen, um die grundlegende Einbettung von Google Maps zu handhaben, wie ich es Ihnen oben gezeigt habe, können Plugins nützlich sein, wenn Sie mehr Flexibilität wünschen (oder wenn Sie eine benutzerfreundlichere Methode zur Implementierung dieser Flexibilität wünschen).

Die meisten Plugins machen nicht wirklich etwas, was Sie mit genug Ellenbogenfett nicht selbst machen könnten – aber sie machen es verdammt viel einfacher und benutzerfreundlicher. Hier sind einige nette Plugins, die Ihnen helfen, besser mit Google Maps zu arbeiten.

WP GoogleMaps

WP Google Maps ist das beliebteste kostenlose Google Maps-Plugin im WordPress.org-Plugin-Verzeichnis.

Es hilft Ihnen, Ihre eigenen benutzerdefinierten Google Maps-Anzeigen mit von Ihnen ausgewählten Kartenmarkierungen und verschiedenen Kartendesigns zu erstellen. Im Grunde ist es eine benutzerfreundlichere Implementierung des Prozesses, den ich oben beschrieben habe.

Der einzige Nachteil ist, dass Sie mit der kostenlosen Version nur eine einzige Karte erstellen können. Wenn Sie mehrere Karten benötigen, müssen Sie entweder die Premium-Version erwerben oder eine andere Lösung verwenden.

Installieren und aktivieren Sie zunächst WP Google Maps. Da es auf WordPress.org aufgeführt ist, können Sie dies direkt von Ihrem WordPress-Dashboard aus tun.

Sobald Sie es aktiviert haben, gehen Sie zur neuen Kartenoption in Ihrer Seitenleiste, um loszulegen.

Bevor Sie jedoch Ihre erste Karte erstellen können, müssen Sie einen Google Maps-JavaScript-API-Schlüssel erhalten und ihn in den Einstellungen des Plugins eingeben. Sie können dies tun, indem Sie diese Anweisungen befolgen:

Sobald Sie Ihren API-Schlüssel eingegeben haben, können Sie die standardmäßige Meine erste Karte bearbeiten (denken Sie daran – mit der kostenlosen Version dieses Plugins können Sie nur eine Karte erstellen ):

Verwenden Sie die Benutzeroberfläche, um Ihre Karte zu erstellen. Wenn Sie fertig sind, können Sie es mit dem Shortcode überall auf Ihrer Website einbetten:

Es ist super einfach und flexibel – der einzige Nachteil ist die Beschränkung auf eine Karte in der kostenlosen Version.

Maps-Generator

Eine weitere gute Option zum Erstellen von Google Maps-Einbettungen mit einem WordPress-Plugin ist Maps Builder.

Sobald Sie das Plugin installiert und aktiviert haben, erhalten Sie einen neuen Google Maps -Tab in Ihrer Dashboard-Seitenleiste. Wie bei WP Google Maps müssen Sie einen Google Maps-API-Schlüssel hinzufügen, bevor Sie mit dem Plugin beginnen können.

Sobald Sie dies getan haben, können Sie zu Google Maps → Neu hinzufügen gehen, um eine neue Karte zu erstellen. Klicken Sie in dieser Oberfläche auf die Schaltfläche Open Map Builder , um die benutzerfreundliche Oberfläche zu starten:

Dort können Sie Ihre Karte mithilfe der Seitenleiste des Plugins erstellen:

Wenn Sie fertig sind, können Sie den vom Plugin erstellten Shortcode verwenden, um die Karte an einer beliebigen Stelle auf Ihrer WordPress-Site einzubetten.

WP Store Locator

Wenn Sie Google Maps speziell verwenden möchten, um mehrere Filialstandorte auf Ihrer WordPress-Site anzuzeigen ( ein häufiger Wunsch! ), ist es möglicherweise besser, ein spezielles Store-Locator-Plugin zu verwenden.

Während Sie dafür mehrere Plugins finden können, mag ich WP Store Locator, weil es flexibel ist und großartig aussieht.

Verwenden Sie das Google Maps-Modul Ihres bevorzugten Seitenerstellers

Die meisten WordPress-Seitenersteller enthalten ein spezielles Google Maps-Element/-Modul, mit dem Sie Google Maps-Inhalte in Ihre Designs einbetten können.

Das beliebte Divi Builder-Plugin enthält beispielsweise ein Google Maps-Modul, das Sie über die Benutzeroberfläche des Plugins ein wenig anpassen können:

Wenn Sie also bereits einen Seitenersteller verwenden, überprüfen Sie, ob Ihr Seitenersteller über ein Google Maps-Tool verfügt, bevor Sie sich auf die Suche nach einem speziellen Google Maps-Plug-in machen.

Ein lustiger Tweak für fortgeschrittene Benutzer

Diese Methode ist fortgeschritten und erfordert Code-Kenntnisse – wenn Sie also ein Anfänger sind, können Sie dies gerne ignorieren.

Aber wenn Sie sich mit WordPress und benutzerdefinierten Feldern auskennen, können Sie ein benutzerdefiniertes Feld verwenden, um automatisch eine Karte basierend auf dem Google Maps Map URLs-Schema zu erstellen.

Sie können beispielsweise ein Feld im WordPress-Backend erstellen, in das ein Benutzer nur die Adresse an einem Ort einfügen muss.

Dann können Sie mit ein wenig Vorverarbeitung zum Entfernen von Leerzeichen diese Adresse in etwas wie unten in einem Iframe in den Vorlagendateien Ihres Designs einfügen:

Und voila! Ein Benutzer muss lediglich eine Adresse in den WordPress-Editor eingeben, und eine Google Maps-Einbettung wird automatisch im Frontend für diesen Ort angezeigt.

Nochmals – diese Methode erfordert definitiv Grundkenntnisse in PHP und benutzerdefinierten Feldern – aber es ist ein cooler Hack, um etwas Zeit zu sparen.

Dinge einpacken

Egal, ob Sie nur etwas Grundlegendes tun möchten, wie z. B. einen regulären Google Maps-Standort in WordPress einbetten oder mit mehreren Kartenmarkierungen oder automatischer Kartenerstellung fortgeschrittener werden möchten, Sie haben viele Möglichkeiten.

Zum Einbetten einzelner Karten können Sie wahrscheinlich die Plugins überspringen und einfach den regulären Google Maps-Einbettungscode verwenden. Wenn Sie jedoch Karten mit mehreren Standorten erstellen und das Styling einfach steuern möchten, sind die beiden Google Maps-Plugins gute Optionen.

Und schließlich, wenn Sie einen Seitenersteller verwenden, sollten Sie unbedingt prüfen, ob Sie bereits ein Google Maps-Element haben, bevor Sie sich an eine externe Lösung wenden.