Zum Hauptinhalt gehen

widget: Karte

widget Kategorien: Business

Zeigen Sie Ihren Besuchern eine Karte von jedem beliebigen Standort. Verwenden Sie das Karten-Widget, um den Standort Ihres Unternehmens oder einen Veranstaltungsort anzuzeigen. Außerdem können Sie Kunden darüber informieren, wo sie Parkplätze finden.

Weitere Informationen zum Hinzufügen von widgetfinden Sie unter Hinzufügen von widget.

Tipp

Weitere Informationen zu widget und der widget Bibliothek finden Sie unter widget: Bibliothek und Übersicht.

Inhaltseditor

Um auf den Inhaltseditor zuzugreifen, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie Inhalt bearbeiten. Klicken Sie auf das Element, um das schwebende Menü zu öffnen, und klicken Sie dann auf die Option für den Inhaltseditor.

Optionen für die Einrichtung der Karte

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

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

      Hinweis

      Wenn Ihre Adresse nicht im Dropdown-Menü angezeigt wird, bedeutet dies, dass die Datenbank HERE, die Website Builder verwendet, die Adresse nicht enthält. Um die Adresse zu übermitteln oder zu korrigieren, wenden Sie sich an HERE Map Creator.

  • Statt dem Kartenbild können Sie auch einen Karten-Button anzeigen.

    • Um eine Kartenschaltfläche auf bestimmten Geräten anzuzeigen, wählen Sie die Schaltfläche auf Geräten verwenden (Auswahl für drei Bildschirmtypen: Desktopcomputer, Tablet oder Handy) aus, an der die Schaltfläche angezeigt werden soll. Wenn keine Geräte ausgewählt sind, wird das Kartenbild angezeigt.

    • Editor 2.0: Um die Schaltfläche für alle Geräte zu aktivieren, klicken Sie auf den Schalter Als Schaltfläche auf allen Geräten festlegen.

  • Geben Sie den Text, der auf der Schaltfläche angezeigt werden soll, in das dafür vorgesehene Feld Text auf der Schaltfläche ein.

  • Popup für Ortsinformationen (Infofenster für die Kartenmarkierung). So zeigen Sie ein Popup-Fenster mit Standortinformationen im Karten-Widget an:

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

    • Wählen Sie aus, ob das Popup Bei hover, Beim Klicken oder Immer aus dem Dropdown-Menü Popup angezeigt werden soll.

Designeditor

Um auf den Design-Editor zuzugreifen, klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Design bearbeiten. Klicken Sie auf das Element, um das schwebende Menü zu öffnen, und klicken Sie dann auf die Option zum Bearbeiten des Designs.

Klicken Sie auf die Registerkarte „Layout“, um das Design der Karte zu bearbeiten, die auf Ihrer Website angezeigt wird.

Informationen über Designoptionen, die nicht spezifisch für dieses Widget eingestellt werden (z. B. Layout, Stil oder Abstände), finden Sie unter Widget-Design.

Einbetten einer Google Map mit einem HTML-Widget

So können Sie Karten von Google Maps mit dem HTML-Widget einbetten:

  1. Gehen Sie zu Google Maps.

  2. Suchen Sie nach dem gewünschten Standort.

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

  4. Klicken Sie auf die Registerkarte Karte einbetten .

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

  6. Navigieren Sie zu Ihrer Website, klicken Sie im linken Bereich auf widgetund ziehen Sie das HTML-Widget in eine Zeile.

  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. Öffnen Sie den Entwicklermodus.

  9. Klicken Sie auf Website-HTML/CSS und dann auf Website.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%; }

    Die Größe der Karte wird nun an die entsprechenden Geräte angepasst. Wenn Sie den normalen Einbettungscode von Google Maps verwenden, ist die Größe des Karten-Widgets auf allen Geräten statisch und wird in der mobilen Ansicht abgeschnitten.

Verwandte Beiträge