Best practice per JS
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 potrebbero 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 essere incompatibili con l'API Maps JavaScript:
- Prototipo: esegue l'override di
Array.from()
eElement.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 applicati alla tua pagina web potrebbero sostituire gli stili di mappa e causare conflitti CSS. Se utilizzi un framework CSS o un componente JavaScript per gli stili, potrebbero essere aggiunti ulteriori conflitti CSS con gli stili di mappa.
I framework CSS e i componenti per gli stili JavaScript spesso utilizzano una reimpostazione 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 delle pagine web. In genere, questa operazione comporta la modifica del comportamento predefinito del browser da
content-box
a border-box
.
Questo tipo di reimpostazione CSS può causare conflitti CSS con l'API Maps JavaScript poiché l'API non supporta le modifiche al foglio di stile dello user agent. Se il framework o il componente fa riferimento a classi CSS o elementi DOM dell'API Maps JavaScript, possono verificarsi ulteriori conflitti CSS.
Per evitare questi conflitti, dobbiamo prendere in considerazione diversi consigli.
Specificità
Il codice CSS incorporato e collegato viene applicato alla mappa prima degli stili di Google Maps. Se tutti gli stili di pagina sono definiti in CSS incorporati o collegati, segui le regole di specificità per assicurarti che vengano applicati gli stili corretti alla mappa.
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 al 100%. Ciò può causare componenti della mappa distorti o nascosti, soprattutto se utilizzi InfoWindow.
Per risolvere il problema, puoi aggiornare l'elemento img
per la tua 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 di classi e a elementi DOM interni dell'API JavaScript Maps. Questa operazione non è supportata e può causare modifiche che provocano errori 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 del riquadro potrebbe fungere da soluzione alternativa.
Sostituzione delle dimensioni della casella CSS
Gli override delle dimensioni delle caselle CSS forniscono una possibile soluzione alternativa in caso di conflitti di stile delle mappe. Questa operazione 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 di
box-sizing
che imposti l'elemento<html>
suborder-box
. - Utilizza
box-sizing: inherit
per tutti gli elementi diversi dalla mappa. - Crea un contenitore di mappa personalizzato che reimposta l'elemento
box-sizing
suinitial
.
Esempio di CSS:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}