Requisitos de atribución para el kit de IU de Places

En este tema, se proporcionan los requisitos de atribución para el kit de IU de Places. Para conocer los demás requisitos del kit de IU de Places, consulta las Condiciones del Servicio de Google Maps Platform.

Atribución de Google Maps incluida

La atribución de Google Maps se incluye en el kit de herramientas de la IU de Places.

  • No quites la atribución incluida, independientemente de dónde se muestre. No alteres, ocultes ni oscurezcas la atribución, y asegúrate de que se vea fácilmente en el fondo.
  • Siempre distingue visualmente el contenido de Google Maps Platform del resto con indicadores de la IU, como un borde, un color de fondo, una sombra o suficiente espacio en blanco.
  • Cuando realices modificaciones visuales, debes cumplir con los requisitos de atribución de Google Maps. Para obtener más información, consulta la siguiente sección.

Ejemplo de atribución del kit de IU de Places

Ejemplo de atribución del kit de IU de Places en un mapa que no es de Google

Atribución obligatoria aplicada al componente compacto de Place Details. En este mapa que no es de Google, la atribución de Google Maps se puede ver claramente, y el contenido de Google Maps Platform se diferencia visualmente de otro contenido.

La atribución debe tener el logotipo de Google Maps siempre que sea posible. En los casos en que el espacio es limitado, se acepta el texto Google Maps. Los usuarios finales siempre deben tener claro qué contenido proporciona Google Maps.

Izquierda: Atribución del logotipo de Google Maps. Derecha: Atribución de texto de Google Maps
Izquierda: Atribución del logotipo de Google Maps, derecha: Atribución de texto de Google Maps

Atribución del logotipo

Sigue estos requisitos para usar el logotipo de Google Maps en tu app o sitio web.
Variaciones aceptables para la atribución del logotipo de Google Maps
Variaciones aceptables para la atribución del logotipo de Google Maps

Descarga logotipos de Google Maps

Usa los archivos oficiales del logotipo de Google Maps. Descarga los logotipos que se indican a continuación y sigue los lineamientos de esta sección.

Descarga: google_logo_ui_kit.zip

Cuando uses el logotipo de Google Maps, sigue estos lineamientos.

  • No modifiques el logotipo de ninguna manera.
  • Mantén la relación de aspecto del logotipo para evitar distorsiones.
  • Usa el logotipo con contorno sobre un fondo cargado, como un mapa o una imagen.
  • Usa el logotipo sin contornos sobre un fondo liso, como un color sólido o un gradiente sutil.

Especificaciones de tamaño del logotipo

Sigue estas especificaciones de tamaño para el logotipo de Google Maps:
  • Altura mínima del logotipo: 16 dp
  • Altura máxima del logotipo: 19 dp
  • Espacio libre mínimo del logotipo: 10 dp en la izquierda, la derecha y la parte superior, y 5 dp en la parte inferior

Para obtener información sobre los dp, consulta Densidad de píxeles en el sitio web de Material Design.

Logotipo de Google Maps que muestra el espacio libre mínimo y el rango de tamaño aceptable
Logotipo de Google Maps que muestra el espacio mínimo despejado y el rango de tamaño aceptable

Accesibilidad del logotipo

Sigue estos requisitos de accesibilidad para el logotipo de Google Maps:
  • Mantén un contraste accesible entre el logotipo y el fondo.
  • Incluye una etiqueta de accesibilidad con el texto Google Maps.
Variaciones inaceptables y problemas de accesibilidad para la atribución del logotipo de Google Maps
Variaciones inaceptables y problemas de accesibilidad en la atribución del logotipo de Google Maps

Atribución de texto

Si el tamaño de tu interfaz no admite el uso del logotipo de Google Maps, puedes escribir Google Maps en texto. Por ello, sigue estos lineamientos:

Variaciones aceptables de la atribución de texto de Google Maps
Variaciones aceptables de la atribución de texto de Google Maps
  • No modifiques el texto Google Maps de ninguna manera:
    • No cambies la mayúscula de Google Maps.
    • No unes Google Maps en varias líneas.
    • No localices Google Maps a otro idioma.
    • Evita que los navegadores traduzcan Google Maps con el atributo HTML translate="no".
Variaciones inadmisibles de la atribución de texto de Google Maps
Variaciones inaceptables de la atribución de texto de Google Maps
  • Aplica diseño al texto de Google Maps como se describe en la siguiente tabla:

    Requisitos de diseño de texto de Google Maps
    Propiedad Estilo
    Familia de fuentes Roboto. Cargar la fuente es opcional.
    Familia de fuentes de resguardo Cualquier fuente Sans Serif para el cuerpo que ya se use en tu producto o "Sans-Serif" para invocar la fuente del sistema predeterminada
    Estilo de fuente Normal
    Grosor de la fuente 400
    Color de la fuente Blanco, negro (#1F1F1F) o gris (#5E5E5E). Mantén un contraste (4.5:1) accesible con el fondo.
    Tamaño de fuente Tamaño de fuente mínimo: 12 sp
    Tamaño de fuente máximo: 16 sp
    Para obtener información sobre sp, consulta Unidades de tamaño de fuente en el sitio web de Material Design.
    Espacio entre letras Normal

Ejemplo de CSS

El siguiente CSS renderiza Google Maps con el estilo y el color tipográficos adecuados sobre un fondo blanco o claro.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.GMP-attribution {
font-family: Roboto, Sans-Serif;
font-style: normal;
font-weight: 400;
font-size: 1rem;
letter-spacing: normal;
white-space: nowrap;
color: #5e5e5e;
}

Requisitos visuales

Sigue estos requisitos para el tratamiento visual de la atribución de Google Maps.
  • Posiciona la atribución cerca de la parte superior o inferior del contenido y dentro del mismo contenedor visual. En el caso de una sola línea de contenido, la atribución se puede colocar a la derecha o a la izquierda.

  • Distingue visualmente el contenido de Google Maps Platform del resto con indicadores de la IU, como un borde, un color de fondo, una sombra o espacio en blanco suficiente.

  • No tergiverses Google Maps atribuyéndolo a contenido que no sea de Google Maps Platform.
  • Asegúrate de que la atribución siempre sea visible y legible. Nunca lo quites, ocultes, oscurezcas ni modifiques.

En las siguientes imágenes, se muestran ejemplos de estos requisitos visuales.

Ejemplo de atribución de Google Maps ubicada en la parte superior, inferior y lateral del contenido
Ejemplo de atribución de Google Maps ubicada en la parte superior, inferior y lateral del contenido

Ejemplo de tres enfoques para diferenciar el contenido de Google Maps (la calificación del lugar) de otro contenido
Ejemplo de tres enfoques para diferenciar el contenido de Google Maps (la calificación del lugar) de otro contenido

No ocultes la atribución de Google Maps ni la mezcles con contenido de otras fuentes.
No ocultes la atribución de Google Maps ni la mezcles con contenido de otras fuentes