Présentation
Le graphique Google Maps affiche une carte à l'aide de l'API Google Maps. Les valeurs des données sont affichées sous forme de repères sur la carte. Les valeurs de données peuvent être des coordonnées (paires longues) ou des adresses. La carte est mise à l'échelle de manière à inclure tous les points identifiés.
Si vous souhaitez que vos cartes soient des dessins au trait plutôt que des images satellite, utilisez un géographique.
Lieux nommés
Vous pouvez identifier les lieux où placer les repères par nom, comme illustré ci-dessous sur les 10 principaux pays par population.
Lorsque l'utilisateur sélectionne l'un des repères, une info-bulle indiquant le nom et la population du pays s'affiche, car nous avons utilisé l'option showInfoWindow. De plus, lorsque l'utilisateur passe la souris sur l'un des repères pendant un court moment, un conseil "titre" s'affiche avec les mêmes informations, car nous avons utilisé l'option showTooltip.
Voici le code HTML complet:
<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>
Zones géographiques géocodées
Vous pouvez également spécifier des emplacements par latitude et longitude, qui se chargent plus rapidement que les lieux nommés:
Le graphique ci-dessus identifie quatre lieux par latitude et longitude.
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>
Personnaliser des repères
Vous pouvez utiliser des formes de repère situées ailleurs sur le Web. Voici un exemple d'utilisation de repères bleus provenant de iconarchive.com:
Si vous sélectionnez des repères dans le graphique ci-dessus, ils sont inclinés. Les fichiers PNG, GIF et JPG sont acceptés.
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>
Ajouter plusieurs ensembles de repères
En plus de créer un ensemble de repères par défaut, vous pouvez également en créer plusieurs.
Pour créer un ensemble de repères supplémentaire, ajoutez un ID à l'option icons et définissez vos images de repère. Ensuite, ajoutez une colonne à votre tableau de données et définissez l'ID de l'ensemble de repères que vous souhaitez utiliser pour chaque ligne du tableau de données (vous pouvez également utiliser 'default' ou null pour utiliser les repères par défaut).
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>
Appliquer un style à Maps
La visualisation de carte offre la possibilité de définir des styles personnalisés, ce qui vous permet de créer un ou plusieurs types de carte personnalisés.
Vous pouvez définir un type de carte personnalisé en créant un objet de style de carte et en le plaçant sous son identifiant (mapTypeId) sous l'option de carte. Exemple :
var options = {
maps: {
<map style ID>: <map style object>
}
};
Vous pourrez ensuite faire référence à ce type de carte personnalisé en fonction de l'ID de style de carte que vous lui avez attribué.
Votre objet de style de carte contient un name, qui sera le nom à afficher dans la commande de type de carte (il ne doit pas nécessairement correspondre à son mapTypeId), et un tableau styles, qui contiendra des objets de style pour chaque élément que vous souhaitez styliser. La documentation de référence de l'API Google Maps contient la liste des différents types d'éléments, d'éléments géographiques et de styles avec lesquels vous pouvez créer un type de carte personnalisé.
Remarque : Votre mapTypeId personnalisé doit être placé sous l'option 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>
En plus de créer des types de carte personnalisés, vous pouvez spécifier les cartes que l'utilisateur peut afficher dans la commande de type de carte à l'aide de l'option mapTypeIds. Par défaut, tous les types de carte, y compris vos types de carte personnalisés, s'affichent dans la commande de type de carte. L'option mapTypeIds accepte un tableau de chaînes de types de carte que vous souhaitez autoriser l'utilisateur à consulter. Ces chaînes doivent faire référence aux noms prédéfinis pour les styles de carte par défaut (par exemple, normal, satellite, relief, hybride) ou à l'ID de style de carte d'un type de carte personnalisé que vous avez défini. Si vous définissez l'option mapTypeIds, seuls les types de carte que vous spécifiez dans ce tableau seront disponibles.
Vous pouvez également l'utiliser conjointement avec l'option mapType pour définir un style de carte par défaut, mais ne pas l'inclure dans le tableau mapTypeIds. Ainsi, cette carte ne s'affichera que lors du chargement initial.
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}]}
]}
}
};
Chargement...
Le nom du package google.charts.load est "map".
Notez que vous devrez obtenir votre propre mapsApiKey pour votre projet, plutôt que de simplement copier celui utilisé dans les exemples ci-dessous, afin d'éviter la dégradation du service de données de carte pour vos utilisateurs. Pour en savoir plus, consultez Charger les paramètres.
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"
});
Le nom de classe de la visualisation est google.visualization.Map.
Comme le nom abrégé Map est en conflit avec la classe JavaScript Map, ChartWrapper ne charge pas automatiquement ce package lorsque vous spécifiez chartType: 'Map'. Toutefois, vous pouvez spécifier chartType: 'google.visualization.Map' à la place.
var visualization = new google.visualization.Map(container);
Format des données
Deux autres formats de données sont acceptés:
- Paires de latitude/longitude : les deux premières colonnes doivent être des nombres désignant respectivement la latitude et la longitude. Une troisième colonne facultative contient une chaîne décrivant l'emplacement spécifié dans les deux premières colonnes.
- Adresse de chaîne : la première colonne doit être une chaîne contenant une adresse. Cette adresse doit être aussi complète que possible. Une deuxième colonne facultative contient une chaîne décrivant l'emplacement dans la première colonne. Le chargement des adresses de chaîne est plus lent, en particulier lorsque vous avez plus de 10 adresses.
Remarque:L'option "Paires Lat-Long" charge les cartes beaucoup plus rapidement, en particulier avec des données volumineuses. Nous vous recommandons d'utiliser cette option pour les grands ensembles de données. Veuillez consulter la page sur l'API Google Maps pour savoir comment transformer vos adresses en coordonnées géographiques (latitude et longitude). La carte peut afficher un maximum de 400 entrées. Si vos données contiennent plus de 400 lignes, seules les 400 premières seront affichées.
Options de configuration
| Nom | |
|---|---|
| enableScrollWheel |
Si ce paramètre est défini sur "true", le zoom avant et arrière s'effectue à l'aide de la molette de la souris. Type : booléen
Par défaut:false
|
| icônes |
Contient un ou plusieurs ensembles de repères personnalisés. Chaque ensemble de repères peut spécifier une image de repère 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'
}
}
};
Type : objet
Par défaut : null
|
| Couleur de ligne |
Si le paramètre showLine est défini sur "true", définit la couleur de la ligne. Exemple : "#800000". Type:chaîne
Par défaut:couleur par défaut
|
| Largeur de ligne |
Si le paramètre showLine est défini sur "true", définit l'épaisseur de la ligne (en pixels). Type : nombre
Par défaut:10
|
| maps.<mapTypeId> |
Objet contenant les propriétés d'un type de carte personnalisé. Ce type de carte personnalisé sera accessible par le
Type:objet
Par défaut : null
|
| maps.<mapTypeId>.nom |
Nom de la carte qui sera affiché dans la commande de carte si Type : chaîne
Par défaut:null
|
| maps.<mapTypeId>.styles. |
Contient les objets de style pour les différents éléments d'un type de carte personnalisé.
Chaque objet de style peut contenir entre une et trois propriétés : {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Consultez la documentation de Maps pour en savoir plus sur les différents éléments, styles et styles. Type:tableau
Par défaut:null
|
| type de carte |
Type de carte à afficher. Les valeurs possibles sont "normal", "terrain", "satellite", "hybride" ou l'identifiant d'un type de carte personnalisé, le cas échéant. Type : chaîne
Par défaut : "hybride"
|
| mapTypeIds |
Si vous utilisez la commande de type de carte ( Type : tableau
Par défaut : null
|
| showInfoWindow |
Si ce paramètre est défini sur "true", la description du lieu est affichée dans une fenêtre distincte lorsqu'un repère est sélectionné par l'utilisateur. Cette option était jusqu'alors appelée Type : booléen
Par défaut : false
|
| ligne d'émission |
Si ce paramètre est défini sur "true", affiche une polyligne Google Maps à travers tous les points. Type:booléen
Par défaut:false
|
| infobulle |
Si ce paramètre est défini sur "true", la description du lieu s'affiche sous forme d'info-bulle lorsque la souris est placée au-dessus d'un repère. Cette option était jusqu'alors appelée Type : booléen
Par défaut : false
|
| utiliserMapTypeControl |
Afficher un sélecteur de type de carte permettant à l'utilisateur de basculer entre [carte, satellite, hybride, relief] Lorsque useMapTypeControl est défini sur "false" (par défaut), aucun sélecteur n'est présenté et le type est déterminé par l'option mapType. Type:booléen
Par défaut:false
|
| Niveau de zoom |
Entier indiquant le niveau de zoom initial de la carte, où 0 est entièrement zoom arrière (monde entier) et 19 est le niveau de zoom maximal. (Consultez Niveaux de zoom dans l'API Google Maps.) Type : nombre
Par défaut:automatique
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Dessine la carte. Return Type (Type de retour) : aucun
|
getSelection() |
Implémentation standard Type de renvoi : tableau des éléments de sélection
|
setSelection(selection) |
Implémentation standard Return Type (Type de retour) : aucun
|
Événements
| Nom | |
|---|---|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
select |
Événement de sélection standard Properties (Propriétés) : aucune
|
Règles relatives aux données
La carte est affichée par Google Maps. Pour en savoir plus sur les règles relatives aux données, consultez les Conditions d'utilisation de Google Maps.