Du suchst nach einer Möglichkeit, WordPress Google Maps Inhalte auf Deiner Website einzubetten?
Wie viele Dinge in WordPress gibt es mehrere verschiedene Möglichkeiten, wie du Google Maps auf deiner Website einbetten kannst, je nachdem, welche Art von Karteninhalt du einbinden möchtest.
In diesem Beitrag werden wir dir zunächst zeigen, wie du Google Maps in WordPress ohne Plugin hinzufügen kannst. Dann empfehlen wir dir einige Plugins, die dir helfen können, Google Maps einzubetten, sowie einige der Vorteile dieses Ansatzes. Wir werden auch darüber nachdenken, wie du die Google Maps API, die jetzt erforderlich ist, richtig nutzen kannst.
Abschließend möchten wir noch einige Leistungsüberlegungen zur Verwendung von Google Maps auf WordPress anstellen und einige Tipps geben, wie du das Laden deiner WordPress-Seite schnell halten kannst, auch wenn du Google Maps einbetten musst.
Du kannst unten klicken, um direkt zu einem bestimmten Abschnitt zu gelangen oder einfach das Ganze durchlesen.
- Google Maps API ist jetzt erforderlich
- Wie man Google Maps in WordPress ohne Plugin hinzufügt
- WordPress Google Maps Plugins, die dir mehr Flexibilität geben.
- Google Maps Leistungseffekt und Tipps zur Leistungssteigerung
Google Maps API ist jetzt erforderlich
Seit dem 11. Juni 2018 ist für Google Maps nun ein API-Schlüssel erforderlich. Wenn du Google Maps bereits auf deiner Website implementiert hast und es nicht mehr funktioniert, könnte dies der Grund dafür sein. Oder besser gesagt, du brauchst den API-Schlüssel. Die gute Nachricht ist, dass für 99% von euch, es immer noch kostenlos sein sollte. Nachfolgend findest du die Preise der Google Maps API.
Google gibt dir auch eine wiederkehrende 200 $ Gutschrift auf deinem Abrechnungskonto jeden Monat, um deine Nutzungskosten auszugleichen. Wie du sehen kannst, sollte dir die Verwendung von Google Maps auf deiner Website nichts kosten, es sei denn, du erzeugst Tausende von Anfragen.
Was hat sich sonst noch geändert? Nichts, aber du musst jetzt folgendes tun, wenn du Google Maps in WordPress verwenden willst:
- Registriere dich für ein Google Cloud Platform Console-Konto und konfiguriere es.
- Füge deine Rechnungsinformationen hinzu, auch wenn dir möglicherweise nie etwas in Rechnung gestellt wird.
- Füge den API-Schlüssel zu deinen Google Maps-Einbettungscode oder Plugin-Einstellungen hinzu.
So erhältst du einen Google Maps API-Schlüssel
Nachfolgend findest du Schritte, wie du deinen Google Maps API-Schlüssel erhältst.
Schritt 1
Gehe zur Google Cloud Platform Console. Wenn du noch keinen Account hast, erstelle einen, es ist kostenlos.
Schritt 2
Wähle oder erstelle ein Projekt.
Schritt 3
Richte dein Abrechnungskonto ein. Auch wenn sie verlangen, dass du eine Kreditkarte in eine Datei einträgst, sollte diese nie belastet werden, es sei denn, du überschreitest die hohen Nutzungsgrenzen.
Schritt 4
Du wirst aufgefordert, ein oder mehrere Produkte auszuwählen. Dies hängt von der Art der verwendeten Karte ab. Wenn du zum Beispiel eine Karte ohne Plugin auf deiner WordPress-Seite einbindest (wie in den Schritten weiter unten gezeigt), dann wählst du die Google Maps Embed API.
Wenn du ein Plugin wie Google Maps Widget verwendest (wie in den folgenden Schritten gezeigt), dann würdest du die Google Maps Static API wählen.
Wenn du ein Plugin oder Theme eines Drittanbieters verwendest, sollte dieser eine Dokumentation darüber haben, welche Art von Google Maps-Bereitstellung er verwendet. Keine Sorge, du kannst jederzeit mehrere Typen hinzufügen und diese später ändern.
Schritt 5
Klicke auf „Aktivieren“.
Schritt 6
Klicke auf „APIs“ und dann unter „Credentials“ siehst du deinen API Schlüssel
Schritt 7
Wenn du einfach deinen Google Maps API-Schlüssel einbindest, wird er im Klartext in deinem Quellcode angezeigt. Daher solltest du dies einschränken, da sonst die Leute deinen API-Schlüssel auf ihrer WordPress-Seite oder ihren Projekten verwenden und deine Nutzung einschränken können.
Klicke dazu einfach auf den Namen deines API-Schlüssels und er ermöglicht es dir, eine Einschränkung hinzuzufügen. Für deine WordPress-Seite sollte das einfache Hinzufügen eines HTTP-Referencers gut genug sein. Wie z.B. https://yourdomain.com/*. Dadurch ist es möglich, nur Anrufe auf deiner Website zu tätigen.
Wie man Google Maps in WordPress ohne Plugin hinzufügt
Wenn du nur eine einfache Karte einbetten möchtest und keine detaillierteren Funktionen wie benutzerdefinierte Standortmarkierungen oder andere Anmerkungen benötigst, kannst du Google Maps ohne Plugin über die normale Google Maps-Website einbetten, die du täglich nutzt.
So funktioniert es…
Schritt 1: Kopiere den Google Maps Embed Code
Verwende zu Beginn die Google Maps-Website, um die Karte zu erstellen, die du einbetten möchtest.
Wenn du beispielsweise eine Platzhalter einbetten möchtest, öffne diese Stelle in Google Maps. Oder, wenn du eine Wegbeschreibung einbetten möchtest, öffne die Wegbeschreibung in Google Maps.
Sobald du die Karte hast, die du einbetten möchtest, klicke auf das Hamburger-Menü in der linken oberen Ecke:
In der Liste der Menüpunkte, wähle die Option Teilen oder Einbetten
Dadurch wird ein Popup-Fenster für die Freigabe geöffnet. Klicke in diesem Popup auf die Registerkarte Eine Karte einbetten.
Anschließend kannst du über die Dropdown-Liste die gewünschte Größe auswählen. Für die meisten WordPress-Seiten funktioniert die Standardgröße gut, aber du kannst die Karte bei Bedarf größer oder kleiner machen.
Nachdem du das getan hast, klicke auf die Schaltfläche HTML kopieren, um den Einbettungscode zu kopieren:
Du musst dann deinen API-Schlüssel in den Code einfügen. Dein Code sollte also in etwa so aussehen:
YOUR_API_KEY¶meters allowfullscreen>
Schritt 2: Hinzufügen des Google Maps Einbettungscodes zur WordPress-Seite
Nun musst du nur noch diesen Einbettungscode zu deiner WordPress-Seite in den Beitrag oder die Seite einfügen, auf der du deine Karte einfügen möchtest.
Wenn du den neuen WordPress Gutenberg Blockeditor verwendest, der mit WordPress 5.0 veröffentlicht wurde, kannst du das tun, indem du einen benutzerdefinierten HTML-Block hinzufügst und den Einbettungscode in den Block einfügt. Vergiss nicht, deinen API-Schlüssel hinzuzufügen.
Du kannst dir eine Vorschau ansehen, wie deine Karte aussehen wird, indem du auf die Schaltfläche Vorschau über dem Block klickst.
Wenn du immer noch den klassischen TinyMCE-Editor verwendest, kannst du den Google Maps-Einbettungscode hinzufügen, indem du die Registerkarte Text öffnest und den Code dort einfügt:
Sobald du den Code hinzugefügt hast, kannst du zurück zur Registerkarte Visual gehen, um eine Live-Vorschau deiner Karte zu sehen.
Und das ist es! Du hast gerade gelernt, wie man Google Maps in WordPress ohne Plugin hinzufügt.
Verwende Google My Maps, um kompliziertere Karten ohne ein Plugin einzubetten.
Wenn du kreativer werden möchtest, wenn es um Dinge wie mehrere Standortmarkierungen, benutzerdefinierte Anmerkungen usw. geht, kannst du das immer noch tun, ohne dass ein Plugin mit dem My Maps-Service von Google erforderlich ist.
My Maps ist ein offizielles Tool von Google, mit dem du deine eigenen benutzerdefinierten Karten erstellen und freigeben kannst. Damit kannst du so etwas wie das folgende Beispiel erstellen, mit vielen benutzerdefinierten Markern und benutzerdefinierten Informationen, die angezeigt werden, wenn ein Benutzer auf eine Markierung klickt
So kann man benutzerdefinierte Google Maps Karten zu WordPress hinzufügen
Schritt 1: Erstelle deine Karte in Google My Maps
Um loszulegen gehe zu Google My Maps und erstelle eine neue Karten. Von da aus kannst du das Map Builder Interface nutzen.
Obwohl wir es nicht allzu ausführlich behandeln werden, kannst du mit dieser Oberfläche einige ziemlich kreative Karten erstellen. Für einen genaueren Blick deckt dieser Hilfeartikel von Google einen Großteil der wichtigen Funktionen ab.
Schritt 2: Einbettungscode generieren
Sobald du mit dem Erstellen deiner Map fertig bist, musst du den Embed-Code generieren.
Bevor du diesen Code jedoch erhalten kannst, musst du zuerst deine Karte veröffentlichen. Klicke dazu auf die Schaltfläche Teilen. Klicke dann im Popup auf Ändern..
Wähle dann On – Public in the web aus und klicke auf Save
Klicken Sie anschließend auf das Dropdown-Menü neben dem Titel deiner Karte und wähle Embed on my site, um den eigentlichen Embed-Code zu generieren:
Es öffnet sich ein Popup mit dem Code, den du kopieren musst. Vergiss nicht, deinen API-Schlüssel hinzuzufügen.
Schritt 3: Einbettungscode zur WordPress-Seite hinzufügen
Jetzt kannst du diesen Einbettungscode zu deiner WordPress-Seite hinzufügen, genau wie du den Einbettungscode, den du von der normalen Google Maps-Seite bekommst.
Wenn du dir nicht sicher bist, wie du das machen sollst, klicke hier, um von oben zu diesem Abschnitt des Tutorials zu gelangen.
Verwende stattdessen ein WordPress Google Maps Plugin.
Neben den oben genannten manuellen Methoden gibt es auch Tonnen von WordPress Google Maps Plugins, die dir helfen können, Karten auf deiner Website einzubetten.
Es gibt ein paar Gründe, warum du eines dieser Plugins über die manuellen Methoden stellen solltest:
- Mit ihnen kannst du kompliziertere Karten mit einer einfachen Benutzeroberfläche erstellen.
- Du kannst alles tun, ohne dein WordPress-Dashboard verlassen zu müssen.
- Einige von ihnen verlinken auf WordPress. Beispielsweise kannst du Kartenmarker mit WordPress-Posts verknüpfen.
- Einige von ihnen können dir helfen, Google Maps hinsichtlich der Leistung zu optimieren (mehr dazu später).
Für alle diese Plugins musst du deinen eigenen Google Maps API-Schlüssel generieren, bevor du mit dem Einbetten von Karten beginnen kannst. Dieses Tutorial zeigt dir, wie du das machst.
Google Maps Widget
Google Maps Widget ist ein einfaches Google Maps-Plugin, mit dem du eine Karte über die Google Maps Static API einbetten kannst, die einen leistungsfreundlicheren Ansatz bietet, indem sie ein statisches Bild anstelle einer interaktiven Karte einbindet (wir werden im nächsten Abschnitt mehr darüber erzählen).
Es ist eine gute Option, wenn du etwas Einfaches und Leichtes willst. Sobald du es aktiviert hast, musst du deinen Google Maps API-Schlüssel nehmen und ihn in die Einstellungen des Plugins einfügen. Du kannst eine Google Map zu jedem Widget-Bereich auf deiner Website hinzufügen. Anschließend können Besucher eine größere interaktive Version der Karte in einer Lightbox öffnen:
Auf Wunsch kannst du auch sofort eine interaktive Karte verwenden, und mit der Pro-Version kannst du Karten überall auf deiner Website mit einem Shortcode einbetten.
Google Maps Easy
Google Maps Easy hilft dir, benutzerdefinierte Karten mit deinen eigenen Markern und Anmerkungen zu erstellen.
Wenn du Marker hinzufügst, hast du die Möglichkeit, deine eigenen benutzerdefinierten Symbole hochzuladen, Text und Bilder in die Markerbeschreibung aufzunehmen und vieles mehr. Du kannst auch steuern, wie deine Karte funktioniert, z.B. ob du die Benutzer hineinzoomen lässt oder nicht:
Sobald du deine Map erstellt hast, kannst du sie entweder mit einem Shortcode oder einer PHP-Funktion einbetten.
Intergeo
Intergeo ist eine weitere beliebte Option, mit der du deine eigenen Karten mit benutzerdefinierten Markern erstellen kannst und die Kontrolle über die Kartenfunktionen hast.
Sobald du das Plugin installiert und aktiviert hast, kannst du deine Karten direkt aus deinem WordPress Dashboard erstellen:
Dann kannst du sie überall auf deiner Website mit einem Shortcode einbetten.
Gutenberg Block For Google Maps Embed
Gutenberg Block For Google Maps Embed ist ein einfaches Plugin, das dem neuen WordPress Gutenberg Blockeditor einen eigenen Google Maps Block hinzufügt.
Mit diesem Block kannst du jede beliebige Adresse einbetten und auch wählen:
- Abmessungen
- Zoomstufe
- Interaktive Karte vs. statische Karte (wiederum hilft die letztere Methode bei der Performance)
Du kannst keine eigenen benutzerdefinierten Karten erstellen – aber es ist eine praktische Option, wenn du den neuen Blockeditor verwendest und nur eine einfache Möglichkeit willst, einige einfache Karten einzubinden.
Google Maps kann deine WordPress-Seite verlangsamen – lass es nicht zu.
Während Google Maps es dir ermöglicht, eine Menge cooler Funktionen in deine Website mit ihren interaktiven Karten einzubetten, gibt es einen Leistungsabzug, da es eine große Anzahl von Skripten laden muss, um all diese interaktiven Funktionen zu nutzen.
Lange Rede kurzer Sinn, die Einbettung von interaktiven Google Maps kann deine Website verlangsamen.
Es gibt ein paar Möglichkeiten, wie du das bekämpfen kannst.
Erstens, wenn du keine Leute brauchst, die in der Lage sind, deine Karte interaktiv auf deiner Website zu durchsuchen, ist ein einfacher Weg, die Dinge ohne Drittanbieter-Tools zu beschleunigen:
- Mache einen Screenshot der Karte, die du auf deiner Website verwenden kannst.
- Verlinke diesen Screenshot mit der Karte auf der Google Maps-Website oder öffne ein Popup-Fenster mit der interaktiven Karte, wenn ein Benutzer klickt.
Auf diese Weise lädt deine Website nur ein normales Bild – nicht alle Skripte, die mit Google Maps verknüpft sind.
Alternativ dazu kannst du auch das kostenlose AWEOS Google Maps Iframe Load per Click Plugin verwenden. Dieses Plugin ersetzt automatisch die Einbettung von Google Maps durch ein generisches Platzhalterbild. Wenn ein Benutzer dann auf die Schaltfläche Load Map klickt, wird die vollständige Google Maps-Einbettung geladen:
Du kannst 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 – ermöglichen es dir, die Static API zu verwenden, wenn du deine Karten erstellst.
Wir stellen jedoch fest, dass dieser statische Ansatz manchmal einfach nicht ausreicht, und viele Leute wollen die interaktive Google Maps-Erfahrung sofort einbinden.
Wenn das der Fall ist, ist eine weitere gute Möglichkeit, Google Maps zu beschleunigen, die Verwendung von Lazy Loading. Mit dem verzögerten Laden wartet deine Website darauf, alle below the fold liegenden Google Maps-Einbettungen zu laden, bis die Besucher anfangen, die Seite nach unten zu scrollen. So bleiben die Ladezeiten deiner ersten Seite schnell und du kannst trotzdem interaktive Google Maps-Inhalte einbetten.
Wir haben bereits darüber geschrieben, wie man Bilder und Videos lazy lädt, und es ist die gleiche Idee für Google Maps.
Es gibt ein paar Plugins, mit denen du das machen kannst. Zum Beispiel lässt sich mit dem Plugin a3 Lazy Load Iframe Embeds, zu denen auch Google Maps gehört, lazy load einbetten:
Andere Optionen wären:
Zusammenfassung
Wenn du nur eine einfache Karte auf deiner Website einbetten möchtest, kannst du Google Maps ohne Plugin mit der integrierten Einbettungsfunktion zu WordPress hinzufügen. Oder du kannst das Google My Maps-Tool verwenden, um deine eigene benutzerdefinierte Karte zu erstellen und diese einzubetten.
Neben diesen manuellen Methoden gibt es auch viele Google Maps WordPress Plugins, die dir viel Kontrolle geben können, ohne dass du dein WordPress Dashboard verlassen musst.
Unabhängig davon, welche Methode du wählst, achte auf die Auswirkungen der Verwendung von Google Maps auf die Leistung. Versuche, Google Maps nur dann zu verwenden, wenn es absolut notwendig ist, und überlege dir Taktiken wie Platzhalterbilder oder Lazy Loading, um die negativen Auswirkungen auf die Leistung zu verringern.
Hast du noch weitere Fragen zur Nutzung von Google Maps auf WordPress? Lasst es uns in den Kommentaren wissen!
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar