Práticas recomendadas

Práticas recomendadas para JavaScript

A API Maps JavaScript só funciona com um ambiente ECMAScript e W3C DOM padrão. Portanto, a modificação ou a substituição do comportamento das classes e dos objetos integrados fornecidos pelo navegador pode fazer com que a API Maps JavaScript não funcione. Às vezes, outras bibliotecas podem entrar em conflito com a API Maps JavaScript mudando o comportamento do navegador para que ele não seja mais um ambiente ECMAScript padrão. A API Maps JavaScript não é compatível com essas bibliotecas.

Bibliotecas que não são compatíveis com a API Maps JavaScript:

  • Protótipo: substitui Array.from() e Element.prototype.remove() de formas não padrão.
  • MooTools (versões mais antigas): substitui o método Array.from() de uma forma não padrão.
  • DateJS (versões mais antigas): substitui o método Date.now() de uma forma não padrão.

Às vezes, é possível modificar bibliotecas incompatíveis para remover as substituições não padrão.

Práticas recomendadas para CSS

Quando você adiciona ou personaliza um mapa com a API Maps JavaScript, alguns dos estilos aplicados à sua página da Web podem modificar os estilos do mapa e causar conflitos de CSS. Se você usa um framework CSS ou um componente JavaScript para definir o estilo, isso pode causar outros conflitos de CSS aos estilos de mapa.

Os frameworks de CSS e os componentes de estilo de JavaScript geralmente usam uma redefinição ou um normalizador de CSS para lidar com as diferenças de renderização entre navegadores. Os frameworks geralmente usam o elemento box-sizing para dimensionar as margens e bordas dos elementos da página da Web. Isso geralmente envolve alterar o comportamento padrão do navegador de content-box para border-box.

Esse tipo de redefinição pode causar conflitos de CSS com a API Maps JavaScript porque a API não é compatível com mudanças na folha de estilo do user agent. Pode haver outros conflitos de CSS se a estrutura ou o componente referenciar classes CSS ou elementos DOM da API Maps JavaScript.

Para evitar esses conflitos, temos várias recomendações a considerar.

Especificidade

O CSS incorporado e vinculado é usado no mapa antes dos estilos do Google Maps. Se todos os estilos de página estiverem definidos em CSS incorporado ou vinculado, siga as regras de especificidade para garantir que os estilos corretos sejam usados no mapa.

Elementos CSS comuns, como img, button e a, podem ser substituídos pelos estilos da sua página. Um dos cenários mais comuns é quando o atributo max-width do elemento img é definido como 100%. Isso pode fazer com que os componentes fiquem distorcidos ou ocultos no mapa, especialmente se você estiver usando a janela de informações.

Para corrigir esse problema, atualize o elemento img do mapa para que o atributo max-width seja definido como none. Por exemplo:

#map img
{
    max-width : none;
}

Nomes de classes

Não faça referência a nomes de classe e elementos internos de DOM da API Maps JavaScript. Não há suporte para isso, e pode haver alterações interruptivas e inesperadas no seu site. Em vez disso, recomendamos que você crie suas próprias classes CSS como contêineres para o mapa.

Se um framework de CSS ou um componente JavaScript usar esses tipos de referências, nossa recomendação de modificação de dimensionamento de caixa pode servir como uma solução alternativa.

Substituição do dimensionamento da caixa CSS

As substituições de tamanho de caixa de CSS oferecem uma possível solução alternativa para conflitos de estilos de mapas. Isso pode ser útil principalmente se você estiver usando um framework CSS ou um componente de estilo JavaScript. Por exemplo, se box-sizing estiver definido como border-box, tente o seguinte:

  • Crie uma substituição de box-sizing que defina o elemento <html> como border-box.
  • Use box-sizing: inherit para todos os elementos além do mapa.
  • Crie um contêiner de mapa personalizado que redefina o elemento box-sizing como initial.

Exemplo de CSS:

html {
  box-sizing: border-box;
}

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

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