Règles de l'API Maps JavaScript

Cette rubrique décrit les exigences concernant l'attribution pour toutes les applications développées avec l'API Maps JavaScript, y compris le service Place Autocomplete inclus dans cette API. Pour en savoir plus, consultez les Conditions d'utilisation de Google Maps Platform.

Mentionner les conditions d'utilisation et règles de confidentialité

Si vous développez une application API Maps JavaScript, vous devez mettre à disposition les Conditions d'utilisation et des Règles de confidentialité avec votre application conformément aux consignes décrites dans votre contrat avec Google :

  • Les conditions d'utilisation et les règles de confidentialité doivent être publiques.
  • Vous devez stipuler explicitement dans les conditions d'utilisation qu'en utilisant votre application, les utilisateurs sont tenus de respecter les Conditions d'utilisation de Google.
  • Dans vos règles de confidentialité, vous devez informer les utilisateurs que vous avez recours aux API Google Maps et intégrer les Règles de confidentialité de Google pour référence.

L'emplacement recommandé pour insérer vos conditions d'utilisation et règles de confidentialité dépend de la plate-forme de votre application.

Applications mobiles

Si vous développez une application mobile, nous vous recommandons de fournir un lien vers les conditions d'utilisation et règles de confidentialité sur la page de téléchargement de votre application (sur la plate-forme concernée) et dans le menu des paramètres de l'application.

Applications Web

Si vous développez une application Web, nous vous recommandons de fournir un lien vers les conditions d'utilisation et les règles de confidentialité dans le pied de page de votre site Web.

Préchargement, mise en cache ou stockage de contenu

Les applications qui utilisent l'API Maps JavaScript sont liées par les conditions de votre contrat avec Google. Conformément aux dispositions de votre contrat, vous ne devez précharger, indexer, stocker ni mettre en cache aucun contenu, sauf conformément aux conditions limitées énoncées dans les dispositions.

Notez que l'ID de lieu, qui permet d'identifier un lieu de façon unique, n'est pas soumis aux restrictions de mise en cache. L'ID de lieu s'affiche dans le champ place_id des réponses de l'API Maps JavaScript. Découvrez comment enregistrer, actualiser et gérer les ID de lieu dans le guide des ID de lieu.

Affichage des résultats de l'API Maps JavaScript

Vous pouvez afficher les résultats de l'API Maps JavaScript sur une carte Google ou sans carte. Si vous souhaitez afficher les résultats de l'API Maps JavaScript sur une carte, il doit s'agir d'une carte Google. Il est interdit d'utiliser les données de l'API Maps JavaScript sur une carte non Google.

Si votre application affiche des données sur une carte Google, vous devez inclure le logo Google sans le modifier. Les applications qui affichent des données Google sur le même écran qu'une carte Google ne sont pas tenues de fournir d'autres informations d'attribution à Google.

Si votre application affiche des données sur une page ou une vue sans carte Google, vous devez accompagner ces données du logo Google. Par exemple, si votre application affiche des données Google dans un onglet et une carte Google avec ces données dans un autre onglet, le premier onglet doit afficher le logo Google. Si votre application utilise des champs de recherche avec ou sans saisie semi-automatique, le logo doit être visible sur la même ligne ou juste à côté.

Le logo Google doit être positionné en bas à gauche de la carte et les informations d'attribution doivent être placées en bas à droite. Ces deux éléments doivent s'afficher entièrement sur la carte, et non en dessous de la carte ni à un autre endroit dans l'application. L'exemple de carte suivant montre le logo Google en bas à gauche de la carte et l'attribution en bas à droite.

Emplacement de l'attribution pour une règle donnée

Le fichier zip suivant contient le logo Google dans les dimensions appropriées pour les applications de bureau, Android et iOS. Vous ne devez en aucun cas redimensionner ni modifier ces logos.

Télécharger : google_logo.zip

Ne modifiez pas l'attribution. Vous ne devez pas supprimer, masquer ni rogner les informations d'attribution. Vous ne pouvez pas utiliser les logos Google en les intégrant (par exemple, "Ces cartes proviennent de [Google_logo]").

Placez les informations d'attribution à proximité du contenu. Si vous utilisez des captures d'écran d'images Google en dehors d'intégrations directes, incluez l'attribution standard telle qu'elle apparaît dans l'image. Si nécessaire, vous pouvez personnaliser le style et l'emplacement du texte d'attribution à condition qu'il soit placé à proximité du contenu et lisible par un utilisateur lambda. Vous n'êtes pas autorisé à déplacer l'attribution en dehors du contenu, par exemple à la fin de votre livre, dans les crédits de vos fichiers ou de votre émission, ou dans le pied de page de votre site Web.

Indiquez les fournisseurs de données tiers. Dans nos produits de cartographie, certaines données et images proviennent de fournisseurs autres que Google. Si vous utilisez de telles images, le texte de votre attribution doit mentionner le nom "Google" et les fournisseurs de données concernés (par exemple, "Données cartographiques : Google, Maxar Technologies"). Lorsque des fournisseurs de données tiers sont cités avec les images, la seule mention de "Google" ou du logo Google ne constitue pas une information d'attribution suffisante.

Si vous utilisez Google Maps Platform sur un appareil où il n'est pas pratique d'afficher les informations d'attribution, veuillez contacter l'équipe commerciale Google pour discuter des licences adaptées à votre situation.

Autres exigences concernant l'attribution

Procédez comme suit pour récupérer des informations d'attribution tierces et les afficher dans votre application.

.

Récupérer les attributions à partir d'un lieu

Si votre application affiche des avis en appelant Place.fetchFields, elle doit aussi afficher les attributions tierces correspondant aux informations obtenues sur le lieu.

L'API affiche un objet Place. Pour récupérer les attributions de l'objet Place, utilisez la propriété Place.attributions, qui s'affiche pour chaque requête (il est inutile de la spécifier à l'aide de champs). La propriété affiche une List d'objets String (ou null s'il n'y a aucune attribution à afficher). L'exemple de code suivant montre comment récupérer un lieu et afficher les attributions.

  // 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);
      }
  }

  

Afficher un avis

Un objet Place peut contenir jusqu'à cinq avis, chacun étant représenté par un objet Review. Si vous le souhaitez, vous pouvez afficher ces avis dans votre application.

Lorsque vous affichez des avis provenant d'utilisateurs de Google, vous devez insérer le nom de l'auteur à proximité immédiate. Nous vous recommandons d'inclure également la photo de l'auteur et le lien vers son profil s'ils sont disponibles dans le champ de l'objet Review contenant les informations sur l'auteur. L'image suivante montre un exemple d'avis sur un parc :

Affichage des informations sur l'auteur

L'exemple suivant montre comment récupérer un lieu, consulter les avis et afficher les données du premier avis :

  // 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,
      });
  }
  

Consultez la documentation sur les avis sur les lieux.

Afficher les attributions pour une photo

Si votre application affiche des photos, vous devez mentionner des informations sur l'auteur de chacune d'elles. Les informations sur la photo dans un objet Place d'une réponse sont incluses dans le tableau photos. Pour ajouter le tableau photos à la réponse, incluez le champ de données photos dans la requête.

Chaque élément du tableau "photos" est une instance de Photo, qui contient le tableau authorAttributions, de type AuthorAttribution. Les champs de l'objet AuthorAttribution sont des chaînes contenant les éléments displayName, uri et photoUri de l'attribution, ou une chaîne vide s'il n'y a aucune attribution à afficher.

Consultez la documentation sur les photos de lieux.

Attributions des résultats de recherche

En Europe, lorsque vous utilisez le classement non modifié de Google, les produits de recherche doivent comporter un texte explicatif accessible en un clic qui décrit les principaux facteurs et leur pondération qui déterminent le classement des résultats de recherche. Texte explicatif:

En-tête:À propos de ces résultats

Corps:Lorsque vous recherchez des établissements ou des lieux à proximité d'un emplacement, Google Maps affiche les résultats à proximité. Plusieurs facteurs (essentiellement la pertinence, la distance et la proéminence) sont combinés afin de trouver les meilleurs résultats pour votre recherche.

Bouton 1:En savoir plus
Le texte "En savoir plus" doit rediriger vers un article du centre d'aide.

Bouton 2:OK

Consignes de style pour l'attribution Google

Vous trouverez ci-dessous les consignes à appliquer concernant le style des attributions Google en CSS et HTML si vous ne pouvez pas utiliser le logo Google téléchargeable.

Espacement

L'espacement autour du logo complet doit être égal ou supérieur à la hauteur du "G" de Google.

L'espacement entre le texte d'attribution et le logo Google doit correspondre à la moitié de la largeur du "G".

Lisibilité

Le nom de l'auteur doit toujours s'afficher de façon claire et lisible, dans une variante de couleur adaptée à l'arrière-plan. Veillez à toujours prévoir suffisamment de contraste pour la variante de logo que vous choisissez.

Couleur

Utilisez un texte en Google Material Gray 700 sur un arrière-plan clair ou blanc, avec une teinte de noir entre 0 % et 40 % maximum.

Google
#5F6368
RGB 95 99 104
HSL 213 5 39
HSB 213 9 41

Sur les arrière-plans plus sombres, et sur les photos ou motifs simples, utilisez un texte blanc pour le nom de l'auteur et l'attribution.

Google
#FFFFFF
RGB 255 255 255
HSL 0 0 100
HSB 0 0 100

Police

Utilisez la police Roboto.

Exemple d'élément CSS

L'élément CSS suivant appliqué au texte "Google" affichera "Google" avec les paramètres appropriés (police, couleur et espacement) sur un arrière-plan clair ou blanc.

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;