{"id":29057,"date":"2019-10-31T01:49:39","date_gmt":"2019-10-31T08:49:39","guid":{"rendered":"https:\/\/kinsta.com\/?p=38977"},"modified":"2023-09-05T13:38:43","modified_gmt":"2023-09-05T12:38:43","slug":"wordpress-google-maps","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/","title":{"rendered":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin"},"content":{"rendered":"<p>Du suchst nach einer M\u00f6glichkeit, WordPress Google Maps Inhalte auf Deiner Website einzubetten?<\/p>\n<p>Wie viele Dinge in WordPress gibt es mehrere verschiedene M\u00f6glichkeiten, wie du Google Maps auf deiner Website einbetten kannst, je nachdem, welche Art von Karteninhalt du einbinden m\u00f6chtest.<\/p>\n<p>In diesem Beitrag werden wir dir zun\u00e4chst zeigen, wie du Google Maps in WordPress ohne Plugin hinzuf\u00fcgen kannst. Dann empfehlen wir dir einige Plugins, die dir helfen k\u00f6nnen, Google Maps einzubetten, sowie einige der Vorteile dieses Ansatzes. Wir werden auch dar\u00fcber nachdenken, wie du die Google Maps API, die jetzt erforderlich ist, richtig nutzen kannst.<\/p>\n<p>Abschlie\u00dfend m\u00f6chten wir noch einige Leistungs\u00fcberlegungen 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.<\/p>\n<p>Du kannst unten klicken, um direkt zu einem bestimmten Abschnitt zu gelangen oder einfach das Ganze durchlesen.<\/p>\n<ul>\n<li><a href=\"#google-maps-api\">Google Maps API ist jetzt erforderlich<\/a><\/li>\n<li><a href=\"#withoutplugin\">Wie man Google Maps in WordPress ohne Plugin hinzuf\u00fcgt<\/a><\/li>\n<li><a href=\"#plugins\">WordPress Google Maps Plugins, die dir mehr Flexibilit\u00e4t geben.<\/a><\/li>\n<li><a href=\"#performance\">Google Maps Leistungseffekt und Tipps zur Leistungssteigerung<\/a><\/li>\n<\/ul>\n<h2><a id=\"google-maps-api\"><\/a>Google Maps API ist jetzt erforderlich<\/h2>\n<p>Seit dem 11. Juni 2018 ist f\u00fcr <strong>Google Maps nun ein API-Schl\u00fcssel erforderlich<\/strong>. Wenn du Google Maps bereits auf deiner Website implementiert hast und es nicht mehr funktioniert, k\u00f6nnte dies der Grund daf\u00fcr sein. Oder besser gesagt, du brauchst den API-Schl\u00fcssel. Die gute Nachricht ist, dass f\u00fcr 99% von euch, es immer noch kostenlos sein sollte. Nachfolgend findest du die <a href=\"https:\/\/cloud.google.com\/maps-platform\/pricing\/sheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">Preise der Google Maps API<\/a>.<\/p>\n<figure style=\"width: 1533px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-api-preise.jpg\" alt=\"Google Maps API Preise\" width=\"1533\" height=\"1243\"><figcaption class=\"wp-caption-text\">Google Maps API Preise<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Was hat sich sonst noch ge\u00e4ndert? Nichts, aber du musst jetzt folgendes tun, wenn du Google Maps in WordPress verwenden willst:<\/p>\n<ol>\n<li>Registriere dich f\u00fcr ein Google Cloud Platform Console-Konto und konfiguriere es.<\/li>\n<li>F\u00fcge deine Rechnungsinformationen hinzu, auch wenn dir m\u00f6glicherweise nie etwas in Rechnung gestellt wird.<\/li>\n<li>F\u00fcge den API-Schl\u00fcssel zu deinen Google Maps-Einbettungscode oder Plugin-Einstellungen hinzu.<\/li>\n<\/ol>\n<h3>So erh\u00e4ltst du einen Google Maps API-Schl\u00fcssel<\/h3>\n<p>Nachfolgend findest du Schritte, wie du deinen Google Maps API-Schl\u00fcssel erh\u00e4ltst.<\/p>\n<h3>Schritt 1<\/h3>\n<p>Gehe zur <a href=\"https:\/\/cloud.google.com\/console\/google\/maps-apis\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">Google Cloud Platform Console<\/a>. Wenn du noch keinen Account hast, erstelle einen, es ist kostenlos.<\/p>\n<h3>Schritt 2<\/h3>\n<p>W\u00e4hle oder erstelle ein Projekt.<\/p>\n<h3>Schritt 3<\/h3>\n<p>Richte dein Abrechnungskonto ein. Auch wenn sie verlangen, dass du eine Kreditkarte in eine Datei eintr\u00e4gst, sollte diese nie belastet werden, es sei denn, du \u00fcberschreitest die hohen Nutzungsgrenzen.<\/p>\n<h3>Schritt 4<\/h3>\n<p>Du wirst aufgefordert, ein oder mehrere Produkte auszuw\u00e4hlen. Dies h\u00e4ngt von der Art der verwendeten Karte ab. Wenn du zum Beispiel eine Karte <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#withoutplugin\" target=\"_blank\" rel=\"noopener noreferrer\">ohne Plugin<\/a> auf deiner WordPress-Seite einbindest (wie in den Schritten weiter unten gezeigt), dann w\u00e4hlst du die Google Maps Embed API.<\/p>\n<figure style=\"width: 1536px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-embed-api.png\" alt=\"Google Maps Embed API\" width=\"1536\" height=\"878\"><figcaption class=\"wp-caption-text\">Google Maps Embed API<\/figcaption><\/figure>\n<p>Wenn du ein Plugin wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#plugins\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Widget<\/a> verwendest (wie in den folgenden Schritten gezeigt), dann w\u00fcrdest du die Google Maps Static API w\u00e4hlen.<\/p>\n<p>Wenn du ein Plugin oder Theme eines Drittanbieters verwendest, sollte dieser eine Dokumentation dar\u00fcber haben, welche Art von Google Maps-Bereitstellung er verwendet. Keine Sorge, du kannst jederzeit mehrere Typen hinzuf\u00fcgen und diese sp\u00e4ter \u00e4ndern.<\/p>\n<h3>Schritt 5<\/h3>\n<p>Klicke auf &#8222;Aktivieren&#8220;.<\/p>\n<figure style=\"width: 1444px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-api-aktivieren.png\" alt=\"Google Maps Embed API aktivieren\" width=\"1444\" height=\"411\"><figcaption class=\"wp-caption-text\">Google Maps Embed API aktivieren<\/figcaption><\/figure>\n<h3>Schritt 6<\/h3>\n<p>Klicke auf \u201eAPIs\u201c und dann unter \u201eCredentials\u201c siehst du deinen API Schl\u00fcssel<\/p>\n<figure id=\"attachment_29083\" aria-describedby=\"caption-attachment-29083\" style=\"width: 2229px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29083\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/google-maps-api-key.png\" alt=\"Google Maps API Key\" width=\"2229\" height=\"690\" srcset=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/google-maps-api-key.png 2229w, https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/google-maps-api-key-300x93.png 300w, https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/google-maps-api-key-768x238.png 768w, https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/google-maps-api-key-1024x317.png 1024w\" sizes=\"auto, (max-width: 2229px) 100vw, 2229px\" \/><figcaption id=\"caption-attachment-29083\" class=\"wp-caption-text\">Google Maps API Key<\/figcaption><\/figure>\n<h3>Schritt 7<\/h3>\n<p>Wenn du einfach deinen Google Maps API-Schl\u00fcssel einbindest, wird er im Klartext in deinem Quellcode angezeigt. Daher solltest du dies einschr\u00e4nken, da sonst die Leute deinen API-Schl\u00fcssel auf ihrer WordPress-Seite oder ihren Projekten verwenden und deine Nutzung einschr\u00e4nken k\u00f6nnen.<\/p>\n<p>Klicke dazu einfach auf den Namen deines API-Schl\u00fcssels und er erm\u00f6glicht es dir, eine Einschr\u00e4nkung hinzuzuf\u00fcgen. F\u00fcr deine WordPress-Seite sollte das einfache Hinzuf\u00fcgen eines HTTP-Referencers gut genug sein. Wie z.B. <code>https:\/\/yourdomain.com\/*<\/code>. Dadurch ist es m\u00f6glich, nur Anrufe auf deiner Website zu t\u00e4tigen.<\/p>\n<figure style=\"width: 1438px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-api-einschrankungen.png\" alt=\"Google Maps API Einschr\u00e4nkungen\" width=\"1438\" height=\"1000\"><figcaption class=\"wp-caption-text\">Google Maps API Einschr\u00e4nkungen<\/figcaption><\/figure>\n<h2><a id=\"withoutplugin\"><\/a>Wie man Google Maps in WordPress ohne Plugin hinzuf\u00fcgt<\/h2>\n<p>Wenn du nur eine einfache Karte einbetten m\u00f6chtest und keine detaillierteren Funktionen wie benutzerdefinierte Standortmarkierungen oder andere Anmerkungen ben\u00f6tigst, kannst du Google Maps ohne Plugin \u00fcber die normale Google Maps-Website einbetten, die du t\u00e4glich nutzt.<\/p>\n<p>So funktioniert es&#8230;<\/p>\n<h3>Schritt 1: Kopiere den Google Maps Embed Code<\/h3>\n<p>Verwende zu Beginn die Google Maps-Website, um die Karte zu erstellen, die du einbetten m\u00f6chtest.<\/p>\n<p>Wenn du beispielsweise eine Platzhalter einbetten m\u00f6chtest, \u00f6ffne diese Stelle in Google Maps. Oder, wenn du eine Wegbeschreibung einbetten m\u00f6chtest, \u00f6ffne die Wegbeschreibung in Google Maps.<\/p>\n<p>Sobald du die Karte hast, die du einbetten m\u00f6chtest, klicke auf das Hamburger-Men\u00fc in der linken oberen Ecke:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wordpress-google-maps.png\" alt=\"Wie man an den Access Code rankommt\" width=\"1050\" height=\"654\"><figcaption class=\"wp-caption-text\">Wie man an den Access Code rankommt<\/figcaption><\/figure>\n<p>In der Liste der Men\u00fcpunkte, w\u00e4hle die Option <strong>Teilen oder Einbetten<\/strong><\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/embed-option-offnen.png\" alt=\"Die Embed Option \u00f6ffnen\" width=\"1050\" height=\"768\"><figcaption class=\"wp-caption-text\">Die Embed Option \u00f6ffnen<\/figcaption><\/figure>\n<p>Dadurch wird ein Popup-Fenster f\u00fcr <strong>die Freigabe<\/strong> ge\u00f6ffnet. Klicke in diesem Popup auf die Registerkarte <strong>Eine Karte einbetten<\/strong>.<\/p>\n<p>Anschlie\u00dfend kannst du \u00fcber die Dropdown-Liste die gew\u00fcnschte Gr\u00f6\u00dfe ausw\u00e4hlen. F\u00fcr die meisten WordPress-Seiten funktioniert die Standardgr\u00f6\u00dfe gut, aber du kannst die Karte bei Bedarf gr\u00f6\u00dfer oder kleiner machen.<\/p>\n<p>Nachdem du das getan hast, klicke auf die Schaltfl\u00e4che <strong>HTML kopieren<\/strong>, um den Einbettungscode zu kopieren:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-embed-code.png\" alt=\"Der Google Maps Embed Code\" width=\"1050\" height=\"762\"><figcaption class=\"wp-caption-text\">Der Google Maps Embed Code<\/figcaption><\/figure>\n<p>Du musst dann deinen API-Schl\u00fcssel in den Code einf\u00fcgen. Dein Code sollte also in etwa so aussehen:<\/p>\n<pre>YOUR_API_KEY&parameters allowfullscreen&gt;<\/pre>\n<h3><a id=\"addcode\"><\/a>Schritt 2: Hinzuf\u00fcgen des Google Maps Einbettungscodes zur WordPress-Seite<\/h3>\n<p>Nun musst du nur noch diesen Einbettungscode zu deiner WordPress-Seite in den Beitrag oder die Seite einf\u00fcgen, auf der du deine Karte einf\u00fcgen m\u00f6chtest.<\/p>\n<p>Wenn du den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">neuen WordPress Gutenberg Blockeditor<\/a> verwendest, der mit WordPress 5.0 ver\u00f6ffentlicht wurde, kannst du das tun, indem du einen <strong>benutzerdefinierten HTML-Block<\/strong> hinzuf\u00fcgst und den Einbettungscode in den Block einf\u00fcgt. <strong>Vergiss nicht, deinen API-Schl\u00fcssel hinzuzuf\u00fcgen.<\/strong><\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/embed-code-im-blockeditor-hinzufugen.png\" alt=\"Wie man den Embed Code im WordPress Blockeditor hinzuf\u00fcgt\" width=\"1050\" height=\"562\"><figcaption class=\"wp-caption-text\">Wie man den Embed Code im WordPress Blockeditor hinzuf\u00fcgt<\/figcaption><\/figure>\n<p>Du kannst dir eine Vorschau ansehen, wie deine Karte aussehen wird, indem du auf die Schaltfl\u00e4che <strong>Vorschau<\/strong> \u00fcber dem Block klickst.<\/p>\n<p>Wenn du immer noch den <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor-deaktivieren\/\">klassischen TinyMCE-Editor verwendest<\/a>, kannst du den Google Maps-Einbettungscode hinzuf\u00fcgen, indem du die Registerkarte <strong>Text<\/strong> \u00f6ffnest und den Code dort einf\u00fcgt:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/embed-kode-im-klassichen-editor-hinzufugt.png\" alt=\"Wie man den Embed Code in WordPress mit dem klassischen Editor hinzuf\u00fcgt\" width=\"1050\" height=\"577\"><figcaption class=\"wp-caption-text\">Wie man den Embed Code in WordPress mit dem klassischen Editor hinzuf\u00fcgt<\/figcaption><\/figure>\n<p>Sobald du den Code hinzugef\u00fcgt hast, kannst du zur\u00fcck zur Registerkarte <strong>Visual<\/strong> gehen, um eine Live-Vorschau deiner Karte zu sehen.<\/p>\n<p>Und das ist es! Du hast gerade gelernt, wie man Google Maps in WordPress ohne Plugin hinzuf\u00fcgt.<\/p>\n<h2>Verwende Google My Maps, um kompliziertere Karten ohne ein Plugin einzubetten.<\/h2>\n<p>Wenn du kreativer werden m\u00f6chtest, 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.<\/p>\n<p>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<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wordpress-my-google-maps-beispeil.png\" alt=\"Google My Maps Beispiel\" width=\"1050\" height=\"686\"><figcaption class=\"wp-caption-text\">Google My Maps Beispiel<\/figcaption><\/figure>\n<p>So kann man benutzerdefinierte Google Maps Karten zu WordPress hinzuf\u00fcgen<\/p>\n<h3>Schritt 1: Erstelle deine Karte in Google My Maps<\/h3>\n<p>Um loszulegen <a href=\"https:\/\/www.google.com\/maps\/about\/mymaps\/\" target=\"_blank\" rel=\"noopener noreferrer\">gehe zu Google My Maps<\/a> und erstelle eine neue Karten. Von da aus kannst du das Map Builder Interface nutzen.<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-my-maps-interface.png\" alt=\"Das Google My Maps Interface\" width=\"1050\" height=\"571\"><figcaption class=\"wp-caption-text\">Das Google My Maps Interface<\/figcaption><\/figure>\n<p>Obwohl wir es nicht allzu ausf\u00fchrlich behandeln werden, kannst du mit dieser Oberfl\u00e4che einige ziemlich kreative Karten erstellen. F\u00fcr einen genaueren Blick deckt <a href=\"https:\/\/www.google.com\/earth\/outreach\/learn\/visualize-your-data-on-a-custom-map-using-google-my-maps\/\">dieser Hilfeartikel von Google<\/a> einen Gro\u00dfteil der wichtigen Funktionen ab.<\/p>\n<h3>Schritt 2: Einbettungscode generieren<\/h3>\n<p>Sobald du mit dem Erstellen deiner Map fertig bist, musst du den Embed-Code generieren.<\/p>\n<p>Bevor du diesen Code jedoch erhalten kannst, musst du zuerst deine Karte ver\u00f6ffentlichen. Klicke dazu auf die Schaltfl\u00e4che <strong>Teilen<\/strong>. Klicke dann im Popup auf <strong>\u00c4ndern<\/strong>..<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-my-maps-teilen-einstellungen.png\" alt=\"Google My Maps Teilen Einstellungen\" width=\"1050\" height=\"352\"><figcaption class=\"wp-caption-text\">Google My Maps Teilen Einstellungen<\/figcaption><\/figure>\n<p>W\u00e4hle dann <strong>On \u2013 Public in the web <\/strong>aus und klicke auf <strong>Save<\/strong><\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/linksharing-aktivieren.png\" alt=\"Linksharing aktivieren\" width=\"1050\" height=\"667\"><figcaption class=\"wp-caption-text\">Linksharing aktivieren<\/figcaption><\/figure>\n<p>Klicken Sie anschlie\u00dfend auf das Dropdown-Men\u00fc neben dem Titel deiner Karte und w\u00e4hle <strong>Embed on my site<\/strong>, um den eigentlichen Embed-Code zu generieren:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/erhalte-den-my-maps-embed-code.png\" alt=\"Erhalte den My Maps Embed Code\" width=\"1050\" height=\"469\"><figcaption class=\"wp-caption-text\">Erhalte den My Maps Embed Code<\/figcaption><\/figure>\n<p>Es \u00f6ffnet sich ein Popup mit dem Code, den du kopieren musst. <strong>Vergiss nicht, deinen API-Schl\u00fcssel hinzuzuf\u00fcgen.<\/strong><\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/my-maps-embed-dode.png\" alt=\"Der My Maps Embed Code\" width=\"1050\" height=\"586\"><figcaption class=\"wp-caption-text\">Der My Maps Embed Code<\/figcaption><\/figure>\n<h3>Schritt 3: Einbettungscode zur WordPress-Seite hinzuf\u00fcgen<\/h3>\n<p>Jetzt kannst du diesen Einbettungscode zu deiner WordPress-Seite hinzuf\u00fcgen, genau wie du den Einbettungscode, den du von der normalen Google Maps-Seite bekommst.<\/p>\n<p>Wenn du dir nicht sicher bist, wie du das machen sollst, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#addcode\" target=\"_blank\" rel=\"noopener noreferrer\">klicke hier, um von oben zu diesem Abschnitt des Tutorials zu gelangen.<\/a><\/p>\n<h2><a id=\"plugins\"><\/a>Verwende stattdessen ein WordPress Google Maps Plugin.<\/h2>\n<p>Neben den oben genannten manuellen Methoden gibt es auch Tonnen von WordPress Google Maps Plugins, die dir helfen k\u00f6nnen, Karten auf deiner Website einzubetten.<\/p>\n<p>Es gibt ein paar Gr\u00fcnde, warum du eines dieser Plugins \u00fcber die manuellen Methoden stellen solltest:<\/p>\n<ul>\n<li>Mit ihnen kannst du kompliziertere Karten mit einer einfachen Benutzeroberfl\u00e4che erstellen.<\/li>\n<li>Du kannst alles tun, ohne dein WordPress-Dashboard verlassen zu m\u00fcssen.<\/li>\n<li>Einige von ihnen verlinken auf WordPress. Beispielsweise kannst du Kartenmarker mit WordPress-Posts verkn\u00fcpfen.<\/li>\n<li>Einige von ihnen k\u00f6nnen dir helfen, Google Maps hinsichtlich der Leistung zu optimieren (<em>mehr dazu sp\u00e4ter<\/em>).<\/li>\n<\/ul>\n<p>F\u00fcr alle diese Plugins musst du deinen eigenen Google Maps API-Schl\u00fcssel generieren, bevor du mit dem Einbetten von Karten beginnen kannst. <a href=\"https:\/\/supsystic.com\/documentation\/create-google-maps-api-key\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dieses Tutorial<\/a> zeigt dir, wie du das machst.<\/p>\n<h3>Google Maps Widget<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/google-maps-widget\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Widget<\/a> ist ein einfaches Google Maps-Plugin, mit dem du eine Karte \u00fcber 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\u00e4chsten Abschnitt mehr dar\u00fcber erz\u00e4hlen).<\/p>\n<p>Es ist eine gute Option, wenn du etwas Einfaches und Leichtes willst. Sobald du es aktiviert hast, musst du deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#google-maps-api\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps API-Schl\u00fcssel<\/a> nehmen und ihn in die Einstellungen des Plugins einf\u00fcgen. Du kannst eine Google Map zu jedem Widget-Bereich auf deiner Website hinzuf\u00fcgen. Anschlie\u00dfend k\u00f6nnen Besucher eine gr\u00f6\u00dfere interaktive Version der Karte in einer Lightbox \u00f6ffnen:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/das-google-maps-widget-interface.png\" alt=\"Das Google Maps Widget Interface\" width=\"1050\" height=\"763\"><figcaption class=\"wp-caption-text\">Das Google Maps Widget Interface<\/figcaption><\/figure>\n<p>Auf Wunsch kannst du auch sofort eine interaktive Karte verwenden, und mit der Pro-Version kannst du Karten \u00fcberall auf deiner Website mit einem Shortcode einbetten.<\/p>\n<h3>Google Maps Easy<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/google-maps-easy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Easy<\/a> hilft dir, benutzerdefinierte Karten mit deinen eigenen Markern und Anmerkungen zu erstellen.<\/p>\n<p>Wenn du Marker hinzuf\u00fcgst, hast du die M\u00f6glichkeit, 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\u00e4sst oder nicht:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-easy-interface.png\" alt=\"Google Maps Easy Interface\" width=\"1050\" height=\"656\"><figcaption class=\"wp-caption-text\">Google Maps Easy Interface<\/figcaption><\/figure>\n<p>Sobald du deine Map erstellt hast, kannst du sie entweder mit einem Shortcode oder einer PHP-Funktion einbetten.<\/p>\n<h3>Intergeo<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/intergeo-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Intergeo<\/a> ist eine weitere beliebte Option, mit der du deine eigenen Karten mit benutzerdefinierten Markern erstellen kannst und die Kontrolle \u00fcber die Kartenfunktionen hast.<\/p>\n<p>Sobald du das Plugin installiert und aktiviert hast, kannst du deine Karten direkt aus deinem WordPress Dashboard erstellen:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/intergeo-interface.png\" alt=\"Intergeo Interface\" width=\"1050\" height=\"587\"><figcaption class=\"wp-caption-text\">Intergeo Interface<\/figcaption><\/figure>\n<p>Dann kannst du sie \u00fcberall auf deiner Website mit einem Shortcode einbetten.<\/p>\n<h3>Gutenberg Block For Google Maps Embed<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/embed-gutenberg-block-google-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg Block For Google Maps Embed<\/a> ist ein einfaches Plugin, das dem neuen WordPress Gutenberg Blockeditor einen eigenen Google Maps Block hinzuf\u00fcgt.<\/p>\n<p>Mit diesem Block kannst du jede beliebige Adresse einbetten und auch w\u00e4hlen:<\/p>\n<ul>\n<li>Abmessungen<\/li>\n<li>Zoomstufe<\/li>\n<li>Interaktive Karte vs. statische Karte (<em>wiederum hilft die letztere Methode bei der Performance<\/em>)<\/li>\n<\/ul>\n<p>Du kannst keine eigenen benutzerdefinierten Karten erstellen &#8211; aber es ist eine praktische Option, wenn du den neuen Blockeditor verwendest und nur eine einfache M\u00f6glichkeit willst, einige einfache Karten einzubinden.<\/p>\n<h2><a id=\"performance\"><\/a>Google Maps kann deine WordPress-Seite verlangsamen &#8211; lass es nicht zu.<\/h2>\n<p>W\u00e4hrend Google Maps es dir erm\u00f6glicht, eine Menge cooler Funktionen in deine Website mit ihren interaktiven Karten einzubetten, gibt es einen Leistungsabzug, da es eine gro\u00dfe Anzahl von Skripten laden muss, um all diese interaktiven Funktionen zu nutzen.<\/p>\n<p>Lange Rede kurzer Sinn, die Einbettung von interaktiven Google Maps kann deine Website verlangsamen.<\/p>\n<p>Es gibt ein paar M\u00f6glichkeiten, wie du das bek\u00e4mpfen kannst.<\/p>\n<p>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 <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/\" target=\"_blank\" rel=\"noopener noreferrer\">zu beschleunigen:<\/a><\/p>\n<ul>\n<li>Mache einen Screenshot der Karte, die du auf deiner Website verwenden kannst.<\/li>\n<li>Verlinke diesen Screenshot mit der Karte auf der Google Maps-Website oder \u00f6ffne ein Popup-Fenster mit der interaktiven Karte, wenn ein Benutzer klickt.<\/li>\n<\/ul>\n<p>Auf diese Weise l\u00e4dt deine Website nur ein normales Bild &#8211; nicht alle Skripte, die mit Google Maps verkn\u00fcpft sind.<\/p>\n<p>Alternativ dazu kannst du auch das kostenlose <a href=\"https:\/\/wordpress.org\/plugins\/aweos-google-maps-iframe-load-per-click\/\" target=\"_blank\" rel=\"noopener noreferrer\">AWEOS Google Maps Iframe Load per Click Plugin<\/a> verwenden. Dieses Plugin ersetzt automatisch die Einbettung von Google Maps durch ein generisches Platzhalterbild. Wenn ein Benutzer dann auf die Schaltfl\u00e4che <strong>Load Map<\/strong> klickt, wird die vollst\u00e4ndige Google Maps-Einbettung geladen:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/google-maps-platzhalterbild.png\" alt=\"Google Maps Platzhalterbild\" width=\"1050\" height=\"775\"><figcaption class=\"wp-caption-text\">Google Maps Platzhalterbild<\/figcaption><\/figure>\n<p>Du kannst auch die Google Maps Static API verwenden, die ein normales Bild ohne JavaScript zur\u00fcckgibt. Einige Google Maps-Plugins &#8211; darunter <a href=\"https:\/\/wordpress.org\/plugins\/google-maps-widget\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps Widget<\/a> und <a href=\"https:\/\/wordpress.org\/plugins\/embed-gutenberg-block-google-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg Block For Google Maps Embed<\/a> &#8211; erm\u00f6glichen es dir, die Static API zu verwenden, wenn du deine Karten erstellst.<\/p>\n<p>Wir stellen jedoch fest, dass dieser statische Ansatz manchmal einfach nicht ausreicht, und viele Leute wollen die interaktive Google Maps-Erfahrung sofort einbinden.<\/p>\n<p>Wenn das der Fall ist, ist eine weitere gute M\u00f6glichkeit, Google Maps zu beschleunigen, die Verwendung von <strong>Lazy Loading<\/strong>. Mit dem verz\u00f6gerten 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.<\/p>\n<p>Wir haben bereits dar\u00fcber geschrieben, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">wie man Bilder und Videos lazy l\u00e4dt<\/a>, und es ist die gleiche Idee f\u00fcr Google Maps.<\/p>\n<p>Es gibt ein paar Plugins, mit denen du das machen kannst. Zum Beispiel l\u00e4sst sich mit dem <a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plugin a3 Lazy Load<\/a> <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-iframe\/\" target=\"_blank\" rel=\"noopener noreferrer\">Iframe Embeds<\/a>, zu denen auch Google Maps geh\u00f6rt, lazy load einbetten:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/lazy-load-google-maps.png\" alt=\"Lazy Load Google Maps\" width=\"1050\" height=\"649\"><figcaption class=\"wp-caption-text\">Lazy Load Google Maps<\/figcaption><\/figure>\n<p>Andere Optionen w\u00e4ren:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/bj-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">BJ Lazy Load<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load by WP Rocket<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/easy-lazy-loader\/\" target=\"_blank\" rel=\"noopener noreferrer\">Easy Lazy Loader<\/a><\/li>\n<\/ul>\n<h2>Zusammenfassung<\/h2>\n<p>Wenn du nur eine einfache Karte auf deiner Website einbetten m\u00f6chtest, kannst du Google Maps ohne Plugin mit der integrierten Einbettungsfunktion zu WordPress hinzuf\u00fcgen. Oder du kannst das Google My Maps-Tool verwenden, um deine eigene benutzerdefinierte Karte zu erstellen und diese einzubetten.<\/p>\n<p>Neben diesen manuellen Methoden gibt es auch viele Google Maps WordPress Plugins, die dir viel Kontrolle geben k\u00f6nnen, ohne dass du dein WordPress Dashboard verlassen musst.<\/p>\n<p>Unabh\u00e4ngig davon, welche Methode du w\u00e4hlst, 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 \u00fcberlege dir Taktiken wie Platzhalterbilder oder Lazy Loading, <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/\" target=\"_blank\" rel=\"noopener noreferrer\">um die negativen Auswirkungen auf die Leistung zu verringern<\/a>.<\/p>\n<p>Hast du noch weitere Fragen zur Nutzung von Google Maps auf WordPress? Lasst es uns in den Kommentaren wissen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Du suchst nach einer M\u00f6glichkeit, WordPress Google Maps Inhalte auf Deiner Website einzubetten? Wie viele Dinge in WordPress gibt es mehrere verschiedene M\u00f6glichkeiten, wie du Google &#8230;<\/p>\n","protected":false},"author":38,"featured_media":29081,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[213,29],"topic":[1006],"class_list":["post-29057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-googlemaps","tag-wordpress","topic-wordpress-plugins"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin<\/title>\n<meta name=\"description\" content=\"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin\" \/>\n<meta property=\"og:description\" content=\"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-31T08:49:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-05T12:38:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin\",\"datePublished\":\"2019-10-31T08:49:39+00:00\",\"dateModified\":\"2023-09-05T12:38:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\"},\"wordCount\":2676,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\",\"keywords\":[\"googlemaps\",\"WordPress\"],\"articleSection\":[\"Die besten WordPress Tutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\",\"name\":\"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\",\"datePublished\":\"2019-10-31T08:49:39+00:00\",\"dateModified\":\"2023-09-05T12:38:43+00:00\",\"description\":\"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png\",\"width\":1460,\"height\":730,\"caption\":\"WordPress Google Maps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-Plugins\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin","description":"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/","og_locale":"de_DE","og_type":"article","og_title":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin","og_description":"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2019-10-31T08:49:39+00:00","article_modified_time":"2023-09-05T12:38:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","twitter_creator":"@brianleejackson","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Brian Jackson","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin","datePublished":"2019-10-31T08:49:39+00:00","dateModified":"2023-09-05T12:38:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/"},"wordCount":2676,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","keywords":["googlemaps","WordPress"],"articleSection":["Die besten WordPress Tutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/","name":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","datePublished":"2019-10-31T08:49:39+00:00","dateModified":"2023-09-05T12:38:43+00:00","description":"Schaue dir diese verschiedenen M\u00f6glichkeiten an, wie du WordPress Google Maps-Inhalte einbetten, die Google Maps-API verwenden und wie du verhindern kannst, dass sie deine Website verlangsamt.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/wordpress-google-maps.png","width":1460,"height":730,"caption":"WordPress Google Maps"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress-Plugins","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/"},{"@type":"ListItem","position":3,"name":"WordPress Google Maps Anleitung: Einbetten mit oder ohne Plugin"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/29057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=29057"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/29057\/revisions"}],"predecessor-version":[{"id":29332,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/29057\/revisions\/29332"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/pt"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/de"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/29057\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/29081"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=29057"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=29057"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=29057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}