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

Formes

Vous pouvez ajouter différentes formes à votre carte. Une forme est un objet sur une carte qui est associé à des coordonnées de latitude/longitude. Les formes suivantes sont disponibles : les lignes, les polygones, les cercles et les rectangles. Vous pouvez également configurer vos formes pour que les utilisateurs puissent les modifier ou les déplacer.

Polylignes

Pour dessiner une ligne sur une carte, utilisez une polyligne. La classe Polyline définit une superposition linéaire de segments de ligne connectés sur la carte. Un objet Polyline consiste en un tableau de points géographiques LatLng qui crée une série de segments de ligne connectant ces points géographiques sous la forme d'une séquence ordonnée.

Ajouter une polyligne

Le constructeur Polyline utilise un ensemble de propriétés PolylineOptions qui spécifient les coordonnées LatLng de la ligne et un ensemble de styles pour ajuster le comportement visuel de la polyligne.

Les objets Polyline sont dessinés sous la forme d'une série de segments droits sur la carte. Vous pouvez spécifier des couleurs, des épaisseurs et des opacités personnalisées pour le trait de la ligne dans les propriétés PolylineOptions lorsque vous créez votre ligne, ou bien changer ces propriétés après la construction. Les polylignes prennent en charge les styles de trait suivants :

  • strokeColor spécifie une couleur HTML hexadécimale au format "#FFFFFF". La classe Polyline ne prend pas en charge les noms de couleur.
  • strokeOpacity spécifie une valeur numérique entre 0.0 et 1.0 pour déterminer l'opacité de la couleur de la ligne. Par défaut, l'opacité est définie sur 1.0.
  • strokeWeight spécifie la largeur de la ligne en pixels.

La propriété editable de la polyligne indique si les utilisateurs peuvent en modifier la forme. Voir les formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de déplacer la ligne.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
<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 creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Voir l'exemple (polyline-simple.html)

Supprimer une polyligne

Pour effacer une polyligne d'une carte, appliquez la méthode setMap(), en utilisant la valeur null comme argument. Dans l'exemple suivant, flightPath est un objet polyligne :

flightPath.setMap(null);

Notez que cette méthode ne supprime pas la polyligne. Cela l'efface simplement de la carte. Si vous souhaitez supprimer la polyligne, vous devez d'abord l'effacer de la carte, puis le définir elle-même sur null.

Voir l'exemple (polyline-remove.html)

Inspecter une polyligne

Une polyligne définit une série de coordonnées sous la forme d'un tableau d'objets LatLng. Ces coordonnées déterminent le tracé de la ligne. Pour récupérer les coordonnées, appelez la méthode getPath(), qui renvoie un tableau de type MVCArray. Vous pouvez manipuler et inspecter le tableau en utilisant les opérations suivantes :

  • getAt() renvoie les coordonnées LatLng à une valeur d'indice base zéro donnée.
  • insertAt() insère des coordonnées LatLng transmises à une valeur d'indice base zéro donnée. Notez que toute coordonnée existante à cette valeur d'indice est déplacée vers l'avant.
  • removeAt() supprime des coordonnées LatLng à une valeur d'indice base zéro donnée.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
<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 creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Voir l'exemple (polyline-complex.html)

Personnaliser une polyligne

Vous pouvez ajouter des images vectorielles à une polyligne sous la forme de symboles. En combinant des symboles et la classe PolylineOptions, vous pouvez parfaitement contrôler l'aspect des polylignes sur votre carte. Pour plus d'informations sur les flèches, les lignes en pointillés, les symboles personnalisés et les symboles animés, voir Symboles.

Polygones

Un polygone représente une zone délimitée par un tracé fermé (ou une boucle) et définie par une série de coordonnées. Les objets Polygon sont similaires aux objets Polyline en ce sens qu'ils consistent en une série de coordonnées dans une séquence ordonnée. Les polygones sont dessinés au moyen d'un trait et d'un remplissage. Vous pouvez définir des couleurs, des épaisseurs et des opacités personnalisées pour le contour du polygone (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone délimitée (le remplissage). Les couleurs doivent être indiquées au format HTML hexadécimal. Les noms de couleur ne sont pas pris en charge.

Les objets Polygon peuvent décrire des formes complexes, notamment :

  • Des zones non contigües multiples définies par un seul polygone.
  • Des zones contenant un espace vide.
  • Des intersections d'une ou plusieurs zones.

Pour définir une forme complexe, vous devez utiliser un polygone avec plusieurs tracés.

Remarque : Le calque Data offre un moyen simple pour dessiner des polygones. Il gère pour vous le tracé des polygones, afin de pouvoir dessiner plus facilement des polygones avec des trous. Voir la documentation sur le calque Data.

Ajouter un polygone

Étant donné qu'une zone polygonale peut inclure plusieurs tracés séparés, la propriété paths de l'objet Polygon spécifie un tableau de tableaux, chacun du type MVCArray. Chaque tableau définit une séquence séparée de coordonnées LatLng ordonnées.

Pour les polygones simples constitués d'un seul tracé, vous pouvez construire un objet Polygon avec un seul tableau de coordonnées LatLng. Google Maps JavaScript API convertit ce tableau simple en un tableau de tableaux au moment de la construction lorsqu'il le stocke dans la propriété paths. L'API fournit une méthode getPath() simple pour les polygones constitués d'un seul tracé.

La propriété editable du polygone indique si les utilisateurs peuvent en modifier la forme. Voir les formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de déplacer la forme.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<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 creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Voir l'exemple (polygon-simple.html)

Auto-complétion des polygones

L'objet Polygon, dans l'exemple ci-dessus, consiste en quatre ensembles de coordonnées LatLng. Notez que le premier et le dernier ensemble définissent le même point géographique, ce qui ferme la boucle. En pratique toutefois, étant donné que les polygones définissent des zones fermées, il n'est pas nécessaire de définir le dernier ensemble de coordonnées. Google Maps JavaScript API complète automatiquement le polygone en dessinant un trait entre le dernier et le premier point géographique pour tout tracé donné.

L'exemple suivant est identique à l'exemple précédent, sauf que les dernières coordonnées LatLng ont été omises : Voir l'exemple (polygon-autoclose.html)

Supprimer un polygone

Pour effacer un polygone d'une carte, appliquez la méthode setMap(), en utilisant la valeur null comme argument. Dans l'exemple suivant, bermudaTriangle est un objet polygone :

bermudaTriangle.setMap(null);

Notez que cette méthode ne supprime pas le polygone. Cela l'efface simplement de la carte. Si vous souhaitez supprimer le polygone, vous devez d'abord l'effacer de la carte, puis le définir lui-même sur null.

Inspecter un polygone

Un polygone spécifie une série de coordonnées sous la forme d'un tableau de tableaux, où chaque tableau est du type MVCArray. Chaque tableau « secondaire » est un tableau de coordonnées LatLng spécifiant un tracé unique. Pour récupérer ces coordonnées, appelez la méthode getPaths() de l'objet Polygon. Étant donné que le tableau est de type MVCArray, vous devez le manipuler et l'inspecter en effectuant les opérations suivantes :

  • getAt() renvoie les coordonnées LatLng à une valeur d'indice base zéro donnée.
  • insertAt() insère des coordonnées LatLng transmises à une valeur d'indice base zéro donnée. Notez que toute coordonnée existante à cette valeur d'indice est déplacée vers l'avant.
  • removeAt() supprime des coordonnées LatLng à une valeur d'indice base zéro donnée.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}
<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 creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

Voir l'exemple (polygon-arrays.html)

Créer un trou dans un polygone

Pour créer un espace vide dans un polygone, vous devez créer deux tracés l'un à l'intérieur de l'autre. Pour créer le trou, les coordonnées qui définissent le tracé intérieur doivent être dans l'ordre inverse à celles qui définissent le tracé extérieur. Par exemple, si les coordonnées du tracé extérieur sont en sens horaire, celles du tracé intérieur doivent être en sens antihoraire.

Remarque : Le calque Data gère l'ordre du tracé intérieur et du tracé extérieur pour vous, ce qui simplifie la création de polygones avec des trous. Voir la documentation sur le calque Data.

L'exemple suivant dessine un polygone avec deux tracés, le tracé intérieur étant dans la direction opposée au tracé extérieur.

// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<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 creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Voir l'exemple (polygon-hole.html).

Rectangles

En plus d'une classe générique Polygon, Google Maps JavaScript API propose une classe spécifique pour les objets Rectangle afin de simplifier leur construction.

Ajouter un rectangle

Un objet Rectangle est similaire à un objet Polygon, en ce sens que vous pouvez définir des couleurs, des épaisseurs et des opacités personnalisées pour le contour du rectangle (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone délimitée par le rectangle (le remplissage). Les couleurs doivent être indiquées au format numérique HTML hexadécimal.

Mais contrairement à l'objet Polygon, vous ne définissez pas d'objet paths pour un Rectangle. À la place, un rectangle est associé à une propriété bounds qui définit sa forme en spécifiant des valeurs google.maps.LatLngBounds.

La propriété editable du rectangle indique si les utilisateurs peuvent en modifier la forme. Voir les formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de déplacer le rectangle.

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<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 adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

Voir l'exemple (rectangle-simple.html)

Le code suivant crée un rectangle à chaque fois que l'utilisateur change de niveau de zoom sur la carte. La taille du rectangle est déterminée par la fenêtre d'affichage.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<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 creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

Voir l'exemple (rectangle-zoom.html)

Supprimer un rectangle

Pour effacer un rectangle d'une carte, appliquez la méthode setMap(), en utilisant la valeur null comme argument.

rectangle.setMap(null);

Notez que cette méthode ne supprime pas le rectangle. Cela l'efface simplement de la carte. Si vous souhaitez supprimer le rectangle, vous devez d'abord l'effacer de la carte, puis le définir lui-même sur null.

Cercles

En plus de la classe générique Polygon, Google Maps JavaScript API propose une classe spécifique pour les objets Circle afin de simplifier leur construction.

Ajouter un cercle

Un objet Circle est similaire à un objet Polygon, en ce sens que vous pouvez définir des couleurs, des épaisseurs et des opacités personnalisées pour le contour du cercle (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone délimitée par le cercle (le remplissage). Les couleurs doivent être indiquées au format numérique HTML hexadécimal.

Mais contrairement à l'objet Polygon, vous ne définissez pas d'objet paths pour un objet Circle. À la place, le cercle est associé à deux propriétés supplémentaires qui définissent sa forme :

  • center indique la valeur google.maps.LatLng du centre du cercle.
  • radius indique le rayon du cercle en mètres.

La propriété editable du cercle indique si les utilisateurs peuvent en modifier la forme. Voir les formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de déplacer le cercle.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<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 creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

Voir l'exemple (circle-simple.html)

Supprimer un cercle

Pour effacer un cercle d'une carte, appliquez la méthode setMap(), en utilisant la valeur null comme argument.

circle.setMap(null);

Notez que cette méthode ne supprime pas le cercle. Cela l'efface simplement de la carte. Si vous souhaitez supprimer le cercle, vous devez d'abord l'effacer de la carte, puis le définir lui-même sur null.

Formes déplaçables et modifiables par l'utilisateur

Rendre une forme modifiable lui ajoute une poignée que les utilisateurs peuvent utiliser pour repositionner, déformer et redimensionner la forme directement sur la carte. Il est également possible de rendre une forme déplaçable pour que les utilisateurs puissent la faire glisser à un autre endroit de la carte.

Les modifications apportées par l'utilisateur à l'objet ne sont pas conservées d'une session à une autre. Si vous souhaitez conserver les modifications apportées par l'utilisateur, vous devez capturer et stocker les informations vous-même.

Rendre une forme modifiable

Toute forme (polylignes, polygones, cercles et rectangles) peut être rendue modifiable par l'utilisateur en définissant la propriété editable sur true dans ses options.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Voir l'exemple (user-editable-shapes.html)

Rendre une forme déplaçable

Par défaut, la position d'une forme dessinée sur une carte est fixe. Pour permettre aux utilisateurs de faire glisser une forme jusqu'à un autre point de la carte, définissez la propriété draggable sur true dans ses options.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Si vous rendez un polygone ou une polyligne déplaçable, songez également à en faire un objet géodésique, en définissant sa propriété geodesic sur true.

Lorsqu'il est déplacé, un polygone géodésique conserve sa véritable forme géographique, ce qui le fait apparaître distordu si on le déplace vers le nord ou le sud dans une projection de Mercator. Les polygones non géodésiques conserveront toujours leur aspect initial à l'écran.

Dans le cas d'une polyligne géodésique, les segments de la polyligne sont dessinés en tant que tracé le plus court entre deux points sur la surface de la Terre, considérant que la Terre est une sphère, contrairement aux lignes droites sur la projection de Mercator.

Pour plus d'informations sur les systèmes de coordonnées, voir la documentation sur les types de carte.

La carte suivante montre deux triangles avec approximativement la même taille et les mêmes dimensions. La propriété geodesic du triangle rouge est définie sur true. Notez comme il change de forme à mesure qu'il est déplacé vers le nord.

Voir l'exemple (polygon-draggable.html)

Écouter des événements de modification

Lorsqu'une forme est modifiée, un événement est déclenché à la fin de la modification. Les événements de ce type sont présentés ci-dessous.

Forme Événements
Cercle radius_changed
center_changed
Polygone insert_at
remove_at
set_at

L'écouteur doit être défini sur le tracé du polygone. Si le polygone présente plusieurs tracés, un écouteur doit être défini sur chaque tracé.

Polyligne insert_at
remove_at
set_at

L'écouteur doit être défini sur le tracé de la polyligne.

Rectangle bounds_changed

Quelques extraits de code utiles :

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Observez un exemple de gestion d'un événement de modification sur un rectangle : Voir l'exemple (rectangle-event.html).

Écouter des événements de déplacement

Lorsque l'on déplace une forme, des événements sont déclenchés au début et à la fin de l'action de déplacement, ainsi que pendant le déplacement. Les événements suivants sont déclenchés pour les polylignes, les polygones, les cercles et les rectangles.

Événement Description
dragstart Déclenché lorsque l'utilisateur commence à faire glisser la forme.
drag Déclenché en continu pendant que l'utilisateur est en train de faire glisser la forme
dragend Déclenché lorsque l'utilisateur arrête de faire glisser la forme.

Pour plus d'informations sur la gestion des événements, voir la documentation sur les événements.

Envoyer des commentaires concernant…

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