Google gibt Ihnen außerdem jeden Monat ein Guthaben in Höhe von 200 Dollar auf Ihr Abrechnungskonto, um Ihre Nutzungskosten auszugleichen. Wie Sie also sehen können, sollte Sie die Verwendung von Google Maps auf Ihrer Website nichts kosten, es sei denn, Sie generieren Tausende von Anfragen.

Was hat sich sonst noch geändert? Nichts, aber Sie müssen jetzt Folgendes tun, wenn Sie Google Maps in WordPress verwenden möchten:

1. Melden Sie sich für ein Google Cloud Platform Console-Konto an und konfigurieren Sie es.
2. Geben Sie Ihre Rechnungsdaten an, auch wenn Sie möglicherweise nie eine Rechnung erhalten.
3. Fügen Sie den API-Schlüssel zu Ihrem Google Maps-Einbettungscode oder Ihren Plugin-Einstellungen hinzu.

Wie Sie einen Google Maps-API-Schlüssel erhalten

Nachfolgend finden Sie Schritte, wie Sie Ihren Google Maps-API-Schlüssel erhalten.

Schritt 1

Gehen Sie zur Google Cloud Platform Console. Wenn Sie noch kein Konto haben, erstellen Sie eines, es ist kostenlos.

Schritt 2

Wählen Sie ein Projekt aus oder erstellen Sie eines.

Schritt 3

Richten Sie Ihr Abrechnungskonto ein. Auch wenn Sie eine Kreditkarte hinterlegen müssen, sollten Sie nie belastet werden, es sei denn, Sie überschreiten die hohen Nutzungsgrenzen.

Schritt 4

Sie werden aufgefordert, ein oder mehrere Produkte auszuwählen. Dies hängt von der Art der Karte ab, die Sie verwenden. Wenn Sie zum Beispiel eine Karte ohne Plugin in Ihre WordPress-Site einbetten (wie in den Schritten weiter unten gezeigt), dann würden Sie die Google Maps Embed API auswählen.

Google Maps Embed API

Wenn Sie ein Plugin wie Google Maps Widget verwenden (wie in den Schritten weiter unten gezeigt), dann würden Sie die Google Maps Static API wählen.

Wenn Sie ein Plugin oder Theme eines Drittanbieters verwenden, sollten diese eine Dokumentation darüber haben, welche Art der Google Maps Bereitstellung sie verwenden. Keine Sorge, Sie können jederzeit mehrere Typen hinzufügen und diese später ändern.

Schritt 5

Klicken Sie auf „Aktivieren.“

Google Maps API aktivieren

Schritt 6

Klicken Sie auf „APIs“ und dann unter „Credentials“ sehen Sie Ihren API-Schlüssel.

Google-Maps-API-Schlüssel

Schritt 7

Wenn Sie Ihren Google-Maps-API-Schlüssel einfach einbetten, wird er im Klartext in Ihrem Quellcode angezeigt. Daher sollten Sie dies einschränken, da sonst andere Personen Ihren API-Schlüssel auf ihrer WordPress-Website oder in ihren Projekten verwenden und Ihre Nutzung in die Höhe treiben könnten.

Um dies zu tun, klicken Sie einfach auf den Namen Ihres API-Schlüssels und Sie können eine Einschränkung hinzufügen. Für Ihre WordPress-Site sollte das einfache Hinzufügen eines HTTP-Referrers ausreichen. Zum Beispiel: https://yourdomain.com/*. Damit wird es nur Aufrufe auf Ihrer Website zulassen.

Google Maps API-Schlüssel-Beschränkung

Wie man Google Maps in WordPress ohne ein Plugin einbindet

Wenn Sie nur eine einfache Karte einbetten möchten und keine detailliertere Funktionalität wie benutzerdefinierte Standortmarkierungen oder andere Anmerkungen benötigen, können Sie Google Maps ohne Plugin einbetten, indem Sie die normale Google Maps-Website verwenden, die Sie täglich nutzen.

So funktioniert es…

Schritt 1: Kopieren Sie den Google Maps-Einbettungscode

Um loszulegen, verwenden Sie die Google Maps-Website, um die Karte zu erstellen, die Sie einbetten möchten.

Wenn Sie beispielsweise eine Ortsmarkierung einbetten möchten, öffnen Sie diesen Ort in Google Maps. Oder, wenn Sie eine Wegbeschreibung einbetten möchten, öffnen Sie die Wegbeschreibung in Google Maps.

Wenn Sie die Karte haben, die Sie einbetten möchten, klicken Sie auf das Hamburger-Menü in der oberen linken Ecke:

Zugriff auf den Einbettungscode

In der Liste der Menüpunkte wählen Sie die Option zum Teilen oder Einbetten der Karte:

Öffnen Sie die Einbettungsoptionen

Dadurch öffnet sich ein Popup zum Teilen. Klicken Sie in diesem Popup auf die Registerkarte Karte einbetten.

Dann können Sie die gewünschte Größe über das Dropdown-Menü auswählen. Für die meisten WordPress-Seiten ist die Standardgröße gut geeignet, aber Sie können die Karte bei Bedarf größer oder kleiner machen.

Klicken Sie anschließend auf die Schaltfläche „HTML kopieren“, um den Einbettungscode zu kopieren:

Der Google Maps Einbettungscode

Sie müssen dann Ihren API-Schlüssel in den Code einfügen. Ihr Code sollte also in etwa so aussehen:

<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&parameters allowfullscreen></iframe>

Schritt 2: Google Maps Embed Code zur WordPress-Site hinzufügen

Jetzt müssen Sie nur noch den Embed Code zu Ihrer WordPress-Site in den Beitrag oder die Seite einfügen, in der Sie Ihre Karte einbinden möchten.

Wenn Sie den neuen WordPress Gutenberg-Block-Editor verwenden, der mit WordPress 5.0 veröffentlicht wurde, können Sie das tun, indem Sie einen benutzerdefinierten HTML-Block hinzufügen und den Einbettungscode in den Block einfügen. Vergessen Sie nicht, Ihren API-Schlüssel hinzuzufügen.

Wie man den Einbettungscode im WordPress-Block-Editor hinzufügt

Sie können eine Vorschau anzeigen, wie Ihre Karte aussehen wird, indem Sie auf die Schaltfläche „Vorschau“ über dem Block klicken.

Wenn Sie noch den klassischen TinyMCE-Editor verwenden, können Sie den Google Maps-Einbettungscode hinzufügen, indem Sie den Reiter Text öffnen und den Code dort einfügen:

Wie man den Einbettungscode im klassischen WordPress-Editor hinzufügt

Sobald Sie den Code hinzugefügt haben, können Sie zurück zum Reiter „Visuell“ gehen, um eine Live-Vorschau Ihrer Karte zu sehen.

Und das war’s! Sie haben soeben gelernt, wie Sie Google Maps in WordPress ohne ein Plugin einbinden können.

Verwenden Sie Google My Maps, um kompliziertere Karten ohne ein Plugin einzubinden

Wenn Sie kreativer werden wollen, wenn es um Dinge wie mehrere Standortmarkierungen, benutzerdefinierte Anmerkungen usw. geht, können Sie das immer noch ohne ein Plugin mit dem My Maps-Dienst von Google tun.

My Maps ist ein offizielles Tool von Google, mit dem Sie Ihre eigenen benutzerdefinierten Karten erstellen und teilen können. Damit können Sie etwas wie das folgende Beispiel erstellen, mit vielen benutzerdefinierten Markierungen und benutzerdefinierten Informationen, die angezeigt werden, wenn ein Benutzer auf eine Markierung klickt:

Google My Maps Beispiel

Hier sehen Sie, wie Sie es verwenden, um benutzerdefinierte Google Maps zu WordPress hinzuzufügen.

Schritt 1: Erstellen Sie Ihre Karte in Google My Maps

Um loszulegen, gehen Sie zu Google My Maps und erstellen Sie eine neue Karte. Von dort aus können Sie die Kartenerstellungsschnittstelle verwenden, um Ihre Karte zu erstellen:

Die Google My Maps-Schnittstelle

Wir werden zwar nicht zu sehr ins Detail gehen, aber mit dieser Schnittstelle können Sie einige ziemlich kreative Karten erstellen. In diesem Hilfe-Artikel von Google finden Sie viele wichtige Funktionen.

Schritt 2: Einbettungscode generieren

Wenn Sie mit der Erstellung Ihrer Karte fertig sind, müssen Sie den Einbettungscode generieren.

Bevor Sie diesen Code erhalten können, müssen Sie Ihre Karte jedoch erst veröffentlichen. Klicken Sie dazu auf die Schaltfläche Teilen. Klicken Sie dann im Popup auf Ändern…

Google My Maps Freigabeeinstellungen

Dann wählen Sie Ein – Öffentlich im Web und klicken auf Speichern:

Linkfreigabe einschalten

Wenn Sie das getan haben, klicken Sie auf das Dropdown-Menü neben dem Titel Ihrer Karte und wählen Sie Auf meiner Seite einbetten, um den eigentlichen Einbettungscode zu generieren:

Zugriff auf den My-Maps-Einbettungscode

Dann öffnet sich ein Popup mit dem Code, den Sie kopieren sollten. Vergessen Sie nicht, Ihren API-Schlüssel hinzuzufügen.

Der My Maps-Einbettungscode

Schritt 3: Einbettungscode zur WordPress-Website hinzufügen

Jetzt können Sie den Einbettungscode zu Ihrer WordPress-Website hinzufügen, genau wie den Einbettungscode, den Sie von der normalen Google Maps-Website erhalten.

Wenn Sie nicht sicher sind, wie das geht, klicken Sie hier, um zu diesem Abschnitt des Tutorials von oben zu springen.

Verwenden Sie stattdessen ein WordPress-Google-Maps-Plugin

Neben den oben beschriebenen manuellen Methoden gibt es auch jede Menge WordPress-Google-Maps-Plugins, die Ihnen dabei helfen können, Karten auf Ihrer Website einzubetten.

Es gibt ein paar Gründe, warum Sie eines dieser Plugins gegenüber den manuellen Methoden in Betracht ziehen sollten:

• Sie ermöglichen es Ihnen, kompliziertere Karten mit einer einfachen Schnittstelle zu erstellen.
• Sie können alles tun, ohne Ihr WordPress-Dashboard verlassen zu müssen.
• Einige von ihnen sind mit WordPress verknüpft. Zum Beispiel können Sie Kartenmarkierungen mit WordPress-Beiträgen verknüpfen.
• Einige von ihnen können Ihnen helfen, Google Maps für die Leistung zu optimieren (mehr dazu später).

Für alle diese Plugins müssen Sie Ihren eigenen Google Maps API-Schlüssel generieren, bevor Sie mit dem Einbetten von Karten beginnen können. Dieses Tutorial zeigt Ihnen, wie das geht.

Google Maps Widget

Google Maps Widget ist ein einfaches Google Maps-Plugin, mit dem Sie eine Karte über die Google Maps Static API einbetten können, die einen leistungsfreundlicheren Ansatz bietet, indem sie ein statisches Bild anstelle einer interaktiven Karte einbettet (wir werden im nächsten Abschnitt mehr dazu erklären).

Es ist eine großartige Option, wenn Sie etwas Einfaches und Leichtgewichtiges wollen. Sobald Sie es aktivieren, müssen Sie sich Ihren Google Maps API-Schlüssel schnappen und ihn in den Einstellungen des Plugins eingeben. Sie können eine Google Map zu einem beliebigen Widget-Bereich auf Ihrer Website hinzufügen. Anschließend können Besucher eine größere interaktive Version der Karte in einer Lightbox öffnen:

Die Google Maps Widget-Oberfläche

Sie können eine interaktive Karte auf Wunsch auch gleich verwenden, und in der Pro-Version können Sie Karten mit einem Shortcode überall auf Ihrer Website einbetten.

Google Maps Easy

Google Maps Easy hilft Ihnen, individuelle Karten mit eigenen Markierungen und Anmerkungen zu erstellen.

Wenn Sie Markierungen hinzufügen, haben Sie die Möglichkeit, eigene Symbole hochzuladen, Text und Bilder in die Beschreibung der Markierung aufzunehmen und vieles mehr. Sie können auch steuern, wie Ihre Karte funktioniert, wie z.B. ob die Benutzer hineinzoomen können oder nicht:

Google Maps Easy interface

Sobald Sie Ihre Karte erstellt haben, können Sie sie entweder mit einem Shortcode oder einer PHP-Funktion einbetten.

Intergeo

Intergeo ist eine weitere beliebte Option, mit der Sie Ihre eigenen Karten mit benutzerdefinierten Markierungen erstellen können und die Kontrolle über die Kartenfunktionalität haben.

Nachdem Sie das Plugin installiert und aktiviert haben, können Sie Ihre Karten direkt von Ihrem WordPress-Dashboard aus erstellen:

Intergeo-Schnittstelle

Dann können Sie sie mit einem Shortcode überall auf Ihrer Website einbetten.

Gutenberg Block For Google Maps Embed

Gutenberg Block For Google Maps Embed ist ein einfaches Plugin, das dem neuen WordPress Gutenberg-Block-Editor einen eigenen Google Maps-Block hinzufügt.

Mit diesem Block können Sie eine beliebige Adresse einbetten und auch wählen:

• Abmessungen
• Zoomstufe
• Interaktive Karte vs. statische Karte (auch hier hilft die letztere Methode bei der Performance)

Es ermöglicht Ihnen nicht, Ihre eigenen benutzerdefinierten Karten zu erstellen – aber es ist eine bequeme Option, wenn Sie den neuen Block-Editor verwenden und nur eine einfache Möglichkeit zum Einbinden einiger einfacher Karten wünschen.

Google Maps kann Ihre WordPress-Site verlangsamen – lassen Sie es nicht zu

Während Google Maps mit seinen interaktiven Karten eine Menge cooler Funktionen in Ihre Site einbinden kann, gibt es einen Performance-Nachteil, da eine große Anzahl von Skripten geladen werden muss, um all diese interaktiven Funktionen zu betreiben.

Lange Rede, kurzer Sinn: Das Einbinden von interaktiven Google Maps kann Ihre Site verlangsamen.

Es gibt ein paar Möglichkeiten, wie Sie dem entgegenwirken können.

Erstens, wenn Sie keine interaktive Karte auf Ihrer Website benötigen, gibt es eine einfache Möglichkeit, die Dinge ohne Tools von Drittanbietern zu beschleunigen:

• Machen Sie einen Screenshot der Karte, um ihn auf Ihrer Website zu verwenden
• Verknüpfen Sie diesen Screenshot mit der Karte auf der Google Maps-Website, oder öffnen Sie ein Leuchtkasten-Popup mit der interaktiven Karte, wenn ein Nutzer darauf klickt.

Auf diese Weise lädt Ihre Website nur ein reguläres Bild – und nicht alle Skripte, die mit Google Maps verbunden sind.

Als Alternative zu dieser manuellen Vorgehensweise können Sie auch das kostenlose AWEOS Google Maps iframe load per click Plugin verwenden. Dieses Plugin ersetzt die Google Maps-Einbettungen automatisch durch ein generisches Platzhalterbild. Wenn ein Nutzer dann auf die Schaltfläche „Karte laden“ klickt, wird die vollständige Google Maps-Einbettung geladen:

Google Maps-Platzhalterbild

Oder Sie können auch die Google Maps Static API verwenden, die ein normales Bild ohne JavaScript zurückgibt. Einige Google Maps-Plugins – darunter Google Maps Widget und Gutenberg Block For Google Maps Embed – lassen Sie die Static API verwenden, wenn Sie Ihre Karten erstellen.

Wir sind uns jedoch bewusst, dass dieser statische Ansatz manchmal einfach nicht ausreicht und viele Leute das interaktive Google Maps-Erlebnis sofort einbinden möchten.

Wenn das der Fall ist, ist eine weitere gute Möglichkeit, Google Maps zu beschleunigen, die Verwendung von Lazy Loading. Mit „Lazy Loading“ wartet Ihre Website mit dem Laden von Google Maps-Einbettungen, bis die Besucher anfangen, die Seite nach unten zu scrollen. Das hält Ihre anfänglichen Seitenladezeiten schnell, während Sie immer noch interaktive Google Maps-Inhalte einbetten können.

Wir haben bereits darüber geschrieben, wie man Bilder und Videos langsam lädt, und es ist die gleiche Idee für Google Maps.

Es gibt ein paar Plugins, mit denen Sie dies tun können. Mit dem a3 Lazy Load Plugin können Sie zum Beispiel iframe Einbettungen, zu denen auch Google Maps gehört, lazy laden:

Lazy load Google Maps

Weitere Möglichkeiten sind:

• BJ Lazy Load
• Lazy Load by WP Rocket
• Easy Lazy Loader

Zusammenfassung

Wenn Sie nur eine einfache Karte auf Ihrer Seite einbetten möchten, können Sie Google Maps ohne Plugin mit der eingebauten Embed-Code-Funktion in WordPress einbinden. Oder Sie verwenden das Google My Maps-Tool, um Ihre eigene Karte zu erstellen und diese einzubetten.

Neben diesen manuellen Methoden gibt es auch viele Google Maps-WordPress-Plugins, die Ihnen eine Menge Kontrolle bieten, ohne dass Sie Ihr WordPress-Dashboard verlassen müssen.

Welche Methode Sie auch wählen, achten Sie auf die Auswirkungen der Verwendung von Google Maps auf die Leistung. Versuchen Sie, Google Maps nur dann zu verwenden, wenn es unbedingt notwendig ist, und ziehen Sie Taktiken wie Platzhalterbilder oder Lazy Loading in Betracht, um die negativen Auswirkungen auf die Performance zu verringern.

Haben Sie weitere Fragen zur Verwendung von Google Maps in WordPress? Lassen Sie es uns in den Kommentaren wissen!