Este tema abarca los requisitos de atribución que deben cumplir todas las aplicaciones desarrolladas con la API de Maps JavaScript, incluido el servicio Place Autocomplete, que forma parte de esa API. Para conocer los demás requisitos de Google Maps Platform, consulta las Condiciones del Servicio de Google Maps Platform.
Divulgación de las Condiciones de Uso y la Política de Privacidad
Si desarrollas una aplicación con la API de Maps JavaScript, debes publicar en esa aplicación las Condiciones de Uso y la Política de Privacidad para satisfacer los lineamientos descritos en tu Acuerdo con Google:
- Las Condiciones de Uso y la Política de Privacidad deben estar disponibles públicamente.
- En las Condiciones de Uso de tu aplicación, debes indicar de forma explícita que, al utilizarla, los usuarios estarán vinculados a las Condiciones del Servicio de Google.
- En tu Política de Privacidad, debes notificar a los usuarios que utilizas las APIs de Google Maps y que incorporas por referencia la Política de Privacidad de Google.
El lugar recomendado para publicar tus Condiciones de Uso y tu Política de Privacidad dependerá de la plataforma de tu aplicación.
Aplicaciones para dispositivos móviles
Si desarrollas una aplicación para dispositivos móviles, te recomendamos que incluyas, en su página de descarga de la tienda de aplicaciones correspondiente y en un menú de parámetros de configuración de la aplicación, un vínculo a las Condiciones de Uso y la Política de Privacidad.
Aplicaciones web
Si desarrollas una aplicación web, te recomendamos que incluyas, en el pie de página de tu sitio web, un vínculo a las Condiciones de Uso y la Política de Privacidad.
Recuperación anticipada o almacenamiento (incluso en caché) del contenido
Las aplicaciones que utilizan la API de Maps JavaScript están vinculadas a las condiciones de tu Acuerdo con Google. Sujeto a las condiciones de tu Acuerdo, no debes recuperar anticipadamente, indexar ni almacenar en caché y otros medios ningún contenido, salvo de acuerdo con las condiciones limitadas que se indican allí.
Ten en cuenta que el ID del lugar, que se usa para identificar un lugar de forma unívoca, está exento de las restricciones de almacenamiento en caché. En las respuestas de la API de Maps JavaScript, el ID de lugar se devuelve en el campo place_id. Consulta la guía sobre los IDs de lugar para saber cómo guardarlos, actualizarlos y administrarlos.
Requisitos para mostrar los resultados de la API de Maps JavaScript
Puedes mostrar los resultados de la API de Maps JavaScript en un mapa de Google Maps o sin ningún mapa. Si deseas utilizar un mapa, deberás mostrar esos resultados en un mapa de Google Maps. Está prohibido usar los datos de la API de Maps JavaScript en un mapa que no sea de Google Maps.
Requisitos para mostrar el logotipo y las atribuciones de Google
Si tu aplicación muestra datos en un mapa de Google Maps, se incluirá el logotipo de Google y no se podrá alterar. Las aplicaciones que muestran datos de Google en la misma pantalla que contiene un mapa de Google Maps no requieren ninguna atribución adicional relacionada con Google.
En caso de que tu aplicación muestre datos en una página o vista que no incluya un mapa de Google Maps, deberás mostrar un logotipo de Google con esos datos. Por ejemplo, si tu aplicación muestra datos de Google en una pestaña y presenta un mapa de Google Maps con esos datos en otra pestaña, la primera pestaña deberá mostrar el logotipo de Google. Siempre que tu aplicación utilice campos de búsqueda con o sin autocompletado, el logotipo se deberá mostrar intercalado.
El logotipo de Google se debe colocar en la esquina inferior izquierda del mapa, con la información de atribución en la esquina inferior derecha, y ambos elementos se deben presentar como una unidad sobre el mapa, no debajo ni en ningún otro lugar de la aplicación. El siguiente mapa de ejemplo muestra el logotipo de Google en el extremo inferior izquierdo con la atribución a la derecha.
| Para uso sobre un fondo claro | Para uso sobre un fondo oscuro |
|---|---|
|
|
El siguiente archivo ZIP contiene el logotipo de Google en los tamaños correctos que se utilizan en aplicaciones para iOS, Android y computadoras. No debes cambiar el tamaño de estos logotipos ni modificarlos de ninguna manera.
Descarga: google_logo.zip
No modifiques la atribución. No quites, oscurezcas ni recortes la información de atribución. No puedes utilizar los logotipos de Google intercalado en el texto (por ejemplo, "Estos mapas son de [logotipo_de_Google]").
Muestra la atribución en una posición cercana. Si utilizas capturas de pantalla de imágenes de Google fuera de una incorporación directa, incluye la atribución estándar tal como aparece en la imagen. De ser necesario, puedes personalizar el diseño y la posición del texto de atribución, siempre y cuando ese texto quede colocado en una posición cercana al contenido y sea legible para el usuario o lector medio. No puedes mover la atribución a un lugar alejado del contenido (por ejemplo, para que aparezca al final de tu libro, en los créditos de tu programa o tus archivos, o en el pie de página de tu sitio web).
Incluye a los proveedores de datos de terceros. Algunos de los datos y las imágenes que se utilizan en nuestros productos de creación de mapas son de proveedores ajenos a Google. Si utilizas esas imágenes, el texto de tu atribución deberá indicar el nombre "Google" y los proveedores de datos correspondientes; por ejemplo, "Datos del mapa: Google y Maxar Technologies". No se considera una atribución adecuada incluir solo "Google" o el logotipo de Google cuando se citan proveedores de datos de terceros en las imágenes.
Si utilizas Google Maps Platform en un dispositivo en el que no resulta práctico mostrar la atribución, comunícate con el equipo de ventas de Google para informarte sobre las licencias adecuadas para tu caso de uso.
Otros requisitos de atribución
Sigue estas instrucciones para recuperar y mostrar atribuciones de terceros en tu aplicación.
Cómo recuperar las atribuciones de un lugar
Si muestra información de opiniones que se obtiene llamando a Place.fetchFields,
tu aplicación también deberá mostrar las atribuciones de terceros que correspondan a los detalles del lugar.
La API devuelve un objeto Place. Para recuperar las atribuciones del objeto Place, usa la propiedad Place.attributions, que se devuelve con cada solicitud (no hace falta especificarla con campos). La propiedad devuelve una List de objetos String, o bien null si no hay atribuciones para mostrar. El siguiente código de ejemplo muestra cómo obtener un lugar y una lista de posibles atribuciones.
// 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); } }
Cómo mostrar una opinión
Un objeto Place puede contener hasta cinco opiniones, cada una representada con un objeto Review. Opcionalmente, puedes mostrar esas opiniones en tu aplicación.
Cuando muestras opiniones de los usuarios de Google, debes colocar el nombre del autor en una posición cercana. Te recomendamos incluir la foto del autor y también el vínculo a su perfil si están disponibles en su campo de atribución del objeto Review. La siguiente imagen muestra un ejemplo de una opinión sobre un parque:
El siguiente ejemplo muestra cómo obtener un lugar, verificar si hay opiniones y mostrar los datos de la primera opinión:
// 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, }); }
Consulta la documentación sobre las opiniones de lugares.
Cómo mostrar las atribuciones de una foto
Si tu aplicación muestra fotos, debes incluir la atribución del autor de cada foto que la incluya.
En un objeto Place de una respuesta, los detalles de la foto se incluyen en el array photos. Para agregar el array photos a la respuesta, incluye el campo de datos photos en la solicitud.
Cada elemento del array de fotos es una instancia de Photo, que contiene el array authorAttributions, del tipo AuthorAttribution. Los campos del objeto AuthorAttribution son cadenas que contienen la información de displayName, uri y photoUri de la atribución, o bien una cadena nula si no hay atribuciones para mostrar.
Consulta la documentación sobre las fotos de lugares.
Atribuciones de resultados de la búsqueda
En Europa, cuando se utiliza la clasificación sin adulterar de Google, los productos de búsqueda deben tener un texto explicativo a no más de 1 clic de distancia que describa los factores principales y la ponderación de los factores principales que determinan la clasificación de los resultados de la búsqueda. Texto explicativo:
Encabezado: Acerca de estos resultados
Cuerpo: Cuando busques empresas o lugares cerca de una ubicación, Google Maps te mostrará resultados locales. Varios factores, principalmente la relevancia, la distancia y la importancia, se combinan para ayudarte a encontrar los mejores resultados para tu búsqueda.
Botón 1: Más información
El texto"Más información" debe dirigir a un artículo del Centro de ayuda.
Botón 2: Aceptar
Lineamientos de diseño para las atribuciones de Google
A continuación se indican los lineamientos de diseño para las atribuciones de Google en CSS y HTML, por si no puedes usar el logotipo de Google descargable.
Espacio libre
La cantidad de espacio libre alrededor del diseño final debería ser igual o más grande que la altura de la "G" de Google.
El espacio entre el texto de atribución y el logotipo de Google debería equivaler a la mitad del ancho de la "G".
Legibilidad
El rótulo debería aparecer siempre de forma clara y legible, en la combinación de colores adecuada según el fondo específico. Siempre debes asegurarte de proporcionar suficiente contraste para la variante del logotipo que selecciones.
Color
Usa un texto de color gris 700 según Material de Google, sobre un fondo blanco o claro en el que el tono de negro sea de un rango del 0 al 40% como máximo.
#5F6368 RGB 95 99 104 HSL 213 5 39 HSB 213 9 41
En fondos más oscuros, así como sobre fotografías o diseños no complejos, usa un texto de color blanco para el rótulo y la atribución.
#FFFFFF RGB 255 255 255 HSL 0 0 100 HSB 0 0 100
Fuente
Usa la fuente Roboto.
Ejemplo de CSS
Cuando se aplica al texto "Google", el siguiente código CSS renderizará "Google" con la fuente, el color y el espaciado adecuados sobre un fondo blanco o claro.
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;