Möchten Sie Google Maps auf Ihrer WordPress-Website anzeigen?
Wenn Sie ein lokales Unternehmen betreiben, kann die Anzeige von Google Maps auf Ihrer Website den Nutzern helfen, Ihren Standort leicht zu finden. Außerdem können Sie so die Sichtbarkeit Ihrer Website in den Suchmaschinen verbessern und mehr Besucher anziehen.
In diesem Artikel zeigen wir Ihnen, wie Sie Google Maps in WordPress hinzufügen können.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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“.
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.
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.
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.
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“.
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“.
Auf dem nächsten Bildschirm müssen Sie Ihre Telefonnummer zur Verifizierung eingeben.
Klicken Sie anschließend auf die Schaltfläche „Code senden“.
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“.
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“.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Das war’s!
Wenn Sie Ihre Website aktualisieren, sehen Sie jetzt Google Maps in Ihrem Widgets-Bereich.
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.
- Wie man Bing Maps in WordPress einbettet (Schritt für Schritt)
- Wie man eine interaktive Karte in WordPress hinzufügt
- Einbetten einer Google-Karte in Kontaktformulare (mit Kartenpin)
- Die besten Google Maps Plugins für WordPress (die meisten sind kostenlos)
- Wie man Google Maps Store Locator in WordPress hinzufügt
- Hinzufügen mehrerer Standorte Schema für lokale Unternehmen in WordPress
- Autovervollständigung für Adressfelder in WordPress hinzufügen
- Beste WordPress Geolocation und GeoIP Plugins
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Moinuddin Waheed says
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.
melanie bund says
Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
Thank you in advance
Melanie
WPBeginner Support says
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Donata says
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?
WPBeginner Support says
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Admin
Sharon says
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 says
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 says
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 says
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 says
While we have not tested it yet, we will be sure to take a look at it.
Blessy says
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?
Miranda Olding says
Thanks – so clear x
Sara C says
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
Denny Png says
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
Kathy says
Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!
divi says
Great Work Bro!!!!
Andy Kramer says
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 says
I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?
Mari says
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.
Andy Meuleman says
A great lesson, easy to follow and implement.
Much thanks, Andy
Karthik says
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 says
Can you be more specific about what exactly do you need
Bigg Tobias Inspired says
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?
Carla Spacher says
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.
WRC says
Thank you. Very helpful post.
Rory says
Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
Thanks for your help.
aamir says
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
Trang Tran says
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?
Guilherme says
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
Bongo says
Powerful stuff man. Thanks
Erwin says
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
Christopher Rose says
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.
Widdershins says
That is so cool! … thanks
zakaria says
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