Hilfe-Center

Wie man Google Maps hinzufügt

Sehen Sie sich diese Anleitung zum Hinzufügen von Google Maps an, oder lesen Sie den Leitfaden unten.

Google hat die Regeln für die Verwendung von Google Maps geändert. Um eine Google-Karte zu Ihrer Website hinzuzufügen, müssen Sie jetzt einen Schlüssel für die JavaScript-API erhalten, ihn in den Einstellungen des Kartenblocks angeben und eine Bandkarte mit Ihrem Google-Konto verknüpfen.

Gehen Sie auf die Seite:
https://console.cloud.google.com/google/maps-apis/overview.
Erstellen Sie ein neues Projekt oder wählen Sie ein bestehendes aus. Klicken Sie auf Erstellen.

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Wählen Sie Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Aktivieren Sie den Dienst, indem Sie auf Aktivieren klicken.

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Gehen Sie auf die Registerkarte "Berechtigungsnachweise" und klicken Sie auf Berechtigungsnachweise in APIs & Dienste.

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

Klicken Sie dann auf Credentials erstellen und wählen Sie in der Dropdown-Liste den API-Schlüssel aus.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Klicken Sie in einem Pop-up-Fenster auf Schlüssel einschränken.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" pop-up window.

Aktivieren Sie dasKontrollkästchen "HTTP-Referrer (Websites)" , geben Sie Ihren Domänennamen in das Feld "Referrer" ein, um die Zuordnung zu autorisieren, und wählen Sie dann die Option "Schlüssel einschränken" Kontrollkästchen.

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

Tipps und Tricks: Der Eintrag https://tilda.cc/* ist optional. Er ermöglicht eine Kartenvorschau im Tilda Editor. Andernfalls ist eine Karte nur über einen Domain-Link zugänglich.

Wenn Sie die Bearbeitung Ihrer Website abgeschlossen haben, entfernen Sie den zweiten Eintrag aus Sicherheitsgründen. Erfahren Sie mehr darüber, wie Sie einen API-Schlüssel sichern können.

Wählen Sie in der Dropdown-Liste Maps JavaScript API und speichern Sie die Änderungen.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

Hinweis: Google Maps hat vor kurzem seine Richtlinien geändert. Sie müssen nun die Abrechnung in Ihrem Konto aktivieren, bevor Sie einen Schlüssel erhalten. Erfahren Sie mehr über die Preise von Google Maps.

Gehen Sie auf die Registerkarte "Abrechnung", um eine Bankkarte mit Ihrem Konto zu verknüpfen.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Gehen Sie anschließend zu Credentials und kopieren Sie den Schlüssel.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

Rufen Sie Ihr Projekt auf Tilda auf, fügen Sie der Seite einen Block mit einer Karte aus der Kategorie "Sonstige" hinzu (z. B. Т143), öffnen Sie das Inhaltsfenster des Blocks und fügen Sie den Schlüssel in das Feld "Karten-API-Schlüssel" ein. Speichern Sie die Änderungen und veröffentlichen Sie die Seite.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

Fehlersuche

F: Ich habe den API-Schlüssel in den Kartenblock eingegeben, aber die Karte erscheint nur in der veröffentlichten Version der Seite. Im Editor erscheint die Fehlermeldung "Oops! Etwas ist schief gelaufen" auf. Wie kann ich das Problem lösen?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

A: Dieser Fehler tritt normalerweise auf, nachdem der API-Schlüssel eingeschränkt wurde. Um zu verhindern, dass Dritte Ihren API-Schlüssel auf ihrer Website verwenden, empfehlen wir Ihnen, den Zugriff nur auf Ihren Domainnamen zu ermöglichen. Erfahren Sie mehr darüber, wie Sie einen API-Schlüssel sichern.

Um eine Kartenvorschau im Tilda Editor vorübergehend zu aktivieren, autorisieren Sie https://tilda.cc/* auf der Google Maps-Plattform und widerrufen Sie den Zugriff später.