Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man Google Maps in WordPress hinzufügt (der RICHTIGE Weg)

Für lokale Unternehmen ist die Anzeige ihrer Position auf einer interaktiven Karte nicht nur praktisch, sondern ein wichtiges Element ihrer digitalen Strategie.

Das Hinzufügen von Google Maps zu Ihrer Website kann die Benutzererfahrung erheblich verbessern, da Besucher Ihre Position leichter finden können. Außerdem kann es die Sichtbarkeit Ihrer Website in den Suchmaschinen erhöhen und mehr Besucher und potenzielle Kunden anziehen.

Wir haben die besten Möglichkeiten zur nahtlosen Integration von Google Maps in Ihre WordPress-Website recherchiert, um sowohl die Benutzerfreundlichkeit als auch die Suchmaschinenoptimierung zu verbessern.

In diesem Artikel zeigen wir Ihnen, wie Sie die Möglichkeiten von Google Maps in WordPress nutzen können.

Add Google Maps in WordPress

Warum Google Maps in WordPress hinzufügen?

Wussten Sie, dass Google Maps die beliebteste Navigations-App auf allen Plattformen ist?

Wenn Sie eine Büro- oder Ladenadresse haben, können Nutzer durch das Hinzufügen von Google Maps zu Ihrer WordPress-Website Ihre Geschäfte, Restaurants oder Einzelhandelsgeschäfte schnell finden. Dies hilft Ihnen, mehr Kunden anzuziehen und mehr Geschäft zu generieren.

Und nicht nur das: Die Einbettung von Google Maps kann auch Ihr WordPress-SEO verbessern. Laut Google sind 46 % aller Suchanfragen lokal. Das Hinzufügen von Google Maps zu WordPress kann Ihre lokale SEO steigern und Ihre Sichtbarkeit bei lokalen Suchen verbessern.

Es gibt zwei Möglichkeiten, Google Maps in WordPress einzubinden, und wir werden Ihnen beide zeigen.

Der Vorteil der zweiten Methode ist, dass sie alle Best Practices für lokale SEO befolgt. Wenn Sie diese Methode anwenden, wird Google Ihren Standort in Google Maps aufnehmen. Außerdem werden Ihre Geschäftsinformationen wie Name, Logo, Adresse, Telefon und Öffnungszeiten in den lokalen Suchergebnissen angezeigt.

Sehen wir uns also an, wie Sie Google Maps zu WordPress hinzufügen können. Nachfolgend finden Sie die Kurzlinks, mit denen Sie zu dem von Ihnen bevorzugten Abschnitt gelangen können:

Wie man Google Maps in WordPress ohne Plugin hinzufügt

Wenn Sie Google Maps nur schnell in einen WordPress-Beitrag oder eine Seite einbetten möchten, können Sie die standardmäßige iFrame-Methode verwenden.

Rufen Sie einfach die Website von Google Maps auf und geben Sie eine beliebige Adresse in das Suchfeld ein.

Find location in Google Maps and Click Share to Embed

Als Nächstes müssen Sie auf das Symbol Freigeben klicken, woraufhin ein Popup-Fenster erscheint, in dem Sie die Möglichkeit haben, entweder einen Standortlink zu senden oder eine Karte einzubetten.

Sie müssen die Option „Karte einbetten“ wählen.

Copy Google Maps HTML Embed Code

Kopieren Sie dann einfach den HTML-Code für Google Maps und öffnen Sie die Seite, in die Sie die Karte einbetten möchten.

Im Block-Editor müssen Sie einen benutzerdefinierten HTML-Block hinzufügen.

Select Custom HTML block in WordPress

Jetzt können Sie einfach den Einbettungscode einfügen, den Sie aus Google Maps kopiert haben.

Danach müssen Sie die Seite aktualisieren oder veröffentlichen, um eine Vorschau der Änderungen zu erhalten.

Google Maps iFrame Embed Code in Block Editor

Diese Methode eignet sich zum schnellen Einbetten von Google Maps, bietet aber keine maximalen SEO-Vorteile.

Wenn Sie ein kleines Unternehmen, ein Restaurant oder ein Online-Shop mit einem oder mehreren Standorten sind, dann empfehlen wir Ihnen die folgende Lösung, um Ihre lokalen SEO-Rankings zu maximieren, da sie die richtigen Open-Graph-Daten verwendet, um Ihnen zu helfen, in Google höher zu ranken.

Wie man Google Maps mit einem lokalen SEO-Plugin zu WordPress hinzufügt

Die beste Möglichkeit, Google Maps hinzuzufügen und Ihre Website für lokale SEO zu optimieren, ist die Verwendung von All in One SEO (AIOSEO).

Es ist das beste SEO-Plugin für WordPress, weil es Ihnen hilft, höhere SEO-Rankings zu erzielen, ohne den Code zu bearbeiten oder einen Entwickler einzustellen. Mehr als 3 Millionen Profis nutzen AIOSEO, um ihre Suchmaschinen-Rankings zu verbessern.

AIOSEO

Für dieses Tutorial werden wir die AIOSEO Pro Version verwenden, da sie die Local SEO Funktion und andere leistungsstarke Optimierungsoptionen enthält. Es gibt auch eine kostenlose Version von AIOSEO, die Sie verwenden können, um mit der Optimierung Ihrer Website für Suchmaschinen zu beginnen.

Zunächst müssen Sie das AIOSEO-Plugin in WordPress installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung startet das Plugin den Einrichtungsassistenten. Sie können auf die Schaltfläche „Let’s Get Started“ klicken, um das Plugin zu konfigurieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur richtigen Einrichtung von All in One SEO in WordPress.

AIOSEO setup wizard

Als Nächstes können Sie von Ihrem WordPress-Dashboard aus zu All in One SEO “ Local SEO übergehen.

Klicken Sie dann auf die Schaltfläche „Lokale SEO aktivieren“, um mit der Konfiguration der lokalen Einstellungen zu beginnen.

Activate local SEO

Sobald das Local SEO Addon für WordPress aktiviert ist, können Sie einen einzelnen Standort oder mehrere Standorte in AIOSEO hinzufügen und auf Google Maps anzeigen. Wir zeigen Ihnen, wie Sie beides zu Ihrer Website hinzufügen können.

Hinzufügen eines einzelnen Standorts

Um Ihre Standorte, Geschäftsinformationen, Öffnungszeiten und mehr hinzuzufügen, müssen Sie zunächst zu All in One SEO “ Local SEO gehen und die Registerkarte „Standorte“ öffnen.

Wenn Sie nur einen Standort haben, lassen Sie die Option „Mehrere Standorte“ auf „Nein“ eingestellt.

Location tab under local SEO

Blättern Sie anschließend zum Abschnitt „Karten“, um Ihren genauen Standort zu markieren.

Geben Sie einfach Ihre Adresse in das Feld „Anfrage eingeben“ ein, und Google Maps zeigt Ihren Standort an.

Pin your store location

Sobald Sie Ihren Standort eingegeben haben, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken.

Hinzufügen mehrerer Standorte

Wenn Sie mehr als einen Standort haben, müssen Sie die Einstellung „Mehrere Standorte“ auf der Registerkarte „Standort“ in Local SEO aktivieren.

Enable multiple locations

Danach erscheint ein neues Menü Standorte in Ihrem WordPress-Administrationsbereich.

Navigieren Sie zu Standorte und klicken Sie dann auf die Schaltfläche „Neu hinzufügen“.

Add a new location

Sobald Sie sich im WordPress-Editor befinden, scrollen Sie nach unten zum Abschnitt „Karte“.

Hier können Sie Ihre Adresse in das Feld „Anfrage eingeben“ eingeben.

Add multiple map locations

Nachdem Sie Ihren Standort auf der Karte eingetragen und die Standortinformationen hinzugefügt haben, klicken Sie auf die Schaltfläche „Veröffentlichen“.

Sie können diesen Schritt nun wiederholen und so viele Standorte für Ihr Unternehmen hinzufügen, wie Sie möchten.

Sobald Sie das Hinzufügen Ihrer Standorte abgeschlossen haben, können Sie auf die Registerkarte „Karten“ im Menü All in One SEO “ Lokale SEO zurückgehen.

Hier müssen Sie einen Google Maps API-Schlüssel eingeben.

Enter Google maps API key

Sehen wir uns nun an, wie man einen API-Schlüssel für Google Maps erstellt.

Erstellen eines Google Maps API-Schlüssels

Um zu beginnen, müssen Sie die Google Maps Platform-Website besuchen und auf die Schaltfläche „Erste Schritte“ klicken.

Google maps platform

Nachdem Sie sich mit Ihrem Google-Konto angemeldet haben, müssen Sie ein Abrechnungskonto einrichten.

Google Maps Platform hat ein Pay-as-you-go-Preismodell und bietet die ersten 300 $ monatlicher Nutzung für alle Nutzer kostenlos an. Für die meisten Websites reicht das locker für eine einfache Karteneinbettung wie die, die wir in diesem Tutorial erstellen.

Keine Sorge, es werden Ihnen keine Gebühren berechnet, es sei denn, Sie führen ein manuelles Upgrade auf ein kostenpflichtiges Konto durch.

Um loszulegen, klicken Sie auf die Schaltfläche „Abrechnungskonto erstellen“.

Create a billing account

Als Nächstes können Sie Ihr Land auswählen und aus dem Dropdown-Menü auswählen, was Ihre Organisation am besten beschreibt.

Sobald Sie diese Informationen ausgewählt haben, klicken Sie auf das Kontrollkästchen für die Nutzungsbedingungen und dann auf die Schaltfläche „Weiter“.

Enter personal details for billing account

Auf dem nächsten Bildschirm müssen Sie Ihre Telefonnummer zur Verifizierung eingeben.

Klicken Sie anschließend auf die Schaltfläche „Code senden“.

Enter mobile number

Nachdem Sie den Code überprüft haben, müssen Sie als Nächstes den Namen Ihres Unternehmens, die Details zur Zahlungsmethode und die Rechnungsadresse eingeben.

Sobald Sie diese Daten eingegeben haben, klicken Sie auf die Schaltfläche „Kostenlose Testversion starten“.

Enter business name and payment details

Als Nächstes wird Ihnen eine Reihe von 4 Fragen zu Ihrem Unternehmen und zur Verwendung der Google Maps-Plattform gestellt.

Google Maps fragt Sie nach Ihrem Hauptziel für die Nutzung der Plattform, nach der Branche, in der Sie tätig sind, nach einem Anwendungsfall und nach der Größe Ihres Unternehmens.

Nachdem Sie diese Fragen beantwortet haben, klicken Sie bitte auf die Schaltfläche „Absenden“.

Answer few questions for google maps

Sie sehen nun ein Popup mit Ihrem Google Maps API-Schlüssel.

Sie können diesen Schlüssel kopieren und zur späteren Verwendung in einer Textdatei speichern.

Copy the API key

Nachdem Sie nun einen Google Maps API-Schlüssel erstellt haben, müssen Sie zurück zu Ihrem WordPress-Dashboard gehen, um ihn in den AIOSEO Local SEO-Einstellungen einzugeben.

Konfigurieren der Google Maps-Einstellungen in WordPress

Sie können nun von Ihrem WordPress-Dashboard aus zu All in One SEO “ Local SEO zurückkehren und dann zur Registerkarte „Maps“ navigieren.

Geben Sie den Google Maps API-Schlüssel in das Feld „API-Schlüssel“ ein. Sie sehen eine Vorschau der Karte in AIOSEO, sobald Sie den Schlüssel hinzugefügt haben.

Add API key and see map preview

Dann können Sie nach unten blättern, um die Karteneinstellungen zu bearbeiten.

Mit AIOSEO können Sie Google Maps mit einem Gutenberg-Block, Shortcode, Widget oder PHP-Code anzeigen. Außerdem können Sie verschiedene Kartenstile auswählen und eine benutzerdefinierte Markierung zu Ihrer Karte hinzufügen.

Edit map settings

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, wenn Sie fertig sind.

Anzeige von Google Maps in WordPress

Als Nächstes können Sie Google Maps zu jedem WordPress-Post oder jeder Seite hinzufügen. Bearbeiten Sie dazu einfach eine neue Seite auf Ihrer Website oder fügen Sie eine neue Seite hinzu.

Sobald Sie sich im Block-Editor befinden, klicken Sie oben auf den ‚+‘-Button und fügen den AIOSEO Local – Map Block an beliebiger Stelle auf der Seite ein.

Add local maps block

Danach wird Ihre Google Map der Seite hinzugefügt.

In AIOSEO können Sie auch die Karteneinstellungen über die Optionen auf der rechten Seite bearbeiten. Sie können zum Beispiel Beschriftungen und Symbole anzeigen, eine benutzerdefinierte Markierung hinzufügen und die Breite und Höhe der Karte bearbeiten.

Edit your map in WordPress

Wenn Sie mehrere Standorte haben, können Sie auswählen, welcher Standort hervorgehoben werden soll, indem Sie aus den Optionen im Menü auf der rechten Seite wählen.

Klicken Sie einfach auf das Dropdown-Menü „Standort“ und wählen Sie Ihren bevorzugten Standort für die Anzeige auf Ihrer Website aus.

Choose which location to display

Wenn Sie mit Ihren Einstellungen zufrieden sind, können Sie die Seite veröffentlichen.

Jetzt können Sie Ihre Website besuchen, um Google Maps in Aktion zu sehen.

Preview your map

Sie können Google Maps auch in den Widget-Bereich Ihrer Website einfügen, beispielsweise in die Seitenleiste oder die Fußzeile.

Gehen Sie zunächst in Ihrem WordPress-Administrationspanel zu Appearance “ Widgets. Klicken Sie dann auf die Schaltfläche „+“ und fügen Sie den Widget-Block „AIOSEO Local – Map“ an der Stelle hinzu, an der Sie Ihren Standort anzeigen möchten.

Add maps widget

Danach können Sie die Einstellungen des Widgets bearbeiten.

So können Sie beispielsweise einen Titel hinzufügen, die Breite und Höhe der Karte ändern, den anzuzeigenden Standort auswählen, wenn Sie mehrere Standorte haben, und die Beschriftung bearbeiten.

Edit map widget settings

Das war’s!

Wenn Sie Ihre Website aktualisieren, sehen Sie jetzt Google Maps in Ihrem Widgets-Bereich.

Maps preview in widget area

Expertenanleitungen zur Verwendung von Karten in WordPress

Da Sie nun wissen, wie Sie Google Maps zu Ihrer Website hinzufügen können, möchten Sie vielleicht einige andere Anleitungen zu Karten und Standorten in WordPress sehen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Google Maps zu Ihrer WordPress-Website hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Auswahl der besten WordPress-Plugins für kleine Unternehmen und erfahren Sie , wie Sie einen Google Maps-Lokalisator in WordPress hinzufügen können.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

34 KommentareEine Antwort hinterlassen

  1. Moinuddin Waheed

    This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
    Both the methods without plugin and with AIOSEO are good and serves my need.
    But I would go with AIOSEO to implement this feature as it will also help in local seo.
    Thanks for this helpful guide for embedding Google map.

  2. melanie bund

    Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
    Thank you in advance
    Melanie

  3. Donata

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

  4. Sharon

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    • Mark

      Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      • WPBeginner Support

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        Admin

        • Kamil

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.

        • WPBeginner Support

          While we have not tested it yet, we will be sure to take a look at it.

  5. Blessy

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

  6. Miranda Olding

    Thanks – so clear x

  7. Sara C

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

  8. Denny Png

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

  9. Kathy

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

  10. Andy Kramer

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

    • Karen

      I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?

  11. Mari

    Hi!
    I can’t find the code.. There’s no „flower icon“ nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

  12. Andy Meuleman

    A great lesson, easy to follow and implement.

    Much thanks, Andy

  13. Karthik

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

    • Parmod

      Can you be more specific about what exactly do you need

  14. Bigg Tobias Inspired

    So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?

  15. Carla Spacher

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on „Share and embed map“. Then click on „Embed map“ and enter into your WP page/or post.

  16. WRC

    Thank you. Very helpful post.

  17. Rory

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

  18. aamir

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

  19. Trang Tran

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

  20. Guilherme

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

  21. Christopher Rose

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

  22. Widdershins

    That is so cool! … thanks :D

    • zakaria

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.