Best practice

Best practice per JavaScript

L'API Maps JavaScript funziona solo con un ambiente ECMAScript e W3C DOM standard. Ciò significa che la modifica o l'override del comportamento delle classi e degli oggetti integrati forniti dal browser potrebbe rendere non funzionale l'API Maps JavaScript. A volte altre librerie possono entrare in conflitto con l'API Maps JavaScript modificando il comportamento del browser in modo che non sia più un ambiente ECMAScript standard. L'API Maps JavaScript non è compatibile con queste librerie.

Librerie note per essere incompatibili con l'API Maps JavaScript:

  • Prototipo: esegue l'override di Array.from() e Element.prototype.remove() in modi non standard.
  • MooTools (versioni precedenti): esegue l'override di Array.from() in modo non standard.
  • DateJS (versioni precedenti): esegue l'override di Date.now() in modo non standard.

A volte è possibile modificare le librerie incompatibili per rimuovere gli override non standard.

Best practice per i CSS

Quando aggiungi o personalizzi una mappa con l'API Maps JavaScript, alcuni degli stili che applichi alla tua pagina web potrebbero ignorare gli stili della mappa e causare conflitti CSS. Se utilizzi un framework CSS o un componente JavaScript per lo stile, potrebbero verificarsi ulteriori conflitti CSS con gli stili della mappa.

I framework CSS e i componenti di stile JavaScript spesso utilizzano un reset CSS o un normalizzatore per gestire le differenze di rendering tra i browser. I framework spesso utilizzano l'elemento box-sizing per scalare i margini e i bordi degli elementi della pagina web. In genere, ciò comporta la modifica del comportamento predefinito del browser dall'utilizzo di content-box a border-box.

Questo tipo di reimpostazione CSS può causare conflitti CSS con l'API Maps JavaScript perché l'API non supporta le modifiche al foglio di stile dell'agente utente. Possono verificarsi conflitti CSS aggiuntivi se il framework o il componente fa riferimento a classi CSS o a elementi DOM dell'API Maps JavaScript.

Per evitare questi conflitti, abbiamo diversi consigli da prendere in considerazione.

Specificità

Il CSS incorporato e collegato viene applicato alla mappa prima degli stili di Google Maps. Se tutti gli stili della pagina sono definiti in CSS incorporati o collegati, segui le regole di specificità per assicurarti che gli stili corretti vengano applicati alla mappa.

Gli elementi CSS comuni, come img, button e a, possono essere sovrascritti dagli stili della tua pagina. Uno degli scenari più comuni si verifica quando l'attributo max-width dell'elemento img è impostato al 100%. Ciò può causare la distorsione o l'occultamento dei componenti della mappa, soprattutto se utilizzi InfoWindow.

Per risolvere il problema, puoi aggiornare l'elemento img per la mappa in modo che l'attributo max-width sia impostato su none. Ad esempio:

#map img
{
    max-width : none;
}

Nomi classe

Non fare riferimento ai nomi delle classi e agli elementi DOM interni dell'API Maps JavaScript. Questa operazione non è supportata e può causare modifiche sostanziali al tuo sito web senza preavviso. Ti consigliamo invece di creare classi CSS personalizzate come contenitori per la mappa.

Se un framework CSS o un componente JavaScript utilizza questi tipi di riferimenti, il nostro suggerimento di override di box-sizing potrebbe fungere da soluzione alternativa.

Override di box-sizing CSS

Gli override di box-sizing CSS forniscono una possibile soluzione alternativa per i conflitti di stile delle mappe. Ciò può essere particolarmente utile se utilizzi un framework CSS o un componente di stile JavaScript. Ad esempio, se box-sizing è impostato su border-box, prova a svolgere i seguenti passaggi:

  • Crea un override box-sizing che imposta l'elemento <html> su border-box.
  • Utilizza box-sizing: inherit per tutti gli elementi diversi dalla mappa.
  • Crea un contenitore di mappe personalizzato che reimposta l'elemento box-sizing su initial.

Esempio di CSS:

html {
  box-sizing: border-box;
}

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

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