In diesem Thema werden die Anforderungen für Quellenangaben für alle mit der Maps JavaScript API entwickelten Anwendungen aufgeführt, einschließlich des Webservice „Place Autocomplete“, der Teil dieser API ist. Weitere Informationen zu den Nutzungsbedingungen der Google Maps Platform finden Sie unter Nutzungsbedingungen für die Google Maps Platform.
Bereitstellen der Nutzungsbedingungen und der Datenschutzerklärung
Wenn Sie mit der Maps JavaScript API eine Anwendung entwickeln, müssen Sie darin die Nutzungsbedingungen und eine Datenschutzerklärung bereitstellen, die den Richtlinien entspricht, die in Ihrer Vereinbarung mit Google aufgeführt sind:
- Die Nutzungsbedingungen und die Datenschutzerklärung müssen öffentlich verfügbar sein.
- In Ihren Nutzungsbedingungen müssen Sie explizit angeben, dass die Nutzer Ihrer Anwendung an die Nutzungsbedingungen von Google gebunden sind.
- In Ihrer Datenschutzrichtlinie müssen Sie die Nutzer darauf hinweisen, dass Sie die Google Maps API(s) verwenden und dass die Datenschutzerklärung von Google gilt.
Die empfohlene Platzierung Ihrer Nutzungsbedingungen und Datenschutzerklärung hängt von der Plattform Ihrer Anwendung ab.
Apps
Wenn Sie eine mobile App entwickeln, sollten Sie einen Link zu den Nutzungsbedingungen und zur Datenschutzerklärung auf der Downloadseite Ihrer App im entsprechenden App Store und in einem Einstellungsmenü der App bereitstellen.
Webanwendungen
Wenn Sie eine Webanwendung entwickeln, sollten Sie einen Link zu den Nutzungsbedingungen und zur Datenschutzerklärung in der Fußzeile Ihrer Website einfügen.
Inhalte vorab abrufen, zwischenspeichern oder speichern
Anwendungen, in denen die Maps JavaScript API verwendet wird, sind an die Bedingungen Ihrer Vereinbarung mit Google gebunden. Vorbehaltlich der Bedingungen Ihrer Vereinbarung dürfen Sie keine Inhalte vorab abrufen, indizieren, speichern oder zwischenspeichern, es sei denn, dies geschieht unter bestimmten Voraussetzungen, die in den Nutzungsbedingungen aufgeführt sind.
Die Orts-ID, die zur eindeutigen Identifizierung eines Orts verwendet wird, ist von der Caching-Einschränkung ausgenommen. Die Orts-ID wird im Feld place_id in Maps JavaScript API-Antworten zurückgegeben. Informationen zum Speichern, Aktualisieren und Verwalten von Orts-IDs finden Sie in diesem Leitfaden.
Maps JavaScript API-Ergebnisse anzeigen
Sie können Maps JavaScript API-Ergebnisse auf einer Google-Karte oder anders darstellen. Wenn Sie die Maps JavaScript API-Ergebnisse auf einer Karte anzeigen möchten, dann muss es eine Google-Karte sein. Maps JavaScript API-Daten dürfen nur auf einer Google-Karte angezeigt werden.
Logos und Quellenangaben einblenden
Wenn in Ihrer Anwendung Daten auf einer Google-Karte angezeigt werden, wird das Google-Logo eingefügt und darf nicht verändert werden. In Anwendungen, in denen Google-Daten auf demselben Bildschirm wie eine Google-Karte erscheinen, ist keine weitere Quellenangabe zu Google erforderlich.
Falls in Ihrer Anwendung Daten auf einer Seite oder Ansicht dargestellt werden, auf der nicht ebenfalls eine Google-Karte zu sehen ist, müssen Sie auch ein Google-Logo mit diesen Daten einblenden. Wenn in Ihrer Anwendung beispielsweise Google-Daten auf einem Tab und eine Google-Karte mit diesen Daten auf einem anderen Tab angezeigt werden, muss der erste Tab das Google-Logo enthalten. Werden in Ihrer Anwendung Suchfelder mit oder ohne automatische Vervollständigung verwendet, muss das Logo auf derselben Höhe wie die Suchfelder oder daneben angezeigt werden.
Das Google-Logo sollte links unten auf der Karte und die Informationen zur Quellenangabe rechts unten auf der Karte platziert werden. Beides sollte sich auf der als Ganzes präsentierten Karte und nicht darunter oder an einer anderen Stelle innerhalb der Anwendung befinden. Im folgenden Kartenbeispiel ist das Google-Logo unten links auf der Karte und die Quellenangabe unten rechts zu sehen.
| Zur Verwendung auf einem hellen Hintergrund | Zur Verwendung auf einem dunklen Hintergrund |
|---|---|
|
|
Die folgende Zip-Datei enthält das Google-Logo in den richtigen Größen für Desktop-, Android- und iOS-Anwendungen. Diese Logos dürfen weder in der Größe noch anderweitig verändert werden.
Herunterladen: google_logo.zip
Ändern Sie die Quellenangabe nicht. Entfernen, verdecken oder beschneiden Sie nicht die Quellenangabe. Sie können Google-Logos inline verwenden (z. B. „Diese Karten sind von [Google_logo]“).
Die Quellenangabe muss nah am zugehörigen Objekt platziert werden. Wenn Sie Screenshots von Google-Bildern außerhalb direkter Einbettungen verwenden, fügen Sie die Standardquellenangabe ein, wie sie im Bild erscheint. Bei Bedarf können Sie Stil und Platzierung der Quellenangabe anpassen, solange sich der Text in unmittelbarer Nähe des Inhalts befindet und für den durchschnittlichen Nutzer gut lesbar ist. Die Quellenangabe darf nicht weg vom Inhalt verschoben werden, etwa an das Ende Ihres Buchs, in den Abspann Ihrer Dateien oder Ihrer Sendung oder in die Fußzeile Ihrer Website.
Führen Sie die Drittdatenanbieter auf. Einige der Daten und Bilder in unseren Kartierungsprodukten stammen von anderen Anbietern als Google. Wenn Sie solche Bilder verwenden, muss der Text Ihrer Quellenangabe den Namen „Google“ sowie alle relevanten Datenanbieter enthalten, beispielsweise „Kartendaten: Google, Maxar Technologies“. Wenn in den Bildern Drittdatenanbieter genannt werden, ist die Quellenangabe korrekt, wenn Sie nur „Google“ oder das Google-Logo einfügen.
Wenn Sie die Google Maps Platform auf einem Gerät verwenden, auf dem die Anzeige der Quellenangabe nicht praktikabel ist, wenden Sie sich an das Google-Vertriebsteam, um für Ihren Anwendungsfall geeignete Lizenzen zu erhalten.
Andere Anforderungen bezüglich Quellenangaben
Befolgen Sie diese Anweisungen, um Drittanbieter-Quellenangaben abzurufen und die Quellenangabe in Ihrer App anzuzeigen.
Quellenangaben von einem Ort abrufen
Wenn in Ihrer App Informationen angezeigt werden, die durch Aufrufen von Place.fetchFields eingeholt wurden, müssen auch Drittanbieter-Quellenangaben für die angerufenen Ortsdaten eingeblendet werden.
Die API gibt ein Place-Objekt zurück. Verwenden Sie zum Abrufen von Quellenangaben aus dem Place-Objekt die Place.attributions-Eigenschaft, die mit jeder Anfrage zurückgegeben wird (sie muss nicht mithilfe von Feldern angegeben werden). Die Eigenschaft gibt ein List von String-Objekten zurück oder null, wenn es keine anzuzeigenden Quellenangaben gibt. Das folgende Beispiel veranschaulicht, wie Informationen zu einem Ort abgerufen und Quellenangaben aufgelistet werden.
// Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJB9a4Ifl744kRlpz0BQJzGQ8', // Crazy Good Kitchen }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location", "reviews"], }); // Check for any place attributions. if (!place.attributions) { console.log('No attributions were found.'); return; } else { // Log the place attribution for (var attribution of place.attributions) { console.log(attribution); } }
Rezension anzeigen
Ein Place-Objekt kann bis zu fünf Rezensionen enthalten, wobei jede einzelne durch ein Review-Objekt dargestellt wird. Sie können diese Rezensionen optional in Ihrer App anzeigen.
Wenn Sie Rezensionen von Google-Nutzern anzeigen, müssen Sie den Namen des Autors in unmittelbarer Nähe platzieren. Wir empfehlen, im Feld für die Autorenangabe des Review-Objekts auch das Foto des Autors und einen Link zu seinem Profil anzugeben, falls verfügbar. Im folgenden Bild ist eine Beispielrezension für einen Park zu sehen:
Das folgende Beispiel veranschaulicht, wie Informationen zu einem Ort abgerufen, die Rezensionen geprüft und die Daten aus der ersten Rezension dargestellt werden:
// Use place ID to create a new Place instance. const place = new Place({ id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA }); // Call fetchFields, passing "reviews" and other needed fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location", "reviews"], }); // If there are any reviews display the first one. if (!place.reviews) { console.log('No reviews were found.'); } else { // Log the review count so we can see how many there are. console.log("REVIEW COUNT: " + place.reviews.length); // Get info for the first review. let reviewRating = place.reviews[0].rating; let reviewText = place.reviews[0].text; let authorName = place.reviews[0].authorAttribution.displayName; let authorUri = place.reviews[0].authorAttribution.uri; // Create a bit of HTML to add to the info window const contentString = '<div id="title"><b>' + place.displayName + '</b></div>' + '<div id="address">' + place.formattedAddress + '</div>' + '<a href="' + authorUri + '" target="_blank">Author: ' + authorName + '</a>' + '<div id="rating">Rating: ' + reviewRating + ' stars</div>' + '<div id="rating""><p>Review: ' + reviewText + '</p></div>'; // Create an info window. infoWindow = new InfoWindow({ content: contentString, ariaLabel: place.displayName, }); // Add a marker for the place. const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); // Show the info window. infoWindow.open({ anchor: marker, map, }); }
Weitere Informationen zu Rezensionen zu Orten
Quellenangaben für ein Foto anzeigen
Wenn in Ihrer App Fotos zu sehen sind, müssen Sie für jedes Foto die Autorenangabe anzeigen, falls vorhanden.
Details zum Foto in einem Place-Objekt einer Antwort sind im photos-Array enthalten. Um das photos-Array der Antwort hinzufügen, fügen Sie das photos-Datenfeld in die Anfrage ein.
Jedes Element des Foto-Arrays ist eine Instanz von Photo, das das authorAttributions-Array vom Typ „AuthorAttribution“ enthält. Die Felder des AuthorAttribution-Objekts sind Strings, die displayName, uri und photoUri der Quellenangaben enthalten, oder einen leeren String, wenn es keine anzuzeigende Quellenangabe gibt.
Dokumentation zu Fotos von Orten
Attributionen für Suchergebnisse
Wenn in Europa das unverfälschte Ranking von Google verwendet wird, müssen Suchprodukte einen Erläuterungstext enthalten, der sich maximal einen Klick entfernt befindet und die Hauptfaktoren und die Gewichtung der Hauptfaktoren beschreibt, die das Ranking der Suchergebnisse bestimmen. Erläuternder Text:
Header: Zu diesen Ergebnissen
Textkörper: Wenn Sie nach Unternehmen oder Orten in der Nähe eines Standorts suchen, werden auf Google Maps lokale Suchergebnisse angezeigt. Damit Ihre Suche zu den bestmöglichen Ergebnissen führt, werden verschiedene Faktoren kombiniert. Die wichtigsten sind Relevanz, Entfernung und Bekanntheit.
Schaltfläche 1: Weitere Informationen
Der Text „Weitere Informationen“ sollte auf einen Hilfeartikel verlinken.
Schaltfläche 2: „Ok“
Stilrichtlinien für Google-Quellenangaben
Im Folgenden finden Sie Stilrichtlinien für Google-Quellenangaben in CSS und HTML, wenn Sie nicht das herunterladbare Google-Logo verwenden können.
Speicherplatz freigeben
Der Freiraum um das Logo mit Claim sollte mindestens so groß sein wie die Höhe des „G“ in Google.
Der Abstand zwischen der Quellenangabe und dem Google-Logo sollte halb so breit sein wie das „G“.
Lesbarkeit
Die Verfasserzeile sollte immer klar und deutlich lesbar sein und in der richtigen Farbvariante für einen bestimmten Hintergrund erscheinen. Wichtig ist, dass die von Ihnen gewählte Logovariante genügend Kontrast bietet.
Farbe
Verwenden Sie Google Material Gray 700 für Text auf einem weißen oder hellen Hintergrund, der einen Bereich mit einer maximalen Schwarztönung von 0 %–40 % hat.
#5F6368 RGB 95 99 104 HSL 213 5 39 HSB 213 9 41
Auf dunkleren Hintergründen und über Fotos oder unauffälligen Mustern verwenden Sie weißen Text für die Verfasserzeile und Quellenangabe.
#FFFFFF RGB 255 255 255 HSL 0 0 100 HSB 0 0 100
Schriftart
Verwenden Sie die Schriftart Roboto.
Beispiel-CSS
Wenn das folgende CSS auf den Text „Google“ angewendet wird, wird dieser mit der entsprechenden Schriftart, Farbe und den entsprechenden Abständen auf einem weißen oder hellen Hintergrund dargestellt.
font-family: Roboto; font-style: normal; font-weight: 500; font-size: 16px; line-height: 16px; padding: 16px; letter-spacing: 0.0575em; /* 0.69px */ color: #5F6368;