Visualisation: carte

  1. Présentation
  2. Lieux nommés
  3. Emplacements géocodés
  4. Personnaliser des repères
  5. Ajouter plusieurs ensembles de repères
  6. Appliquer un style à Maps
  7. Loading
  8. Format des données
  9. Options de configuration
  10. Méthodes
  11. Événements
  12. Règles concernant les données

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.

Données
  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 complet
<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.

Données
  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 complet
<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).

Options
      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'
          }
        }
      };
Version HTML complète
<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.

Options
      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 complet
<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:

  1. 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.
  2. 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 normal et selected. Vous pouvez définir un ensemble de repères par défaut en définissant l'option default, ou des ensembles de repères personnalisés en définissant un ID de repère unique. 

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 mapTypeId que vous spécifiez pour le type de carte personnalisé. Un mapTypeId doit être défini pour chaque type de carte personnalisé créé. Chaque type de carte personnalisé doit contenir deux propriétés:

  • name: nom à afficher pour le type de carte stylisé
  • styles: tableau contenant les objets de style pour le type de carte stylisé
Type:objet
Par défaut : null
maps.<mapTypeId>.nom

Nom de la carte qui sera affiché dans la commande de carte si useMapTypeControl est défini sur true.

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, elementType et stylers. Si featureType et elementType sont omis, les styles seront appliqués à tous les éléments géographiques/éléments de la carte. 

{
  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 (useMapTypeControl: true), les ID spécifiés dans ce tableau seront les seuls types de carte affichés dans la commande. Si cette option n'est pas définie, la commande de type de carte sera définie par défaut sur les options standards de commande de type de carte Google Maps, ainsi que sur les types de carte personnalisés disponibles.

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 showTip jusqu'à la version 45. Voir aussi : showTooltip

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 showTip jusqu'à la version 45. Notez que, pour le moment, le HTML n'est pas compatible. L'info-bulle affichera donc les balises HTML brutes.

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 getSelection(). Les éléments de sélection sont tous des éléments de ligne. Peut renvoyer plusieurs lignes sélectionnées.

Type de renvoi : tableau des éléments de sélection
setSelection(selection)

Implémentation standard setSelection(). Traite chaque entrée de sélection comme une sélection de lignes. Permet la sélection de plusieurs lignes.

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.