Karten-Widget

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.

So fügen Sie das Karten-Widget hinzu:

  1. Klicken Sie in der linken Seitenleiste auf Widgets.
  2. Klicken Sie auf das Karten-Widget und ziehen Sie es auf Ihre Website.

Mehr zum Hinzufügen von Widgets zu Ihrer Website erfahren Sie unter Widgets hinzufügen.

Inhalts-Editor

So können Sie den Inhaltseditor aufrufen:

  1. Klicken Sie mit der rechten Maustaste auf das Widget und dann auf Inhalt bearbeiten.
  2. Geben Sie Ihre Geschäftsadresse in das dafür vorgesehene Feld ein.
  3. Wählen Sie die Adresse aus dem angezeigten Dropdown-Menü aus. Wenn Ihre Adresse nicht im Dropdown-Menü angezeigt wird, wurde diese nicht in der Mapbox-API gefunden. (Die Ergebnisse können von der Kartensuche abweichen.) Dieses Problem lässt sich unter Umständen umgehen, indem Sie ein Schaltflächen-Widget direkt mit der Karten-URL bei Google Maps verknüpfen. Wenn Ihre Adresse nicht in MapBox enthalten ist, können Sie sich direkt an MapBox wenden, damit Ihre Adresse hinzugefügt wird.
  4. Statt dem Kartenbild können Sie auch einen Karten-Button anzeigen. Wählen Sie mit der Option Button verwenden für: () den jeweiligen Gerätetyp aus, um auf einem spezifischen Gerät eine Karten-Schaltfläche anzuzeigen. Ohne Auswahl von Geräten wird das Kartenbild angezeigt.
  5. Geben Sie im Feld Text auf Button den Text ein, der auf der Schaltfläche angezeigt werden soll.

Ein Popup-Fenster mit Standortinfos anzeigen

So zeigen Sie ein Popup-Fenster mit Standortinfos auf dem Karten-Widget an:

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

Wählen Sie im Dropdown-Menü für die Popup-Anzeige aus, ob das Popup-Fenster Beim Hovern, Beim Klick oder Immer angezeigt werden soll.

Design-Editor

Wenn Sie auf den Designeditor zugreifen möchten, klicken Sie mit der rechten Maustaste auf das Widget und anschließend auf Design bearbeiten.

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.

Google Map mit einem HTML-Widget einbetten

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 teilen 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. Gehen Sie zu Ihrer Website und klicken Sie in der linken Seitenleiste auf Widgets. Ziehen Sie dann das 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. Öffnen Sie den Entwicklermodus.
  9. Klicken Sie auf Webseiten HTML/CSS und 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%; }

    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.