Zum Hauptinhalt gehen
DE Español Français Italiano Português

Widgets: Karte

Widget-Kategorien: Unternehmen

Zeigen Sie Ihren Besuchern eine Karte mit einem beliebigen Ort. Verwenden Sie das Karten-Widget, um den Standort Ihres stationären Geschäfts oder einer besonderen Veranstaltung anzuzeigen. Sie können es auch verwenden, um Kunden zu zeigen, wo sie einen Parkplatz finden

Informationen zum Hinzufügen von Widgets finden Sie unter Widgets hinzufügen.

Tipp

Weitere Informationen zu Widgets und der Widgets-Bibliothek finden Sie unter Widgets: Bibliothek und Überblick.

Google Maps als Standard-Kartenanbieter

Mapbox ist der Standardkartenanbieter für das Karten-Widget. Sie können Google Maps jedoch zum Standardkartenanbieter für alle neuen und vorhandenen Websites in Ihrem Konto machen. Zusätzlich zum Karten-Widget wird Google Maps bei allen Standortsuchen und Karten für die Inhaltsbibliothek und andere entsprechende Widgets zum Standard.

Alle Standortdaten von Mapbox werden gespeichert und auf Google Maps angewendet. Dadurch wird sichergestellt, dass Sie Standorte nicht erneut einrichten müssen

Beachten Sie, dass diese Funktion nur von Mitarbeitern mit der Erlaubnis zum Account-Branding aktiviert werden kann.

So legen Sie Google Maps als Ihren Standard-Kartenanbieter fest:

  1. Generieren Sie in Ihrem Google Maps-Konto einen API-Schlüssel. Informationen zum Generieren eines API-Schlüssels finden Sie unterDie Dokumentation von Google. Wir empfehlen Ihnen, es zu überprüfenNutzungs- und Abrechnungsrichtlinien von Google.

  2. (Fakultativ) Wenn Sie Ihr Google-Konto so einrichten, dass der API-Schlüssel nur auf bestimmten Websites verwendet werden kann, müssen Sie duda.co, Ihre Website-Domain und gegebenenfalls alle White-Label-Domains zur Liste der zulässigen Websites in Ihrem Google-Konto hinzufügen. Es ist wichtig, dass Sie das folgende Format für Ihre Domains verwenden*.duda.co/*

  3. Klicken Sie in Ihrem Dashboard in der oberen rechten Ecke auf Ihren Avatar und wählen SieKonto.

  4. Scrollen Sie auf der Seite mit den Kontoeinstellungen nach unten zurGoogle Map-IntegrationAbschnitt und klicken SieEinrichten.

  5. Fügen Sie Ihren API-Schlüssel in das Feld ein und klicken Sie dann aufAuf alle Websites anwenden. Dadurch wird Google Maps zur Standardkarte für alle vorhandenen und neuen Websites in Ihrem Konto.

Sie können Google Maps jederzeit deaktivieren und zurück zu Mapbox wechseln. Alle Standortdaten von Google Maps werden gespeichert und automatisch auf Mapbox übertragen, wenn Sie wechseln

Inhaltseditor

Um auf den Inhaltseditor zuzugreifen, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie Inhalt bearbeiten. Oder, wenn Sie sich im Flex-Modus oder in Editor 2.0 befinden, ist die Option für den Zugriff auf den Inhaltseditor im schwebenden Menü verfügbar. Klicken Sie auf das Element, um das schwebende Menü zu öffnen, und klicken Sie dann auf die Option für den Inhaltseditor.

Optionen zur Karteneinrichtung

  • Geben Sie Ihre Geschäftsadresse in das dafür vorgesehene Feld ein.

    • Wählen Sie die Adresse aus dem angezeigten Drop-down-Menü aus.

      Anmerkung

      Wenn Ihre Adresse nicht in der Drop-down-Liste erscheint, bedeutet das HIER Datenbank, die Website Builder verwendet, enthält die Adresse nicht. Um die Adresse einzureichen oder zu korrigieren, wenden Sie sich an HIER Map Creator.

      Wenn Sie Google Maps für den Standardanbieter verwenden, lesen Sie die Dokumentation von Google, Fügen Sie einen fehlenden Ort zu Google Maps hinzu.

  • Sie können wählen, ob anstelle eines Kartenbilds eine Kartenschaltfläche angezeigt werden soll.

    • Um eine Kartenschaltfläche auf bestimmten Geräten anzuzeigen im Classic-Editor, wählen Sie den Verwenden Sie die Taste an Geräte (Selector for three screen types: desktop, tablet, or phone) an der Stelle, an der die Schaltfläche angezeigt werden soll. Wenn keine Geräte ausgewählt wurden, wird das Kartenbild angezeigt.

    • Herausgeber 2.0: Um die Schaltfläche für alle Geräte zu aktivieren, klicken Sie auf Auf allen Geräten als Schaltfläche festlegen umschalten.

  • Geben Sie den Text, der auf der Schaltfläche erscheinen soll, in das Text auf der Schaltfläche Feld zur Verfügung gestellt.

  • Standortinfo-Popup (Informationsfenster für die Kartenmarkierung). Um ein Popup mit Standortinformationen auf dem Karten-Widget anzuzeigen

    • Geben Sie einen Titel und eine Beschreibung für das Popup ein.

    • Wählen Sie, um das Popup anzuzeigenBeim Bewegen des Mauszeigers,Beim Klick, oderImmeraus dem Dropdownmenü Popup-Anzeige.

Designredakteur

Um auf den Entwurfseditor zuzugreifen, klicken Sie mit der rechten Maustaste auf das Element, und klicken Sie aufDesign bearbeiten. Oder wenn Sie sich im Flex-Modus oder Editor 2.0 befinden, wählen Sie Design bearbeiten aus dem schwebenden Menü, um das Design-Panel zu öffnen. Klicken Sie auf das Element, um das schwebende Menü zu öffnen, und klicken Sie dann auf die Option, um das Design zu bearbeiten.

Klicken Sie auf den Tab Layout, um das Design der Karte zu bearbeiten, die auf Ihrer Site angezeigt wird.

Informationen zu Entwurfsoptionen, die nicht spezifisch für dieses Widget sind (z. B. Layout, Stil oder Abstände), finden Sie unter Entwurf von Widgets.

Eine Google Map mithilfe eines HTML-Widgets einbetten

So betten Sie Karten von Google Maps mithilfe des HTML-Widgets ein:

  1. Navigiere zu Google Maps.

  2. Suchen Sie nach dem gewünschten Standort.

  3. Klicken Sie auf das Menü oben links und dann auf Karte teilen oder einbetten .

  4. Klicken Sie auf Karte einbetten Tab.

  5. Kopieren Sie die URL in den Anführungszeichen nach <iframe src =“. Stellen Sie sicher, dass Sie die vollständige URL in den Anführungszeichen kopieren.

    Google's map interface with a field that lists the embed URL

  6. Navigieren Sie zu Ihrer Website und klicken Sie im linken Bereich auf Widgets und ziehen Sie die HTML-Widget in eine Zeile oder Spalte.

  7. Verwenden Sie den folgenden Einbettungscode und fügen Sie die URL, die Sie von Google Maps erhalten haben, in die Anführungszeichen nach iframe src= ein:

    <div class="embed-container"><iframe src=" " frameborder="0" allowfullscreen></iframe></div>

  8. Gehen Sie in den Entwicklermodus.

  9. Klicken Sie Seite HTML/CSS, und klicken Sie dann auf site.css.

  10. Betten Sie das folgende CSS in diesen Abschnitt ein:

    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    Developer mode with CSS added

    Die Kartengröße wird für die verschiedenen Geräteansichten entsprechend angepasst. Wenn Sie den normalen Google Maps-Einbettungscode verwenden, erscheint die Größe des Karten-Widgets auf allen Geräten statisch und wird in der mobilen Ansicht abgeschnitten

    A google maps location shown on three screen sizes: desktop, tablet, and mobile.

Was this article helpful?

Zurück an den Anfang