Panoramica
Il grafico di Google Maps mostra una mappa utilizzando l'API Google Maps. I valori dei dati vengono visualizzati come indicatori sulla mappa. I valori dei dati possono essere coordinate (coppie di latitudine-longitudine) o indirizzi. La mappa verrà ridimensionata in modo da includere tutti i punti identificati.
Se vuoi utilizzare le mappe come disegni a linee anziché come immagini satellitari, utilizza un grafico geografico.
Località con nome
Puoi identificare i luoghi per inserire gli indicatori per nome, come mostrato di seguito in questa mappa dei primi dieci paesi per popolazione.
Quando l'utente seleziona uno degli indicatori, viene mostrata una descrizione comando con il nome e la popolazione del paese, perché abbiamo utilizzato l'opzione showInfoWindow. Inoltre, quando l'utente passa il mouse sopra uno degli indicatori per un breve periodo di tempo, viene visualizzato un suggerimento "title" con le stesse informazioni, poiché abbiamo usato l'opzione showTooltip.
Ecco il codice HTML completo:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['map'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);
var options = {
showTooltip: true,
showInfoWindow: true
};
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Località con geocodifica
Puoi anche specificare le località per latitudine e longitudine, che vengono caricate più velocemente rispetto alle località con nome:
Il grafico sopra identifica quattro località per latitudine e longitudine.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
"mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Personalizzare gli indicatori
Puoi utilizzare forme di indicatori che si trovano altrove sul Web. Ecco un esempio che utilizza i segnaposto blu di iconarchive.com:
Se selezioni i segnaposto nel grafico sopra, questi non sono disponibili. Sono supportati i formati PNG, GIF e JPG.
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
"mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Aggiungere più insiemi di indicatori
Oltre a creare un set predefinito di indicatori, puoi anche crearne diversi.
Per creare un altro insieme di indicatori, aggiungi un ID all'opzione icons e imposta le immagini. Aggiungi una colonna alla tabella dei dati e imposta l'ID dell'insieme di indicatori che vuoi utilizzare per ogni riga della tabella di dati (puoi anche utilizzare 'default' o null per utilizzare gli indicatori predefiniti).
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker')
data.addRows([
['New York City NY, United States', 'New York', 'blue' ],
['Scranton PA, United States', 'Scranton', 'green'],
['Washington DC, United States', 'Washington', 'pink' ],
['Philadelphia PA, United States', 'Philly', 'green'],
['Pittsburgh PA, United States', 'Pittsburgh', 'green'],
['Buffalo NY, United States', 'Buffalo', 'blue' ],
['Baltimore MD, United States', 'Baltimore', 'pink' ],
['Albany NY, United States', 'Albany', 'blue' ],
['Allentown PA, United States', 'Allentown', 'green']
]);
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
Stili delle mappe
La Visualizzazione mappa offre la possibilità di impostare stili personalizzati, che ti consentono di creare uno o più tipi di mappe personalizzate.
Puoi definire un tipo di mappa personalizzato creando un oggetto stile mappa e inserendolo sotto il relativo
identificatore (mapTypeId) sotto l'opzione mappe. Ad esempio:
var options = {
maps: {
<map style ID>: <map style object>
}
};
In seguito, potrai fare riferimento a questo tipo di mappa personalizzata in base all'ID stile mappa che hai assegnato.
L'oggetto stile mappa contiene name, che sarà il nome visualizzato nel controllo
del tipo di mappa (non deve corrispondere alla rispettiva mapTypeId), e un array styles, che conterrà gli oggetti di stile per ogni elemento a cui vuoi applicare uno stile. Il riferimento API di Google Maps contiene un elenco con diversi tipi di elementi, funzionalità e stili con cui puoi creare un tipo di mappa personalizzato.
Nota: il tuo mapTypeId personalizzato deve essere posizionato sotto l'opzione maps.
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addRows([
['Lake Buena Vista, FL 32830, United States', 'Walt Disney World'],
['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
['7007 Sea World Drive, Orlando, FL 32821, United States', 'Seaworld Orlando' ]
]);
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
Oltre a creare tipi di mappe personalizzati, puoi anche specificare quali mappe l'utente può visualizzare nel controllo del tipo di mappa con l'opzione mapTypeIds. Per impostazione predefinita, nel controllo verranno visualizzati tutti i tipi di mappa, inclusi quelli personalizzati. L'opzione
mapTypeIds accetta un array di stringhe dei tipi di mappa che vuoi consentire
all'utente di visualizzare. Queste stringhe devono fare riferimento ai nomi predefiniti per gli stili di mappa predefiniti (ovvero normale, satellitare, rilievo, ibrido) o all'ID stile mappa di un tipo di mappa personalizzato definito da te. Se imposti l'opzione mapTypeIds, la mappa renderà disponibili solo i tipi di mappa specificati in questo array.
Puoi anche utilizzarla insieme all'opzione mapType per impostare uno stile di mappa come predefinito, ma non includerlo nell'array di mapTypeIds. In questo modo, la mappa verrà visualizzata solo al caricamento iniziale.
var options = {
mapType: 'styledMap',
zoomLevel: 7,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
// User will only be able to view/select custom styled maps.
mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
maps: {
styledMap: {
name: 'Styled Map',
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]},
{featureType: 'road.highway', elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
]},
redEverything: {
name: 'Redden All The Things',
styles: [
{featureType: 'landscape',
stylers: [{color: '#fde0dd'}]},
{featureType: 'road.highway',
stylers: [{color: '#67000d'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#67000d'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
]},
imBlue: {
name: 'All Your Blues are Belong to Us',
styles: [
{featureType: 'landscape',
stylers: [{color: '#c5cae9'}]},
{featureType: 'road.highway',
stylers: [{color: '#023858'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#0288d1'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
]}
}
};
Caricamento
Il nome del pacchetto google.charts.load è "map".
Tieni presente che dovrai utilizzare il tuo mapsApiKey per il progetto, anziché copiare solo quello utilizzato in questi esempi, per evitare di degradare il servizio dati di Maps per i tuoi utenti. Per maggiori dettagli, consulta
Impostazioni di caricamento.
google.charts.load("current", {
"packages":["map"],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
"mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
});
Il nome della classe della visualizzazione è google.visualization.Map.
Poiché il nome abbreviato, Map, è in conflitto con la classe JavaScript Map, ChartWrapper non caricherà automaticamente il pacchetto quando specifichi chartType: 'Map'. Tuttavia, puoi specificare chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
Formato dei dati
Sono supportati due formati di dati alternativi:
- Coppie lat-long: le prime due colonne devono essere rispettivamente numeri che designano la latitudine e la longitudine. Una terza colonna facoltativa contiene una stringa che descrive la località specificata nelle prime due colonne.
- Indirizzo stringa: la prima colonna deve essere una stringa che contiene un indirizzo. Questo indirizzo dovrebbe essere il più completo possibile. Una seconda colonna facoltativa contiene una stringa che descrive la località nella prima colonna. Gli indirizzi delle stringhe vengono caricati più lentamente, soprattutto se hai più di dieci indirizzi.
Nota: l'opzione Coppie Lat-Long carica le mappe molto più velocemente, soprattutto con i dati di grandi dimensioni. Ti consigliamo di utilizzare questa opzione per set di dati di grandi dimensioni. Visita l'API di Google Maps per scoprire come trasformare i tuoi indirizzi in punti lat-long. La mappa può mostrare un massimo di 400 voci; se i dati contengono più di 400 righe, verranno mostrate solo le prime 400.
Opzioni di configurazione
| Nome | |
|---|---|
| Abilita rotella di scorrimento |
Se questo criterio viene impostato su true, consente di aumentare e diminuire lo zoom utilizzando la rotellina del mouse. Tipo: booleano
Predefinito: falso
|
| icone |
Contiene una o più serie di indicatori personalizzati. Ogni insieme di indicatori può specificare un'immagine con indicatore var options = {
icons: {
default: {
normal: '/path/to/marker/image',
selected: '/path/to/marker/image'
},
customMarker: {
normal: '/path/to/other/marker/image',
selected: '/path/to/other/marker/image'
}
}
};
Tipo: oggetto
Predefinito: null
|
| coloreLinea |
Se showLine è true, definisce il colore della linea. Ad esempio: "#800000". Tipo: stringa
Predefinito: colore predefinito
|
| larghezza di riga |
Se showLine è true, definisce la larghezza della riga (in pixel). Tipo: numero
Predefinito: 10
|
| maps.<mapTypeId> |
Un oggetto contenente proprietà di un tipo di mappa personalizzato. L'accesso a questo tipo di mappa personalizzata verrà eseguito dal tipo di mappa personalizzato specificato da
Tipo: oggetto
Predefinito: null
|
| maps.<mapTypeId>.name |
Il nome della mappa che verrà visualizzato nel controllo della mappa se
Tipo: stringa
Predefinito: null
|
| maps.<mapTypeId>.styles |
Contiene gli oggetti di stile per i vari elementi di un tipo di mappa personalizzato.
Ogni oggetto di stile può contenere da 1 a 3 proprietà: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Consulta la documentazione di Maps per ulteriori informazioni sulle diverse funzionalità, sugli elementi e sugli stilisti. Tipo: array
Predefinito: null
|
| tipoMappa |
Il tipo di mappa da mostrare. I valori possibili sono "normale", "terrain", "satellite", "ibrido" o l'ID di un tipo personalizzato di mappa, se creato. Tipo: stringa
Predefinito: "ibrido"
|
| ID tipo di mappa |
Se utilizzi il controllo tipo di mappa ( Tipo: array
Predefinito: null
|
| showInfoWindow |
Se impostato su true, mostra la descrizione della località in una finestra separata quando un indicatore di punto è selezionato dall'utente. In precedenza, questa opzione veniva chiamata Tipo: booleano
Predefinito: falso
|
| ShowLine |
Se impostato su true, mostra una polilinea di Google Maps attraverso tutti i punti. Tipo: booleano
Predefinito: falso
|
| descrizione comando dello show |
Se impostato su true, la descrizione della posizione viene mostrata come descrizione comando quando il mouse è posizionato sopra un indicatore di punto. In precedenza, questa opzione veniva chiamata Tipo: booleano
Predefinito: falso
|
| useMapTypeControl |
Mostra un selettore del tipo di mappa che consente al visualizzatore di passare da [mappa, satellite, ibrido, rilievo]. Quando useMapTypeControl è false (valore predefinito), non viene mostrato alcun selettore e il tipo viene determinato dall'opzione mapType. Tipo: booleano
Predefinito: falso
|
| Livello zoom |
Un numero intero che indica il livello di zoom iniziale della mappa, dove 0 riduce completamente lo zoom (a livello globale) e 19 è il livello massimo di zoom. Consulta la sezione "Livelli di zoom" nell'API di Google Maps. Tipo: numero
Predefinito: automatica
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna la mappa. Tipo di reso: nessuno
|
getSelection() |
Implementazione Tipo di reso: array di elementi di selezione
|
setSelection(selection) |
Implementazione Tipo di reso: nessuno
|
Eventi
| Nome | |
|---|---|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
|
select |
Evento di selezione standard Proprietà: nessuna
|
Norme sui dati
Le mappe vengono visualizzate da Google Maps. Per ulteriori informazioni sulle norme relative ai dati, consulta i Termini di servizio di Google Maps.