# Mejores Prácticas
# Prácticas Recomendadas de JS
La API de JavaScript de Maps solo funciona con un entorno estándar ECMAScript y W3C DOM. Esto significa que modificar o anular el comportamiento de las clases integradas y los objetos proporcionados por el navegador podría hacer que la API de JavaScript de Maps no funcione. A veces, otras bibliotecas pueden entrar en conflicto con la API de JavaScript de Maps al cambiar el comportamiento del navegador para que deje de ser un entorno ECMAScript estándar. La API de JavaScript de Maps no es compatible con esas bibliotecas.
# Mejores Prácticas de CSS
Cuando agrega o personaliza un mapa con la API de JavaScript de Maps, algunos de los estilos que aplica a su página web pueden anular los estilos de su mapa y causar conflictos de CSS. Si utiliza un marco CSS o un componente JavaScript para diseñar, esto podría agregar conflictos CSS adicionales con los estilos de su mapa.
Los marcos CSS y los componentes de estilo JavaScript a menudo usan un restablecimiento de CSS o un normalizador para manejar las diferencias de representación entre los navegadores. Los marcos a menudo usan el elemento box-sizing para escalar los márgenes y bordes de los elementos de la página web. Esto generalmente implica cambiar el comportamiento predeterminado del navegador de usar content-box a border-box.
Este tipo de restablecimiento de CSS puede provocar conflictos de CSS con la API de JavaScript de Maps porque la API no admite cambios en la hoja de estilo del agente de usuario. Pueden ocurrir conflictos CSS adicionales si el marco o el componente hace referencia a clases CSS o elementos DOM de la API de JavaScript de Maps.
Para evitar estos conflictos, tenemos varias recomendaciones a considerar.
# Especificidad
El CSS incrustado y vinculado se aplica a su mapa antes que los estilos de Geodir Maps. Si todos los estilos de su página están definidos en CSS incrustado o vinculado, siga las reglas de especificidad (opens new window) para asegurarse de que se aplican los estilos correctos a su mapa.
Los elementos comunes de CSS, como img, button, y a pueden ser sobrescritos por los estilos de su página. Uno de los escenarios más comunes es cuando el atributo max-width del elemento img se establece en 100 por ciento. Esto puede causar componentes del mapa distorsionados u ocultos, especialmente si está utilizando InfoWindow.
Para solucionar este problema, puede actualizar el elemento img de su mapa para que el atributo max-width se establezca en none. Por ejemplo:
#map img {
max-width : none;
}
# Nombres de Clases
No haga referencia a nombres de clases ni a elementos DOM internos de la API de mapas de JavaScript. Esto no es compatible y puede causar cambios importantes en su sitio web sin previo aviso. En su lugar, le recomendamos que cree sus propias clases CSS como contenedores para su mapa.
Si un marco de CSS o un componente de JavaScript utiliza este tipo de referencias, nuestra recomendación de anulación de tamaño de caja podría servir como una solución alternativa.
# Anulación de box-sizing de CSS
Las anulaciones de box-sizing de CSS proporcionan una posible solución para los conflictos de estilo de los mapas. Esto puede resultar especialmente útil si utiliza un marco CSS o un componente de estilo JavaScript. Por ejemplo, si box-sizing se establece en border-box, intente lo siguiente:
- Cree una anulación de
box-sizingque establezca el elemento<html>enborder-box. - Use
box-sizing: heredarpara todos los elementos que no sean su mapa. - Cree un contenedor de mapas personalizado que restablezca el elemento
box-sizingainitial.
Ejemplo de CSS:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}