Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Calque Data

Le calque Google Maps Data fournit un conteneur pour les données géospatiales arbitraires. Vous pouvez utiliser le calque Data pour stocker des données personnalisées ou pour afficher des données GeoJSON sur une carte Google.

Présentation

Pour en savoir plus sur le calque Data, regardez cette vidéo DevBytes.

Google Maps JavaScript API vous permet d'annoter une carte au moyen de diverses superpositions, telles que des marqueurs, des polylignes, des polygones, etc. Dans chacune de ces annotations, des informations de style sont combinées aux données de géolocalisation. La classe google.maps.Data fournit un conteneur pour les données géospatiales arbitraires. Au lieu d'ajouter ces superpositions, vous pouvez utiliser le calque Data pour ajouter des données géographiques arbitraires à votre carte. Par défaut, l'API effectue le rendu des éléments géométriques (points, lignes ou polygones, par exemple) inclus dans ces données, le cas échéant, sous la forme de marqueurs, polylignes et polygones. Vous pouvez définir le style de ces composants, comme vous le feriez pour une superposition normale, ou appliquer des règles de style basées sur d'autres propriétés comprises dans votre jeu de données.

Avec la classe google.maps.Data, vous pouvez :

  • Dessiner des polygones sur une carte.
  • Ajouter des données GeoJSON à une carte.
    GeoJSON est une norme définie pour les données géospatiales sur Internet. La classe Data respecte la structure de GeoJSON en matière de représentation des données et facilite l'affichage des données GeoJSON. Utilisez la méthode loadGeoJson() pour importer facilement des données GeoJSON et afficher des objets de type Point, LineString et Polygon.
  • Utilisez google.maps.Data pour modéliser les données arbitraires.
    Dans la pratique, d'autres propriétés sont généralement associées aux entités (horaires d'ouverture pour un magasin, vitesse de circulation pour une route, par exemple). Avec google.maps.Data, vous pouvez modéliser ces propriétés et définir le style des données en conséquence.
  • Choisissez le mode de représentation de vos données, puis changez d'avis à la volée.
    Le calque Data vous permet de contrôler les données que vous voulez afficher, ainsi que les interactions avec ces données. Par exemple, lorsque vous examinez une carte des commerces de proximité, vous pouvez décider d'afficher uniquement les magasins qui vendent des titres de transport.

Dessiner un polygone

La classe Data.Polygon gère le tracé des polygones pour vous. Vous pouvez lui transmettre un tableau d'un ou de plusieurs anneaux linéaires, définis en tant que coordonnées de latitude/longitude. Le premier anneau linéaire définit la limite extérieure du polygone. Si vous spécifiez plusieurs anneaux linéaires, le deuxième et les suivants définissent des tracés intérieurs (des trous) dans le polygone.

L'exemple ci-dessous crée un polygone rectangulaire comportant deux trous :

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

Voir l'exemple.

Charger un fichier GeoJSON

GeoJSON est une norme définie pour les données géospatiales sur Internet. Légère et facile à interpréter par l'homme, elle est idéale pour le partage et la collaboration. Le calque Data vous permet d'ajouter des données GeoJSON à une carte Google en une seule ligne de code.

map.data.loadGeoJson('google.json');

Chaque carte est dotée d'un objet map.data qui tient lieu de calque de données pour les données géospatiales arbitraires, notamment les données GeoJSON. Pour charger et afficher un fichier GeoJSON, vous pouvez appeler la méthode loadGeoJSON() de l'objet data. L'exemple ci-dessous montre comment ajouter une carte et charger des données GeoJSON externes.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

Voir l'exemple.

Fichier GeoJSON d'exemple

La plupart des exemples de cette page se basent sur le même fichier GeoJSON. Celui-ci définit les six caractères du mot « Google » comme étant des polygones répartis sur l'Australie. N'hésitez pas à copier et modifier ce fichier pour tester le calque Data.

Remarque : Vous ne pouvez charger un fichier json à partir d'un autre domaine que si le partage de ressources d'origines croisées est activé pour ce domaine.

Pour afficher le texte complet du fichier ci-dessous, cliquez sur la petite flèche en regard des mots google.json.

Données GeoJSON de style

Utilisez la méthode Data.setStyle() pour spécifier l'apparence des données. La méthode setStyle() accepte un littéral objet StyleOptions ou une fonction qui calcule le style de chaque composant.

Règles de style simples

La manière la plus simple de définir le style d'un composant consiste à spécifier un littéral objet StyleOptions dans la méthode setStyle(). Cela permet de définir un style qui sera appliqué à l'ensemble des composants. Notez que chaque type de composant ne prend en charge qu'une partie des options disponibles pour le rendu. Il est donc possible de combiner des styles applicables à différents types de composants dans un même littéral objet. Par exemple, le fragment ci-dessous définit à la fois la propriété icon sur une icône personnalisée (ce qui n'a d'impact que sur les géométries de points) et la propriété fillColor (ce qui n'a d'impact que sur les polygones).

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Pour plus d'informations sur les combinaisons de styles/composants valides, voir Options de style.

L'exemple ci-dessous montre comment définir les couleurs de trait et de remplissage de plusieurs composants à l'aide du littéral objet StyleOptions. Notez que tous les polygones sont de style identique.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Voir l'exemple

Règles de style déclaratives

Normalement, pour mettre à jour le style d'un grand nombre de superpositions (marqueurs ou polylignes, par exemple), il faut répéter l'opération pour chaque superposition de la carte et définir son style individuellement. Le calque Data vous permet de définir des règles déclaratives qui seront appliquées sur l'ensemble de votre jeu de données. En cas de mise à jour des données ou des règles, le style est automatiquement appliqué à tous les composants. Vous pouvez utiliser les propriétés d'un composant pour personnaliser son style.

Par exemple, le code ci-dessous définit la couleur de chaque caractère dans google.json en fonction de sa position dans le jeu de caractères ASCII. Dans ce cas, nous avons encodé la position du caractère avec les données.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Supprimer des styles

Si vous souhaitez supprimer des styles appliqués, spécifiez un littéral objet vide dans la méthode setStyles().

// Remove custom styles.
map.data.setStyle({});

Cela supprime tout style personnalisé que vous avez spécifié auparavant. Désormais, le rendu des composants s'appuie sur les styles par défaut. Si vous préférez cesser d'afficher le rendu des composants, définissez la propriété visible de StyleOptions sur false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Remplacer les styles par défaut

En général, les règles de style s'appliquent à tous les composants du calque Data. Cependant, il s'avère parfois nécessaire d'appliquer des règles de style spéciales à des composants spécifiques. Cela permet par exemple de mettre un composant en évidence lorsque l'utilisateur clique dessus.

Pour appliquer des règles de style spéciales, utilisez la méthode overrideStyle(). Toute propriété que vous modifiez à l'aide de la méthode overrideStyle() s'ajoute aux styles globaux qui sont déjà spécifiés dans setStyle(). Par exemple, le code ci-dessous modifie la couleur de remplissage d'un polygone lorsque l'utilisateur clique dessus, mais aucun autre style n'est redéfini.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Appelez la méthode revertStyles() pour éliminer tous les remplacements de styles.

Options de style

Les options disponibles pour définir le style de chaque composant dépendent du type de composant. Par exemple, la propriété fillColor effectue uniquement le rendu des géométries de polygones, tandis que la propriété icon s'affiche uniquement sur une géométrie de points. Pour plus d'informations, voir la documentation de référence sur StyleOptions.

Options disponibles pour toutes les géométries

  • clickable : Si la valeur est true, le composant répond aux événements de souris et de toucher.
  • visible : Si la valeur est true, le composant est visible.
  • zIndex : L'ordre dans lequel les composants s'affichent sur la carte est défini par leur zIndex. Les composants de valeur plus élevée s'affichent devant les composants de valeur inférieure. Les marqueurs s'affichent toujours devant les polylignes et les polygones.

Options disponibles pour les géométries de points

  • cursor : Le curseur de la souris s'affiche lorsque l'utilisateur survole le composant.
  • icon : Une icône s'affiche pour la géométrie de points.
  • shape : Définit l'image interactive utilisée pour la détection des clics.
  • title : Texte de roulement.

Options disponibles pour les géométries de lignes

  • strokeColor : Couleur du trait. Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus.
  • strokeOpacity : Opacité du trait (entre 0.0 et 1.0).
  • strokeWeight : Épaisseur du trait, en pixels.

Options disponibles pour les géométries de polygones

  • fillColor : Couleur de remplissage. Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus.
  • fillOpacity : Opacité du remplissage (entre 0.0 à 1.0).
  • strokeColor : Couleur du trait. Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus.
  • strokeOpacity : Opacité du trait (entre 0.0 et 1.0).
  • strokeWeight : Épaisseur du trait, en pixels.

Ajouter des gestionnaires d'événements

Les composants répondent aux événements, tels que mouseup ou mousedown. Vous pouvez ajouter des écouteurs d'événements pour autoriser les utilisateurs à interagir avec les données de la carte. L'exemple de code ci-dessous ajoute un événement qui affiche, sous le curseur de la souris, des informations sur le composant survolé par celle-ci.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Événements du calque Data

Les événements suivants sont communs à tous les composants, quel que soit leur type de géométrie :

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Pour plus d'informations sur ces événements, voir la documentation de référence sur la classe google.maps.data.

Modifier l'apparence de manière dynamique

Pour définir le style du calque Data, vous pouvez spécifier une fonction qui calcule le style de chaque composant dans la méthode google.maps.data.setStyle(). Cette fonction est appelée à chaque fois que les propriétés d'un composant sont mises à jour.

L'exemple de code ci-dessous ajoute un écouteur d'événement associé à l'événement click pour mettre à jour la propriété isColorful du composant. Le style du composant se met à jour conformément au changement dès que la propriété est définie.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

Voir l'exemple

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.