Best practice

Best practice per JS

Comportamento di override e compatibilità della libreria

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 l'API Maps JavaScript non funzionante. 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.

Ottimizzazione delle prestazioni interne

Per migliorare la velocità di caricamento della pagina, l'API Maps JavaScript potrebbe posticipare internamente il caricamento dei contenuti interattivi finché l'elemento o il contenitore non si avvicina all'area visibile. Queste ottimizzazioni interne sono soggette a modifiche in qualsiasi momento, senza preavviso. Sono progettati per migliorare le prestazioni e non devono essere utilizzati come meccanismo per la gestione della fatturazione. Per assicurarti che non vengano addebitati costi di fatturazione finché un elemento non è visibile, rimanda la sua creazione nel codice dell'applicazione.

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 sostituire gli stili di 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 di mappa.

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

Questo tipo di reset CSS può causare conflitti CSS con l'API Maps JavaScript, perché l'API non supporta le modifiche al foglio di stile dello user agent. Ulteriori conflitti CSS possono verificarsi se il framework o il componente fa riferimento a classi CSS o elementi DOM dell'API Maps JavaScript.

Per evitare questi conflitti, abbiamo diversi suggerimenti da considerare.

Specificità

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

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

Per risolvere il problema, puoi aggiornare l'elemento img della 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 che provocano un errore nel tuo sito web senza preavviso. Ti consigliamo invece di creare le tue classi CSS come contenitori per la mappa.

Se un framework CSS o un componente JavaScript utilizza questo tipo di riferimenti, il nostro suggerimento di override del dimensionamento della casella potrebbe fungere da soluzione alternativa.

Override del box-sizing CSS

Gli override del box-sizing CSS forniscono una possibile soluzione alternativa per i conflitti di stile di mappa. Questo 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 quanto segue:

  • 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;
}