• Eigenschaften
  • Schablonen
  • Preisgestaltung
  • German
  • Eigenschaften
  • Schablonen
  • Preisgestaltung
  • German
Ops! Ihr gesuchtes Widget wurde nicht gefunden! Haben Sie eine Idee? Wenn ja, einreichen hier

Die Einbettung von Google Maps auf Ihrer Webseite ist sehr nützlich für Online-Shops und Geschäfte. Zum einen hilft es den Leuten, Sie zu erreichen, zum anderen können Sie Ihren Shop weltweit bekannt machen. Heute werden wir darüber sprechen, wie Sie Google Maps in WordPress mit Elementor Page Builder einbetten können.

In erster Linie hat Elementor Google-Karte Widget, das Sie für diesen Zweck verwenden können. Allerdings hat es nur begrenzte Stiloptionen. Daher werden wir heute Folgendes verwenden Erweiterte Google Map Widget von Element Pack.

Wir brauchen uns nicht weiter vorzustellen. Fangen wir an!

Vollständige Anleitung zum Einbetten von Google Maps in WordPress

Wann immer Sie eine Google Map in WordPress verwenden möchten, müssen Sie eine API Schlüssel auf Ihrem Dashboard. Mit diesem Schlüssel müssen Sie sich als Benutzer bei Google authentifizieren. Schauen wir uns das in Bildern an.

Inserting Advanced Google Map Widget

Setzen Sie zunächst die Erweiterte Google Map Widget auf Ihrer Website.

Inserting Advanced Google Map Widget

Sobald Sie das Widget ziehen und ablegen, wird eine Popup-Meldung angezeigt. Damit die Karte richtig funktioniert, fordert das System einen API-Schlüssel von Ihnen an. Schauen wir uns an, wie man das macht.

API settings for Embed Google Map on WordPress

Zu WordPress gehen Dashboard> Element Pack> API-Einstellungen.

Hier sehen Sie ein Feld namens Google Map API-Schlüssel. Jetzt müssen Sie Ihren API-Schlüssel in das Feld eingeben und speichern. Sie können den Schlüssel für die Einbettung der Google Map in WordPress jedoch auch von hier.

Blog für Sie
Beliebteste Blogs

Erfahren Sie mehr über WordPress

Anpassen der Registerkarte "Inhalt" der Google-Karte

Lassen Sie uns nun das Aussehen der Karte nach Ihrem Geschmack verändern. In diesem Teil werden wir über die Einstellungen des Widgets sprechen.

Widget Settings of Embed Google Map on WordPress

Wie in der obigen Abbildung ist das erste, was Sie sehen werden, die Google-Karte Abschnitt. Dieser befindet sich unter dem Registerkarte "Inhalt. Er enthält die Grundeinstellungen der Karte. Die Schalter auf dem Bildschirm zeigen/verbergen hauptsächlich entsprechende Schaltflächen/Funktionen auf der Karte.

Daher können Sie die Zoomtaste, Suchfeld, Kartentyp Option, und Straßenansicht von hier aus steuern. Außerdem gibt es auch Kartenzoom, Kartenhöheund Suchfeld Abstände Optionen hier. Außerdem können Sie die Karte in Satellit Modus oder Straße Modus.

Widget Settings

Der nächste Abschnitt ist Markierung. Mit dem erweiterten Google Map-Widget können Sie eine unbegrenzte Anzahl von Markierungen setzen. Jeder Marker hat Felder wie Breitengrad, Längengrad, Titelund Inhalt. Bei den ersten beiden müssen Sie jedoch die Position der Markierung angeben.

Ein weiterer wichtiger Punkt ist, dass Sie eigene Symbole als Markierungen hinzufügen können. Diese Funktion finden Sie jedoch bei keinem anderen Mapping-Widget. Diese Funktion ist exklusiv für Element Pack-Benutzer.

Beliebter Blog

Verwendung des Iframe-Widgets in Elementor von Element Pack

Einzigartige Stile der eingebetteten Google-Karte in WordPress

Bis zu diesem Punkt haben wir nur das Layout eingerichtet. Jetzt werden wir das Aussehen der eingebetteten Google Map in WordPress ändern, indem wir Elmentor.

Customizing The Style Tab of the Google Map

Auch hier besteht die Registerkarte "Stil" aus zwei Abschnitten. Mit dem GMap-Stil können Sie eine beliebige Oberfläche in Ihre Karte einfügen. Diese Skins ändern die Details der gesamten Karte. Sie müssen also nur den JSON-Code in das markierte Feld einfügen. Sie können auch die CSS-Filter für mehr Stil.

Snazzy Maps Website

Darüber hinaus können Sie die JSON-Codes von Snazzymaps. Sie haben viele kostenlose und Premium-Karte Skins zur Verfügung zu einem günstigen Preis.

 

Customizing The Style Tab of the Google Map

Schließlich ist auch das Suchfeld oben auf der Karte bearbeitbar. Es ist sehr einfach, sein Aussehen zu ändern. Auch hier können Sie die Farbe, die Art des Rahmens und den Radius des Rahmens ändern und dem Suchfeld einen Schatten hinzufügen. Stellen Sie sicher, dass das fertige Produkt den Besuchern ins Auge sticht.

Schlussfolgerung

Examples of Advanced Google map

Gut gemacht! Sie haben erfolgreich den ganzen Prozess gelernt. Mit diesem Blog hoffe ich, dass Sie die Einbettung von Google Maps in WordPress mit Elementor leicht machen können. Für weitere Informationen, besuchen Sie bitte unsere Wissensbasis. Ohne weiteres, bleiben Sie sicher. Vielen Dank für das Lesen dieses Blogs!

Copyright © 2026 BdThemes. Alle Rechte vorbehalten.

Money Transfer Logo