Best practice

Best practice per JS

L'API Maps JavaScript funziona solo con un ambiente ECMAScript e DOM W3C 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: sostituisce Array.from() e Element.prototype.remove() in modi non standard.
  • MooTools (versioni precedenti): sostituisce Array.from() in modo non standard.
  • DateJS (versioni precedenti): sostituisce Date.now() in modo non standard.

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

Best practice per i CSS

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

I framework CSS e i componenti di stile JavaScript utilizzano spesso un ripristino CSS o un normalizzatore 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 della pagina web. Di solito, questo 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 allo stile dell'agente utente. Possono verificarsi ulteriori conflitti CSS se il framework o il componente fa riferimento a classi CSS o 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 di pagina sono definiti in CSS incorporato o collegato, 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 si verifica quando l'attributo max-width dell'elemento img è impostato sul 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 non compatibili 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 per l'override delle dimensioni della casella potrebbe essere una soluzione alternativa.

Sostituzione della dimensione della casella CSS

Le sostituzioni delle dimensioni della casella CSS forniscono una possibile soluzione alternativa per i conflitti di stile delle mappe. 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 a svolgere i seguenti passaggi:

  • Crea un'override box-sizing che imposti l'elemento <html> su border-box.
  • Utilizza box-sizing: inherit per tutti gli elementi diversi dalla mappa.
  • Crea un contenitore della mappa 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;
}