Formes et lignes

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 : lignes, polygones, cercles et rectangles. Vous pouvez également configurer vos formes afin 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 est composé d'un tableau de points géographiques LatLng qui crée une série de segments de lignes, lesquels relient ces points dans une séquence ordonnée.

Ajouter une polyligne

Le constructeur Polyline utilise un ensemble de 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 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. La valeur par défaut est 1.0.
• strokeWeight spécifie la largeur de la ligne en pixels.

La propriété editable de la polyligne indique si les utilisateurs peuvent modifier la forme. Consultez Formes déplaçables et 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
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

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

  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js

Supprimer une polyligne

Pour effacer une polyligne de la carte, appelez la méthode setMap() en utilisant 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. Elle l'efface de la carte. Si vous souhaitez supprimer la polyligne, vous devez d'abord l'effacer de la carte, puis la définir elle-même sur null.

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 getPath(), qui renverra un tableau de type MVCArray. Vous pouvez manipuler et inspecter le tableau en utilisant les opérations suivantes :

• getAt() renvoie des 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.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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: google.maps.MapMouseEvent) {
  const path = poly.getPath();

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// 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.
let poly;
let 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) {
  const 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.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js

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 en savoir plus sur les flèches, les lignes en pointillés, les symboles personnalisés et les symboles animés, consultez 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 semblables aux objets Polyline dans la mesure où ils sont composés d'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, y compris :

• Plusieurs zones non contigües 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. Consultez la documentation sur le calque Data.

Ajouter un polygone

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

Pour les polygones simples constitués d'un seul tracé, vous pouvez construire un Polygon à l'aide d'un seul tableau de coordonnées LatLng. L'API Maps JavaScript convertit le tableau simple en un tableau de tableaux lors de sa construction lorsqu'elle 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 modifier la forme. Consultez Formes déplaçables et 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(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

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

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Auto-complétion des polygones

Dans l'exemple ci-dessus, Polygon se compose de quatre ensembles de coordonnées LatLng, mais notez que le premier et le dernier ensemble définissent le même emplacement, ce qui ferme la boucle. Dans la pratique, en effet, é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. L'API Maps JavaScript complète automatiquement le polygone en dessinant un trait entre le dernier et le premier lieu pour tout tracé donné.

L'exemple suivant est identique au précédent, sauf que les dernières coordonnées LatLng sont omises : voir l'exemple.

Supprimer un polygone

Pour effacer un polygone de la carte, appelez la méthode setMap() en utilisant 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. Elle l'efface 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 sa série de coordonnées sous la forme d'un tableau de tableaux, où chaque tableau est de type MVCArray. Chaque tableau "secondaire" est un tableau de coordonnées LatLng spécifiant un seul tracé. 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 à l'aide des opérations suivantes :

• getAt() renvoie des 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.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

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

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const 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();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

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

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// 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.
let map;
let 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const 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();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

window.initMap = initMap;
index.js

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. Consultez 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(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const 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.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Rectangles

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

Ajouter un rectangle

Un Rectangle est semblable à un 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.

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

La propriété editable du rectangle indique si les utilisateurs peuvent modifier la forme. Consultez Formes déplaçables et 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(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js

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(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

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

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js

Supprimer un rectangle

Pour effacer un rectangle de la carte, appelez la méthode setMap() en utilisant null comme argument.

rectangle.setMap(null);

Notez que cette méthode ne supprime pas le rectangle. Elle l'efface 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 d'une classe Polygon générique, l'API Google Maps JavaScript inclut une classe spécifique pour les objets Circle afin de simplifier leur construction.

Ajouter un cercle

Un Circle est semblable à un 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.

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

• center spécifie les coordonnées google.maps.LatLng du centre du cercle.
• radius spécifie le rayon du cercle, en mètres.

La propriété editable du cercle indique si les utilisateurs peuvent modifier la forme. Consultez Formes déplaçables et 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.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  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(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

const 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.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js

Supprimer un cercle

Pour effacer un cercle de la carte, appelez la méthode setMap() en utilisant null comme argument.

circle.setMap(null);

Notez que cette méthode ne supprime pas le cercle. Elle l'efface 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

Lorsque vous rendez une forme modifiable, des poignées lui sont ajoutées pour permettre aux utilisateurs de la repositionner, la déformer et la redimensionner 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

Pour permettre aux utilisateurs de modifier une forme (polyligne, polygone, cercle et rectangle), définissez 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

Rendre une forme déplaçable

Par défaut, la position d'une forme dessinée sur une carte est fixe. Pour que les utilisateurs puissent faire glisser une forme vers un autre point de la carte, définissez 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 conservent 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 en savoir plus sur les systèmes de coordonnées, consultez le guide sur les coordonnées de carte et de tuile.

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

Écouter des événements de modification

Lorsque vous modifiez une forme, un événement est déclenché à la fin de l'action. Les événements de ce type sont présentés ci-dessous.

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.');
});

Pour voir un exemple de gestion d'un événement de modification sur un rectangle, cliquez ici.

É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.

Pour en savoir plus sur la gestion des événements, consultez la documentation sur les événements.