Prácticas recomendadas

Prácticas recomendadas para JS

La API de Maps JavaScript solo funciona con un entorno estándar de ECMAScript y W3C DOM. Esto significa que, si se modifica o se anula el comportamiento de las clases y los objetos integrados que proporciona el navegador, la API de Maps JavaScript podría no funcionar. A veces, otras bibliotecas pueden entrar en conflicto con la API de Maps JavaScript si cambian el comportamiento del navegador para que ya no sea un entorno estándar de ECMAScript. La API de Maps JavaScript no es compatible con esas bibliotecas.

Bibliotecas que sabemos que son incompatibles con la API de Maps JavaScript:

  • Prototype: Anula Array.from() y Element.prototype.remove() de maneras no estándares.
  • MooTools (versiones anteriores): Anula Array.from() de manera no estándar.
  • DateJS (versiones anteriores): Anula Date.now() de manera no estándar.

A veces, es posible modificar bibliotecas incompatibles para quitar las anulaciones no estándares.

Prácticas recomendadas para CSS

Cuando agregas o personalizas un mapa con la API de Maps JavaScript, es posible que algunos de los diseños que apliques en tu página web anulen los diseños del mapa y generen conflictos de CSS. Si usas un framework de CSS o un componente de JavaScript para definir los diseños, esto podría generar conflictos de CSS adicionales con los diseños del mapa.

Los frameworks de CSS y los componentes de diseño de JavaScript suelen usar un restablecimiento de CSS o un normalizador para controlar las diferencias de renderización entre los navegadores. Los frameworks suelen usar el elemento box-sizing para aumentar la escala de los márgenes y los bordes de los elementos de las páginas web. Por lo general, esto implica cambiar el comportamiento predeterminado del navegador de content-box a border-box.

Este tipo de restablecimiento de CSS puede causar conflictos de CSS con la API de Maps JavaScript porque la API no admite cambios en la hoja de estilo del usuario-agente. A su vez, pueden ocurrir conflictos de CSS adicionales si el framework o el componente hacen referencia a clases de CSS o elementos del DOM de la API de Maps JavaScript.

Para evitar estos conflictos, ten en cuenta las siguientes recomendaciones.

Especificidad

El código CSS incorporado y vinculado se aplica a tu mapa antes que los diseños de los mapas de Google. Si todos los diseños de tu página están definidos en CSS incorporados o vinculados, sigue las reglas de especificidad para asegurarte de que se apliquen los diseños correctos en tu mapa.

Los elementos comunes de CSS, como img, button y a, se pueden reemplazar por los diseños de tu página. Una de las situaciones más comunes ocurre cuando el atributo max-width del elemento img se establece en 100%. Esto puede generar que los componentes del mapa se distorsionen o queden ocultos, en especial, si usas InfoWindow.

Para solucionar este problema, puedes actualizar el elemento img de tu mapa de modo que el atributo max-width se establezca en none. Por ejemplo:

#map img
{
    max-width : none;
}

Nombres de clases

No hagas referencia a nombres de clases ni elementos del DOM internos de la API de Maps JavaScript. Esto no se admite y puede causar cambios rotundos en tu sitio web sin previo aviso. En cambio, te recomendamos que crees tus propias clases de CSS como contenedores para tu mapa.

Si un framework de CSS o un componente de JavaScript usan este tipo de referencias, nuestra recomendación de anulación de la propiedad box-sizing puede servir como solución alternativa.

Anulación de la propiedad box-sizing en CSS

Las anulaciones de la propiedad box-sizing en CSS brindan una posible solución para los conflictos de diseño de mapas. Esto puede ser especialmente útil si usas un framework de CSS o un componente de diseño de JavaScript. Por ejemplo, si box-sizing se estableció como border-box, prueba lo siguiente:

  • Crea una anulación de box-sizing que establezca el elemento <html> en border-box.
  • Usa box-sizing: inherit para todos los elementos ajenos a tu mapa.
  • Crea un contenedor de mapa personalizado que restablezca el elemento box-sizing en initial.

Ejemplo de CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}