So erstellen Sie eine Google -Karte mit mehreren Stiften in WordPress

Veröffentlicht: 2025-07-23

Das Hinzufügen einer Karte zu Ihrer Website kann Ihren Besuchern helfen, Ihre Unternehmens- oder Veranstaltungsorte problemlos zu finden. Wenn Ihr Unternehmen mehr als einen Ort hat, möchten Sie möglicherweise alle auf derselben Karte anzeigen. Hier kann die Verwendung mehrerer Pins auf einer Google -Karte hilfreich werden.

Wenn Ihre Website mit Elementor erstellt ist, müssen Sie auf Ihrer Google -Karte nicht viel problematisch beim Hinzufügen mehrerer Stifte aufnehmen. Stattdessen können Sie leicht so viele hinzufügen, wie Sie möchten. Der Prozess ist selbst für Anfänger recht einfach.

In diesem Beitrag werden wir ein detailliertes Tutorial darüber abdecken, wie eine Google -Karte mit mehreren Stiften in WordPress mit Elementor erstellt wird. Vorher werden wir jedoch ein paar Wörter darüber abdecken, warum und wann Sie Google Maps mit mehreren Pins auf Ihren WordPress -Websites verwenden sollten.

Warum sollten Sie Google Maps mit mehreren Pins auf Ihrer WordPress -Site verwenden?

Why Use Google Maps with Multiple Pins on Your WordPress Site

Die Verwendung von Google Maps mit mehreren Stiften kann Ihre Website in vielerlei Hinsicht verbessern. Es geht nicht nur darum, Orte zu zeigen. Es kann Benutzern helfen, Vertrauen aufzubauen und Ihre Website nützlicher zu machen, da sie Ihre Geschäfte leicht finden können. Hier sind einige wichtigste Gründe, warum Sie es in Betracht ziehen sollten.

1. Zeigen Sie alle Ihre Standorte an einem Ort

Wenn Ihr Unternehmen über mehrere Filialen, Geschäfte oder Büros verfügt, können Sie mehrere Pins helfen, sie alle auf einer einzigen Karte anzuzeigen. Dies erleichtert den Besuchern, jeden Ort auf einen Blick zu sehen, ohne zwischen verschiedenen Karten oder Seiten zu wechseln.

2. Helfen Sie den Benutzern, den nächsten Platz zu finden

Wenn Benutzer alle Standorte auf einer Karte sehen, können sie schnell diejenigen finden, die ihnen am nächsten stehen. Dies kann ihre Erfahrung verbessern und ihnen helfen, schneller Maßnahmen zu ergreifen, z. B. Ihr Geschäft zu besuchen oder einen Termin zu buchen.

3. Sparen Sie Zeit für Besucher

Anstatt jede Adresse einzeln im Klartext aufzulisten, können Sie sie visuell mit Stiften anzeigen. Dies spart sowohl für Sie als auch Ihre Besucher Zeit. Außerdem sieht Ihre Website professioneller und moderner aus.

4. Steigern Sie die lokale SEO mit Standortdaten

Google Maps kann bei der lokalen SEO Ihrer Website helfen. Wenn Sie Ihrer Karte echte Adressen hinzufügen, werden Suchmaschinen über Ihre Geschäftsstandorte angezeigt. Dies kann dabei helfen, Ihre Website in lokalen Suchergebnissen zu erscheinen. Entdecken Sie, wie Sie die lokale SEO mit Happyaddons verbessern können.

Boost Local SEO with Location Data

5. Machen Sie Ihre Website interaktiver

Eine Karte mit mehreren Stiften sieht interaktiver und dynamischer aus als nur einen einfachen Text. Besucher können sich zoomen, auf Stifte klicken und die Karte erkunden. Dies macht Ihre Website ansprechender und benutzerfreundlicher.

6. Perfekt für dienstbasierte oder Multi-Branch-Unternehmen

Wenn Sie eine Kette von Restaurants, Kliniken, Geschäften oder Lieferpunkten betreiben, erklären Sie mehrere Stifte, Ihre Reichweite klar zu erklären. Wie oben bereits gesagt, baut dies Vertrauen auf und hilft den Benutzern, den nächsten Ort auszuwählen.

Voraussetzungen für die Erstellung einer Google -Karte mit mehreren Stiften mit Elementor

Machen wir am Anfang eines klar. Elementor verfügt über ein integriertes Widget namens Google Map . Die Merkmale sind jedoch sehr begrenzt. Mit diesem Standard -Widget können Sie der Karte nicht mehrere Pins hinzufügen. Um das zu tun, benötigen Sie ein zusätzliches Addon.

Eine großartige Option ist Happyaddons . Es bietet ein Widget namens Advanced Google Maps , mit dem Sie Ihre Karte problemlos erstellen und ohne Probleme mehrere Pins hinzufügen können.

Insgesamt benötigen Sie für dieses Tutorial die folgenden Tools auf Ihrer Website.

  • Elementor
  • Happyaddons
  • Happyaddons Pro

Happyaddons Pro ist erforderlich, da die erweiterte Google Map ein Premium -Widget des Plugins ist. Sobald sie auf Ihrer Website installiert und aktiviert sind, folgen Sie dem unten erwähnten Tutorial. Entdecken Sie alle anderen Widgets von Happyaddons.

So erstellen Sie eine Google-Karte mit mehreren Stiften in WordPress: Schritt-für-Schritt-Tutorial

In diesem Abschnitt erläutern wir schrittweise, wie Sie eine Google-Karte mit mehreren Stiften in WordPress mit Elementor- und Happyaddons-Plugins erstellen. Wir werden diesen Abschnitt auch mit den erforderlichen Screenshots dekorieren, damit Sie den vollständigen Prozess verstehen können. Lesen Sie weiter!

Schritt 01: Öffnen Sie eine Seite und finden Sie das erweiterte Google Map -Widget

Öffnen Sie den Beitrag oder die Seite, auf der Sie die Google Map mit mehreren Stiften erstellen möchten. Suchen Sie das Advance Google Map -Widget im Elementor -Panel. Ziehen Sie es auf die Elementor -Leinwand.

Use the Advanced Google Map widget to create multiple pins

Schritt 02: Holen Sie sich die Google -API -Schlüssel

Nachdem das Widget zu der Leinwand hinzugefügt wurde, werden Sie aufgefordert, Anmeldeinformationen für die Anzeige der Google Map zu konfigurieren. Klicken Sie zunächst auf die Option Anmeldeinformationen im Abschnitt Allgemeine Einstellungen im Panel.

Get credential for the Advanced Google Map

Sie werden im Backend der Website in den Abschnitt "Anmeldeinformationen" von Happyaddons gebracht. Suchen Sie die Option Google Map . Drücken Sie dann die Option GET API -Schlüssel .

Get Google Map API Key

Sie kommen zur Google Cloud -Seite.

Google Cloud Page

Jetzt müssen Sie "Maps JavaScript API" finden. Geben Sie hierfür die Karten -JavaScript -API in das Suchfeld ein. Sobald die Option angezeigt wird, klicken Sie darauf .

Find Maps JavaScript API

Aktivieren Sie die Option , nachdem Sie auf die Karten -JavaScript -API -Seite gekommen sind.

Enable Maps JavaScript API

Drücken Sie die Taste für Vereinbarung und Fortsetzung . Vorher können Sie Ihr Land auswählen. Wir haben es für unseren Fall verwischt.

Configure JavaScript Account

Google API -Schlüssel ist technisch nicht kostenlos. Sie müssen Ihre Abrechnungsinformationen ausfüllen, um die API zu erhalten.

Hinweis (wie kostenlos ist): Obwohl es technisch nicht kostenlos ist, erhalten Sie Tokens entsprechen 200 US -Dollar pro Monat und keine Kosten . Mit diesem Token kann Ihre Google -Karte bis zu 28.000 Mal geladen oder angezeigt werden. Nur wenn diese Ansicht/Lastgrenze gekreuzt wird, wird Ihre Karte aufgeladen.

Complete the billing information

Danach erhalten Sie ein Popup. Sie müssen einige Informationen über Ihr Unternehmen geben, in denen diese Karte verwendet wird. Klicken Sie nach Abschluss auf die Schaltfläche Senden in der unteren rechten Ecke des Popups.

Fill in your industry-related information

Die Google Map -API -Taste wird sofort mit einem neuen Popup auf Ihrem Bildschirm angezeigt. Kopieren Sie den API -Schlüssel .

Copy the Google Map API key

Kehren Sie zurück zu der Option Happyaddons Google API -Schlüssel und fügen Sie Ihren Code dort ein. Klicken Sie am Ende auf die Schaltfläche "Speichern Änderungen" .

Paste the Google Map API key to HappyAddons

Kommen Sie nun zu Ihrer Elementor -Leinwand und aktualisieren/laden Sie sie neu. Die Google Map wird auf der Leinwand angezeigt.

Google map appears on the Elementor Canvas

Überprüfen Sie, wie Sie eine Zeitleiste in WordPress mit Elementor erstellen.

Schritt 03: Fügen Sie der Karte mehrere Stifte hinzu

Standardmäßig wird auf der Karte nur ein Pin angezeigt. Um der Karte mehr Stifte hinzuzufügen und anzuzeigen, erweitern Sie den Abschnitt Kartenmarkierung im Panel.

Expand the Map Marker section on the panel

Nachdem der Abschnitt Kartenmarkierung erweitert wurde, können Sie so viele Stifte hinzufügen, wie Sie möchten, indem Sie auf die Schaltfläche + Element hinzufügen .

Add more pins to the Google Map

Indem Sie Werte für Breitengrad und Längengrad platzieren, können Sie für jeden Ort genau die Pins genau einstellen.

Add latitude and longitude to pins on Google Map

Schritt 04: Karteneinstellungen konfigurieren

Erweitern Sie gleich den Abschnitt Karteneinstellungen .

Configure Map Settings

In diesem Abschnitt finden Sie viele Optionen.

Mag Settings options of the Advanced Google Map widget

Jetzt erkunden Sie bitte jede Option, indem Sie ein- und ausschalten, um zu sehen, wie sie funktionieren, damit Sie endlich bei denjenigen bleiben können, die den Designanforderungen entsprechen.

Erfahren Sie, wie Sie in WordPress eine automatisch-Scrolling-Bildergalerie erstellen.

Schritt 05: Stift das erweiterte Google Map -Widget

Wenn alle Einstellungen und Inhaltsteile ausgeführt werden, gelangen Sie auf die Registerkarte "Stil" . Von hier aus können Sie die Höhe, Breite, Grenztyp, Grenzradius und weitere Optionen anpassen.

Stylize the Advanced Google Map Widget

Erweitern Sie auch andere Optionen und führen Sie die erforderlichen Anpassungen durch, um das Erscheinungsbild der Stifte zu ändern.

Stylize the other options of the Advanced Google Map widget

Schritt 06: Vorschau des Designs

Wenn das Design vor dem Online -Veröffentlichen erfolgt, können Sie feststellen, ob eine Korrektur oder Änderung erforderlich ist. Sie können sehen, dass das Widget in dem unten beigefügten Videoclip gut funktioniert.

Somit können Sie eine Google -Karte mit mehreren Stiften in WordPress mit Elementor erstellen.

Erweiterte Tipps für Google Map mit mehreren Stiften

Sobald Sie Ihrer Google -Karte mehrere Pins hinzugefügt haben, können Sie mehr Dinge tun, damit die Karte für Ihre Besucher und Ihre Website besser funktioniert. Diese erweiterten Tipps helfen Ihnen dabei, Ihre Karte professioneller aussehen zu lassen, die Benutzererfahrung zu verbessern und sogar Ihre lokalen SEO -Bemühungen zu unterstützen.

Advanced Tips for Google Map with Multiple Pins

1. Verwenden Sie benutzerdefinierte Bilder anstelle von Symbolen

Versuchen Sie anstelle der Standard -roten Pin für jeden Ort benutzerdefinierte Symbole oder Bilder. Mit HappyAddons können Sie dies aus dem Abschnitt "Kartenmarkierung" ausführen. Benutzerdefinierte Bilder und Symbole können Ihre Karte visuell klar und attraktiv machen.

2. Einstellungen Zoomen und Mitteleinstellungen

Passen Sie den Zoompegel und die Mitte Ihrer Karte an, um alle Stifte richtig anzuzeigen. Wenn einige Stifte weit voneinander entfernt sind, stellen Sie sicher, dass das Zoom -Level weit genug ist, damit alle beim Laden der Karte sichtbar sind. Dies gibt den Benutzern eine vollständige Übersicht, ohne die Karte manuell zu verschieben.

3. Machen Sie es mobilfreundlich

Überprüfen Sie immer, wie Ihre Karte auf mobilen Geräten aussieht. Stellen Sie sicher, dass es schnell geladen wird, die Stifte klickbar sind und Info -Boxen auf kleinen Bildschirmen lesbar sind. Eine Karte, die sowohl auf Desktop als auch auf dem Handy gut funktioniert, wird mehr Benutzer zufrieden halten.

4. Einbetten Sie Karten auf Kontakt- oder Standortseiten ein

Lassen Sie Ihre Karte nicht nur auf einer Seite. Sie können dieselbe Karte wiederverwenden, indem Sie sie auf andere Seiten wie "Kontakt", "unsere Standorte" oder "Besuchen Sie uns" -Seiten ein. Dies hilft Benutzern, den richtigen Ort zu finden, an dem sie sich auf Ihrer Website befinden.

Erfahren Sie, wie Sie eine dynamische Webseite in WordPress mit Elementor erstellen.

Abschluss

Das Erstellen einer Google-Karte mit mehreren Stiften ist möglicherweise ein einfacher Schritt oder Teil in Ihrem Webdesign, kann jedoch einen lang anhaltenden Eindruck haben. Es kann nicht nur den Besuchern helfen, Ihre Standorte zu finden, sondern auch die lokale SEO -Punktzahl zu steigern und Ihre Website professioneller aussehen zu lassen.

Mit Hilfe von Elementor- und Happyaddons -Plugins können Sie diese ohne viel Ärger einfach zu Ihrer Website hinzufügen. Es ist so einfach, dass selbst Anfänger dies einfach tun können, indem sie dem oben abgedeckten Tutorial folgen. Wenn Sie noch keine Fragen unbeantwortet haben, teilen Sie uns das folgende Kommentarfeld mit.

Wir werden uns sehr bald mit praktikablen Antworten bei Ihnen melden. Danke, dass du bis zum Ende bei uns bist. Lassen Sie uns wissen, welches Thema Sie im nächsten Beitrag behandeln sollen.