Zeigen Sie Ihren Besuchern eine Karte von jedem beliebigen Standort. Verwenden Sie das Karten-, 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- hinzu:
- Klicken Sie in der linken Seitenleiste auf Widgets.
- Klicken Sie auf das Karten- und ziehen Sie es auf Ihre Website.
Mehr zum Hinzufügen von zu Ihrer Website erfahren Sie unter Widgets hinzufügen.
Google Maps als Standard-Kartenanbieter
Mapbox ist der Standardkartenanbieter für das Karten-Widget. Sie können Google Maps jedoch als Standardkartenanbieter für alle neuen und vorhandenen Websites in Ihrem Konto festlegen. Zusätzlich zum Karten-Widget wird Google Maps zum Standard in allen Ortssuchen und Karten für die Inhaltsbibliothek und andere anwendbare widget.
Alle Standortdaten aus 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 Berechtigung für die Pro-Einstellungen aktiviert werden kann.
So legen Sie Google Maps als Standard-Kartenanbieter fest:
Generieren Sie in Ihrem Google Maps-Konto einen API-Schlüssel. Weitere Informationen zum Generieren eines API-Schlüssels finden Sie in der Dokumentation von Google. Wir empfehlen Ihnen , die Nutzungs- und Abrechnungsrichtlinie von Google zu lesen.
Klicken Sie in Ihrem Dashboard auf Ihren Avatar in der oberen rechten Ecke und wählen Sie Konto aus.
Scrollen Sie auf der Seite "Kontoeinstellungen" nach unten zum Abschnitt "Google Map-Integration " und klicken Sie auf "Einrichten".
Fügen Sie Ihren API-Schlüssel in das Feld ein und klicken Sie dann auf Auf alle Websites anwenden. Dadurch wird Google Maps zur Standardkarte für alle bestehenden und neuen Websites in Ihrem Konto.
Sie können Google Maps jederzeit deaktivieren und wieder zu Mapbox wechseln. Alle Standortdaten von Google Maps werden gespeichert und automatisch auf Mapbox angewendet, wenn Sie wechseln.
Inhaltseditor
So können Sie den Inhaltseditor aufrufen:
- Klicken Sie mit der rechten Maustaste auf das und dann auf Inhalt bearbeiten.
- Geben Sie Ihre Geschäftsadresse in das dafür vorgesehene Feld ein.
- Wählen Sie die Adresse aus dem angezeigten Dropdown-Menü aus. 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. 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.
- 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- 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.
Designeditor
Wenn Sie auf den Designeditor zugreifen möchten, klicken Sie mit der rechten Maustaste auf das 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 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- einbetten:
- Gehen Sie zu Google Maps.
- Suchen Sie nach dem gewünschten Standort.
- Klicken Sie auf das Menü oben links und dann auf Karte teilen oder einbetten.
- Klicken Sie auf die Registerkarte Karte einbetten.
- 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.
- Gehen Sie zu Ihrer Website und klicken Sie in der linken Seitenleiste auf Widgets. Ziehen Sie dann das HTML- in eine Zeile oder Spalte.
- 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> - Öffnen Sie den Entwicklermodus.
- Klicken Sie auf Webseiten HTML/CSS und dann auf site.css.
- 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- auf allen Geräten statisch und wird in der mobilen Ansicht abgeschnitten.