Bonnes pratiques

Bonnes pratiques JS

L'API Maps JavaScript ne fonctionne qu'avec un environnement standard ECMAScript et DOM W3C. Cela signifie que si vous modifiez ou remplacez le comportement des classes et des objets intégrés fournis par le navigateur, l'API Maps JavaScript peut ne plus fonctionner. D'autres bibliothèques peuvent parfois être en conflit avec l'API Maps JavaScript si elles modifient le comportement du navigateur, de sorte qu'il ne s'agisse plus d'un environnement ECMAScript standard. L'API Maps JavaScript n'est pas compatible avec ces bibliothèques.

Bibliothèques dont l'incompatibilité avec l'API Maps JavaScript est connue :

  • Prototype : remplace Array.from() et Element.prototype.remove() de manière non standard.
  • MooTools (anciennes versions) : remplace Array.from() de manière non standard.
  • DateJS (anciennes versions) : remplace Date.now() de manière non standard.

Il est parfois possible de modifier des bibliothèques incompatibles pour supprimer les remplacements non standards.

Bonnes pratiques CSS

Lorsque vous ajoutez ou personnalisez une carte avec l'API Maps JavaScript, certains styles que vous appliquez à votre page Web peuvent remplacer vos styles de carte et provoquer des conflits CSS. Si vous utilisez un framework CSS ou un composant JavaScript pour le style, ils peuvent également créer des conflits CSS avec vos styles de carte.

Les frameworks CSS et les composants de style JavaScript utilisent souvent une réinitialisation CSS ou un normaliseur pour gérer les différences d'affichage entre les navigateurs. Les frameworks utilisent souvent l'élément box-sizing pour ajuster les marges et les bordures des éléments de la page Web. Cela implique généralement de modifier le comportement par défaut du navigateur pour passer de content-box à border-box.

Ce type de réinitialisation CSS peut entraîner des conflits entre le CSS et l'API Maps JavaScript, car cette API ne prend pas en charge les modifications apportées à la feuille de style de l'user-agent. Des conflits CSS supplémentaires peuvent se produire si le framework ou le composant fait référence à des classes CSS ou à des éléments DOM de l'API Maps JavaScript.

Pour éviter ces conflits, nous vous proposons plusieurs recommandations.

Spécificité

Le CSS intégré et lié est appliqué à votre carte avant les styles Google Maps. Si tous vos styles de page sont définis dans des CSS intégrés ou liés, suivez les règles de spécificité pour vous assurer que les bons styles sont appliqués à votre carte.

Les éléments CSS courants tels que img, button et a peuvent être remplacés par les styles de votre page. Si l'attribut max-width de l'élément img est défini sur 100 %, des composants de la carte peuvent être déformés ou masqués, en particulier si vous utilisez InfoWindow. C'est un exemple de conflit qui se produit couramment.

Pour résoudre ce problème, vous pouvez mettre à jour l'élément img de votre carte afin que l'attribut max-width soit défini sur none. Exemple :

#map img
{
    max-width : none;
}

Noms des classes

Ne référencez pas les noms des classes ni les éléments DOM internes de l'API Maps JavaScript. Cette pratique n'est pas prise en charge et peut entraîner des modifications destructives de votre site Web sans préavis. Nous vous recommandons plutôt de créer vos propres classes CSS en tant que conteneurs pour votre carte.

Si un framework CSS ou un composant JavaScript utilise ce type de références, notre recommandation de remplacement de "box-sizing" peut servir de solution de contournement.

Remplacer "box-sizing" dans le CSS

Le remplacement de "box-sizing" dans le CSS permet d'éviter les conflits de styles de carte. Cela peut être particulièrement utile si vous utilisez un framework CSS ou un composant de style JavaScript. Par exemple, si box-sizing est défini sur border-box, essayez la méthode suivante :

  • Créez un remplacement de box-sizing qui définit l'élément <html> sur border-box.
  • Utilisez box-sizing: inherit pour tous les éléments autres que votre carte.
  • Créez un conteneur de carte personnalisé qui rétablit l'élément box-sizing sur initial.

Exemple de CSS :

html {
  box-sizing: border-box;
}

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

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