Riferimento stile per l'API Maps JavaScript

Seleziona piattaforma: Android iOS JavaScript

Con le opzioni per gli stili puoi personalizzare la presentazione degli stili standard delle mappe di Google, modificando la visualizzazione visiva di elementi quali strade, parchi, attività commerciali e altri punti d'interesse. Puoi modificare completamente lo stile di queste funzionalità nascondendole. Ciò significa che puoi enfatizzare componenti particolari della mappa o fare in modo che si integri con lo stile della pagina circostante.

Se vuoi aggiornare facilmente lo stesso stile in più app, valuta la personalizzazione del cloud, disponibile in Google Cloud Console. Dovrai creare e aggiungere un ID mappa per utilizzare la personalizzazione del cloud. Ti consigliamo di non combinare la personalizzazione del cloud e lo stile hardcoded nella stessa app, per evitare possibili conflitti futuri.

Esempi

La seguente dichiarazione in stile JSON rende grigi tutti gli elementi della mappa, poi i colori dell'arteria stradale principale vengono colorati in blu e nasconde completamente le etichette del paesaggio:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

L'oggetto JSON

Una dichiarazione di stile JSON è composta dai seguenti elementi:

• (Facoltativo) featureType (facoltativo): le funzionalità da selezionare per questa modifica di stile. Le caratteristiche sono caratteristiche geografiche sulla mappa, come strade, parchi, corpi d'acqua e altro ancora. Se non specifichi una funzionalità, vengono selezionate tutte.
• (Facoltativo) elementType: la proprietà della caratteristica specificata da selezionare. Gli elementi sono sottoparti di un elemento, incluse etichette e geometrie. Se non specifichi un elemento, vengono selezionati tutti gli elementi della funzionalità.
• stylers: le regole da applicare alle funzionalità e agli elementi selezionati. Gli stilisti indicano il colore, la visibilità e il peso della caratteristica. Puoi applicare uno o più stilisti a una funzionalità.

Per specificare uno stile, devi combinare un set di selettori featureType e elementType e il tuo stylers in un array di stili. Puoi scegliere come target qualsiasi combinazione di funzionalità in un unico array. Tuttavia, il numero di stili che puoi applicare contemporaneamente è limitato. Se l'array di stile supera il numero massimo di caratteri, non verrà applicato alcuno stile.

Il resto di questa pagina contiene ulteriori informazioni su funzionalità, elementi e generatori di stili.

featureType

Il seguente snippet JSON seleziona tutte le strade sulla mappa:

{
  "featureType": "road"
}

Le caratteristiche, o tipi di caratteristiche, sono caratteristiche geografiche sulla mappa, tra cui strade, parchi, specchi d'acqua, attività commerciali e altro ancora.

Le funzionalità formano un albero di categorie, con all come radice. Se non specifichi una funzione, vengono selezionate tutte. Specificare una funzionalità di all ha lo stesso effetto.

Alcune caratteristiche contengono funzionalità secondarie specificate utilizzando una notazione con punti. Ad esempio, landscape.natural o road.local. Se specifichi solo la funzionalità principale, ad esempio road, gli stili specificati per quella principale vengono applicati a tutte le relative unità secondarie, ad esempio road.local e road.highway.

Tieni presente che le funzionalità principali possono includere alcuni elementi che non sono inclusi in tutte le relative funzionalità secondarie.

Sono disponibili le seguenti funzionalità:

• all (valore predefinito) seleziona tutte le funzionalità.
• administrative seleziona tutte le aree amministrative. Lo stile ha effetto solo sulle etichette delle aree amministrative, non sui confini geografici o sul riempimento.
  • administrative.country seleziona i paesi.
  • administrative.land_parcel seleziona appezzamenti di terreno.
  • administrative.locality seleziona le località.
  • administrative.neighborhood seleziona i quartieri.
  • administrative.province seleziona province.
• landscape seleziona tutti i paesaggi.
  • landscape.man_made seleziona elementi artificiali, come edifici e altre strutture.
  • landscape.natural seleziona tratti naturali, come montagne, fiumi, deserti e ghiacciai.
  • landscape.natural.landcover seleziona le caratteristiche della copertura del suolo, il materiale fisico che copre la superficie terrestre, ad esempio foreste, praterie, zone umide e terreno sano.
  • landscape.natural.terrain seleziona gli elementi del suolo di una superficie terrestre, come altitudine, pendenza e orientamento.
• poi seleziona tutti i punti di interesse.
  • poi.attraction seleziona le attrazioni turistiche.
  • poi.business seleziona le attività.
  • poi.government seleziona gli edifici governativi.
  • poi.medical seleziona servizi di emergenza, tra cui ospedali, farmacie, forze dell'ordine, dottori e altri.
  • poi.park seleziona i parchi.
  • poi.place_of_worship seleziona luoghi di culto, tra cui chiese, templi, moschee e altri.
  • poi.school seleziona le scuole.
  • poi.sports_complex seleziona complessi sportivi.
• road seleziona tutte le strade.
  • road.arterial seleziona strade arteriose.
  • road.highway seleziona le autostrade.
  • road.highway.controlled_access seleziona le autostrade con accesso controllato.
  • road.local seleziona le strade locali.
• transit seleziona tutte le stazioni e le linee di trasporto pubblico.
  • transit.line seleziona le linee di trasporto pubblico.
  • transit.station seleziona tutte le stazioni di trasporto pubblico.
  • transit.station.airport seleziona gli aeroporti.
  • transit.station.bus seleziona le fermate dell'autobus.
  • transit.station.rail seleziona le stazioni ferroviarie.
• water seleziona specchi d'acqua.

elementType

Il seguente snippet JSON seleziona le etichette per tutte le strade locali:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Gli elementi sono suddivisioni di un elemento. Una strada, ad esempio, è composta dalla linea grafica (la geometria) sulla mappa e anche dal testo che ne indica il nome (un'etichetta).

Sono disponibili i seguenti elementi, ma tieni presente che una funzionalità specifica potrebbe non supportare nessuno, alcuni o tutti gli elementi:

• all (valore predefinito) seleziona tutti gli elementi della funzionalità specificata.
• geometry seleziona tutti gli elementi geometrici della caratteristica specificata.
  • geometry.fill seleziona solo il riempimento della geometria dell'elemento.
  • geometry.stroke seleziona solo il tratto della geometria dell'elemento.
• labels seleziona le etichette testuali associate alla funzionalità specificata.
  • labels.icon seleziona solo l'icona visualizzata all'interno dell'etichetta della funzionalità.
  • labels.text seleziona solo il testo dell'etichetta.
  • labels.text.fill seleziona solo il riempimento dell'etichetta. Il riempimento di un'etichetta viene generalmente visualizzato come un contorno colorato che circonda il testo dell'etichetta.
  • labels.text.stroke seleziona solo il tratto del testo dell'etichetta.

stylers

Gli styler sono opzioni di formattazione che puoi applicare a elementi ed elementi della mappa.

Lo snippet JSON seguente mostra una funzionalità di colore verde acceso, utilizzando un valore RGB:

"stylers": [
  { "color": "#99FF33" }
]

Questo snippet rimuove tutta l'intensità dal colore di una caratteristica, indipendentemente dal colore iniziale. L'effetto è il rendering della funzionalità scala di grigi:

"stylers": [
  { "saturation": -100 }
]

Questo snippet nasconde completamente una funzionalità:

    "stylers": [
      { "visibility": "off" }
    ]

Sono supportate le seguenti opzioni di stile:

• hue (una stringa esadecimale in formato #RRGGBB) indica il colore di base.

  Nota: questa opzione imposta la tonalità mantenendo la saturazione e la luminosità specificate nello stile Google predefinito (o in altre opzioni di stile definite sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite con hue. È meglio utilizzare lo stile di stile color assoluto, se possibile.

• lightness (un valore in virgola mobile compreso tra -100 e 100) indica la variazione percentuale della luminosità dell'elemento. I valori negativi aumentano l'oscurità (dove -100 specifica il nero) mentre i valori positivi aumentano la luminosità (dove +100 specifica il bianco).

  Nota: questa opzione imposta la luminosità mantenendo la saturazione e la tonalità specificate nello stile Google predefinito (o in altre opzioni di stile che hai definito sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite con lightness. È meglio utilizzare lo styler color assoluto, se possibile.

• saturation (un valore in virgola mobile compreso tra -100 e 100) indica la variazione percentuale dell'intensità del colore di base da applicare all'elemento.

  Nota: questa opzione imposta la saturazione mantenendo la tonalità e la luminosità specificate nello stile Google predefinito (o in altre opzioni di stile che hai definito sulla mappa). Il colore risultante è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, queste influiscono sulle funzionalità della mappa definite con saturation. È meglio utilizzare lo stile color assoluto, se possibile.

• gamma (un valore in virgola mobile compreso tra 0.01 e 10.0, dove 1.0 non applica alcuna correzione) indica la quantità di correzione della gamma da applicare all'elemento. Le correzioni gamma modificano la luminosità dei colori in modo non lineare, senza influire sui valori bianchi o neri. La correzione gamma viene generalmente utilizzata per modificare il contrasto di più elementi. Ad esempio, puoi modificare la gamma per aumentare o diminuire il contrasto tra i bordi e gli interni degli elementi.

  Nota: questa opzione regola la luminosità rispetto allo stile Google predefinito, utilizzando una curva gamma. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulle funzionalità della mappa definite con gamma. È meglio utilizzare lo styler color assoluto, se possibile.

• invert_lightness (se true) inverte la luminosità esistente. Ciò è utile, ad esempio, per passare rapidamente a una mappa più scura con testo bianco.

  Nota: questa opzione inverte lo stile Google predefinito. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulle funzionalità della mappa definite con invert_lightness. È meglio utilizzare lo stile color assoluto, se possibile.

• visibility (on, off o simplified) indica se e come l'elemento viene visualizzato sulla mappa. La visibilità simplified rimuove alcuni elementi di stile dalle caratteristiche interessate; le strade, ad esempio, sono semplificate in linee più sottili senza contorni, mentre i parchi perdono il testo dell'etichetta mantenendo l'icona dell'etichetta.
• color (una stringa esadecimale in formato #RRGGBB) imposta il colore della caratteristica.
• weight (un valore intero maggiore o uguale a zero) imposta la ponderazione dell'elemento, in pixel. Se imposti il peso su un valore alto, potresti notare un ritaglio vicino ai bordi del riquadro.

Le regole di stile vengono applicate nell'ordine da te specificato. Non combinare più operazioni in un'unica operazione di stile. Definisci invece ogni operazione come una voce separata nell'array di stile.

Nota: l'ordine è importante poiché alcune operazioni non sono commutative. Le funzionalità e/o gli elementi che vengono modificati mediante le operazioni di stile (di solito) hanno già stili esistenti. Le operazioni operano su questi stili esistenti, se presenti.

Il colore, la saturazione e il modello di luminosità

Nota: l'effetto delle tonalità, della saturazione, della luminosità e delle impostazioni della gamma è relativo allo stile della mappa base. Se Google apporta modifiche allo stile della mappa base, le modifiche influiscono sulle funzionalità della mappa associate a queste opzioni. È meglio utilizzare lo stile color assoluto, se possibile.

Le mappe con stile utilizzano il modello tonalità, saturazione, luminosità (HSL) per indicare il colore all'interno delle operazioni dello stile. Tonalità indica il colore di base, la saturazione indica l'intensità di quel colore e la leganza indica la quantità relativa di bianco o nero nel colore che costituisce il colore.

La correzione gamma modifica la luminosità dello spazio colore, in genere per aumentare o diminuire il contrasto. Inoltre, il modello HSL definisce il colore all'interno di uno spazio di coordinate in cui hue indica l'orientamento all'interno di una ruota dei colori, mentre la saturazione e la luminosità indicano ampiezze lungo assi diversi. I toni sono misurati all'interno di uno spazio di colore RGB, simile alla maggior parte degli spazi di colore RGB, tranne per il fatto che i toni del bianco e del nero non sono presenti.

Anche se hue utilizza un valore di colore esadecimale HTML, utilizza questo valore solo per determinare il colore di base, ovvero il suo orientamento intorno alla ruota dei colori, non la saturazione o la luminosità, che sono indicati separatamente come variazioni percentuali.

Ad esempio, puoi definire la tonalità del verde puro come hue:0x00ff00 o hue:0x000100. Entrambe le tonalità sono identiche. Entrambi i valori indicano il verde puro nel modello di colore HSL.

Una ruota dei colori RGB

I valori RGB hue che sono composti da parti uguali di colore rosso, verde e blu non indicano una tonalità, perché nessuno di questi valori indica un orientamento nello spazio di coordinate HSL. Alcuni esempi sono "#000000" (nero), "#FFFFFF" (bianco) e tutte le tonalità pure di grigio. Per indicare il nero, il bianco o il grigio, devi rimuovere tutti i valori saturation (impostare il valore su -100) e modificare invece lightness.

Inoltre, quando modifichi le funzionalità esistenti che hanno già una combinazione di colori, la modifica di un valore come hue non influisce sugli elementi saturation o lightness esistenti.