Möchten Sie erfahren, wie Sie mit Jet Elements eine Karte mit mehreren Stecknadeln erstellen?
Jet-Elemente bietet ein Widget namens Erweiterte Karte. Im Gegensatz zum Widget Google Native KartenElementor das nur einen Standort unterstützt, erlaubt Ihnen Jet Elements Advanced Map Widget, eine Karte mit mehreren Stecknadeln zu erstellen.
Um dieses Widget verwenden zu können, müssen Sie zunächst Jet Elements integrieren Google Karten mithilfe eines API-Schlüssels.
Das erweiterte Karten-Widget von Jet Elements ist sehr nützlich, wenn Sie ein Unternehmen mit mehreren Filialen in der Stadt haben und eine Karte erstellen möchten, die den Standort Ihrer Filialen anzeigt. Dieses Widget ist auch nützlich, um so etwas wie eine Karte mit Touristenattraktionen in einer Stadt zu erstellen.
So verwenden Sie dieses Widget.
Schritt 1: Integrieren Sie JetElements mit Google Maps
Wie bereits erwähnt, benötigen Sie einen API-Schlüssel Google Karten zur Integration von Jet Elements mit Google Maps. Sie können einen API-Schlüssel über die Google API-Konsole erhalten.
Also besuchen Google API-Konsole und melden Sie sich mit Ihrem Google-Konto an. Wenn Sie noch kein Projekt haben, erstellen Sie ein neues, indem Sie oben auf das Dropdown-Menü und dann auf klicken NEUES PROJEKT auf dem Popup, das angezeigt wird.
Geben Sie Ihrem Projekt einen Namen und klicken Sie auf die Schaltfläche CREATE .
Sobald Ihr neues Projekt erstellt ist, wählen Sie es über das Dropdown-Menü oben im Google API Console-Dashboard aus und klicken Sie dann auf Bibliothek auf der linken Tafel.
Google unterteilt die Google Maps API in 17 Typen. Sie müssen die für das Jet Elements Advanced Map Widget erforderlichen APIs aktivieren, um dieses Widget verwenden zu können. Crocoblock, der Entwickler von Jet Elements, macht keine detaillierten Angaben zu den benötigten APIs. Basierend auf unserer Erfahrung haben wir die folgenden APIs aktiviert:
- API-Anweisungen
- Geokodierungs-API
- Maps-JavaScript-API
- Places API
Sie können auf den Link klicken ZEIGE ALLES im Bereich Menükarte sie alle zu sehen.
Um eine API zu aktivieren, wählen Sie die betreffende API aus (durch Anklicken) und klicken Sie auf die Schaltfläche AKTIVIEREN SIE.
Nachdem Sie die erforderlichen APIs aktiviert haben, kehren Sie zum Haupt-Dashboard der Google API-Konsole zurück und klicken Sie auf Identifiers auf der linken Tafel. Klicken Sie auf die Schaltfläche Anmeldedaten erstellen und wählen Sie API-Schlüssel. Kopieren Sie den API-Schlüssel im angezeigten Popup.
Melden Sie sich als Nächstes bei Ihrem WordPress-Dashboard an und gehen Sie zu JetPlugins – > JetElements-Einstellungen.
Klicken Sie auf die Registerkarte Integrationen und fügen Sie Ihren API-Schlüssel in das Feld ein Google Maps-API-Schlüssel im Abschnitt Google Maps. Aktivieren Sie die Option Separater Geokodierungs-API-Schlüssel und fügen Sie den gleichen Code ein Geocodierungs-API-Schlüssel.
Schritt 2: Erstellen Sie die Karte
Sobald Jet Elements und Google Maps erfolgreich integriert sind, können Sie mit der Erstellung der Karte beginnen. Erstellen Sie dazu eine neue Seite (Seiten – > Hinzufügen) oder ein neues Element (Artikel – > Hinzufügen) und ändern Sie es mit Elementor.
Im Editor ElementorLegen Sie das Layout fest, bevor Sie beginnen. Öffnen Sie dazu das Bedienfeld „Seiteneinstellungen“, indem Sie auf das Zahnradsymbol in der unteren linken Ecke klicken. Wählen Sie im Dropdown-Menü unter der Option ein Layout aus Einstellungen.
Fügen Sie einen neuen Abschnitt hinzu, indem Sie auf das Plus-Symbol im Elementor-Bearbeitungsfeld klicken und das Advanced Map-Widget auf die Leinwand ziehen.
Stellen Sie den Mittelpunkt der Karte auf Ihre Stadt (oder eine beliebige Region, je nachdem, welche Karte Sie erstellen möchten). Stellen Sie auch den anfänglichen Zoom ein.
geöffnet Google Maps Suchen Sie den ersten Ort, den Sie der Karte hinzufügen möchten, und kopieren Sie seine Adresse.
Kehren Sie zum Elementor-Editor zurück und öffnen Sie den Abschnitt Stifte. Klicken Sie auf den vorhandenen Standort und ersetzen Sie die Adresse durch die gerade kopierte Adresse. Fügen Sie auch die Beschreibung des Ortes auf dem Feld hinzu Pin Beschreibung.
Klicken Sie auf die Schaltfläche EIN ELEMENT HINZUFÜGEN befindet sich etwas weiter unten, um eine weitere Adresse hinzuzufügen.
Um den Stil Ihrer Karte sowie die Höhe zu ändern, können Sie den Abschnitt öffnen Kartenstil.
HINWEIS: Wenn die Karte nach dem Ziehen des Widgets nicht geladen wird Erweiterte Karte Wenn Sie im Elementor-Editor die Meldung „Nur für Entwicklungszwecke“ sehen, stellen Sie sicher, dass Sie Ihre Google-Abrechnung aktiviert haben Cloud. Die neue Richtlinie von Google verlangt von Entwicklern, dass sie das Rechnungskonto aktivieren.
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie mit Jet Elements eine Karte mit mehreren Pins erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie es ihnen im mit commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
