Best practice per JS
L'API Maps JavaScript funziona solo con ECMAScript standard e DOM W3C completamente gestito di Google Cloud. Ciò significa che la modifica o l'override del comportamento dell'interfaccia le classi e gli oggetti forniti dal browser potrebbero rendere l'API Maps JavaScript non funzionale. A volte altre librerie possono entrare in conflitto con Maps JavaScript API modificando il comportamento del browser in modo che non sia più uno standard nell'ambiente ECMAScript. L'API Maps JavaScript non è compatibile con quelle librerie.
Librerie note per 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 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 potrebbe sostituire gli stili di mappa e causare conflitti CSS. Se utilizzi un framework CSS o un componente JavaScript per lo stile, l'applicazione potrebbe aggiungere altri conflitti CSS con gli stili di mappa.
I framework CSS e i componenti di stile JavaScript utilizzano spesso una reimpostazione CSS o
per gestire le differenze di rendering tra i browser. Framework spesso
utilizza l'elemento box-sizing
per ridimensionare i margini e i bordi della pagina web
elementi. Ciò comporta in genere la modifica del comportamento predefinito del browser
Da content-box
a border-box
.
Questo tipo di reimpostazione CSS può causare conflitti di CSS con l'API Maps JavaScript perché l'API non supporta le modifiche al foglio di stile dello user agent. Aggiuntivo Possono verificarsi conflitti di 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 dello stile di Google Maps. Se tutti gli stili di 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
stili della pagina. Uno degli scenari più comuni è quando max-width
dell'elemento img
è impostato su 100%. Ciò può causare la visualizzazione
o nascosti, soprattutto se utilizzi
InfoWindow.
Per risolvere questo problema, puoi aggiornare l'elemento img
per la mappa in modo che
L'attributo max-width
è impostato su none
. Ad esempio:
#map img
{
max-width : none;
}
Nomi classe
Non fare riferimento a nomi di classi ed elementi DOM interni delle mappe JavaScript tramite Google Cloud CLI o tramite l'API Compute Engine. 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 container per la tua mappa.
Se un framework CSS o un componente JavaScript utilizza questo tipo di riferimenti, la nostra suggerimento di override delle dimensioni della scatola può servire come per trovare una soluzione.
Sostituzione delle dimensioni dei riquadri CSS
Le sostituzioni delle dimensioni dei riquadri CSS forniscono una possibile soluzione alternativa per gli stili delle mappe
conflitti. Ciò può essere particolarmente utile se utilizzi un framework CSS
Componente di stile JavaScript. Ad esempio, se box-sizing
è impostato su
border-box
, prova quanto segue:
- Crea un override
box-sizing
che imposti l'elemento<html>
suborder-box
. - Utilizza
box-sizing: inherit
per tutti gli elementi diversi dalla mappa. - Crea un container di mappe personalizzato che reimposti l'elemento
box-sizing
suinitial
.
Esempio di CSS:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}