Formes

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme: Android iOS JavaScript

Vous pouvez ajouter différentes formes à votre carte. Une forme est un objet sur la 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 pour que les utilisateurs puissent les modifier ou les faire glisser.

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 se compose d'un tableau d'emplacements LatLng et crée une série de segments de ligne qui connectent ces emplacements dans une séquence ordonnée.

Ajouter une polyligne

Le constructeur Polyline utilise un ensemble de PolylineOptions spécifiant 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 pondérations et des opacités personnalisées pour le trait de la ligne dans l'élément PolylineOptions lorsque vous créez votre ligne. Vous pouvez également modifier 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 n'accepte pas les couleurs nommées.
  • strokeOpacity spécifie une valeur numérique comprise 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 la section Formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de faire glisser la ligne.

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

Supprimer une polyligne

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

Inspecter une polyligne

Une polyligne spécifie 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 à l'aide des opérations suivantes:

  • getAt() renvoie LatLng à une valeur d'index basée sur zéro.
  • insertAt() insère un LatLng transmis à une valeur d'index basée sur zéro. Notez que toutes les coordonnées existantes à cette valeur d'index sont déplacées vers l'avant.
  • removeAt() supprime un LatLng selon une valeur d'index basée sur zéro.

TypeScript

// 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);

  // 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

Personnaliser une polyligne

Vous pouvez ajouter des images vectorielles à une polyligne sous la forme de symboles. Grâce à la combinaison de symboles et à la classe PolylineOptions, vous pouvez contrôler l'apparence des polylignes de 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 la page Symboles.

Polygones

Un polygone représente une zone délimitée par un tracé (ou une boucle) fermé, définie par une série de coordonnées. Les objets Polygon sont semblables aux objets Polyline dans la mesure où 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 pondérations et des opacités personnalisées pour le bord du polygone (le trait) ainsi que des couleurs et des opacités personnalisées pour la zone fermé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:

  • 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 de données fournit un moyen simple de dessiner des polygones. Il gère pour vous le tracé des polygones, ce qui facilite leur traçage. Consultez la documentation sur la couche de données.

Ajouter un polygone

Étant donné qu'une zone polygonale peut inclure plusieurs chemins séparés, 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 classé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 tableau de tableaux lors de sa construction dans la propriété paths. L'API fournit une méthode getPath() simple pour les polygones composés d'un seul chemin.

La propriété editable du polygone spécifie si les utilisateurs peuvent modifier la forme. Consultez la section Formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de faire glisser la forme.

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

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 termine la boucle. Toutefois, en pratique, étant donné que les polygones définissent des zones fermées, vous n'avez pas besoin de spécifier le dernier ensemble de coordonnées. L'API Maps JavaScript complète automatiquement le polygone en traçant un trait qui relie le dernier lieu au premier emplacement pour n'importe quel trajet.

L'exemple suivant est identique au précédent, sauf que le dernier élément LatLng est omis : Afficher l'exemple.

Supprimer un polygone

Pour supprimer un polygone de la carte, appelez la méthode setMap() qui transmet null comme argument. Dans l'exemple suivant, bermudaTriangle est un objet polygonal:

bermudaTriangle.setMap(null);

Notez que cette méthode ne supprime pas le polygone. Elle supprime le polygone de la carte. Si vous souhaitez supprimer le polygone, vous devez le supprimer 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 "feuille" est un tableau de coordonnées LatLng spécifiant un seul chemin. Pour récupérer ces coordonnées, appelez la méthode getPaths() de l'objet Polygon. Étant donné que le tableau est un MVCArray, vous devez le manipuler et l'inspecter à l'aide des opérations suivantes:

  • getAt() renvoie LatLng à une valeur d'index basée sur zéro.
  • insertAt() insère un LatLng transmis à une valeur d'index basée sur zéro. Notez que toutes les coordonnées existantes à cette valeur d'index sont déplacées vers l'avant.
  • removeAt() supprime un LatLng selon une valeur d'index basée sur zéro.

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

Créer un trou dans un polygone

Pour créer une zone 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 chemin intérieur doivent être dans l'ordre inverse à celles définissant le chemin extérieur. Par exemple, si les coordonnées du tracé extérieur sont dans le sens des aiguilles d'une montre, le tracé intérieur doit être dans le sens inverse des aiguilles d'une montre.

Remarque:La couche de données gère pour vous l'ordre des tracés intérieur et extérieur, ce qui facilite la création de polygones avec des trous. Consultez la documentation sur la couche de données.

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

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

Rectangles

En plus de la classe générique Polygon, 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 dans le sens où vous pouvez définir des couleurs, des épaisseurs et des opacités personnalisées pour le bord du rectangle (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone à l'intérieur du rectangle (le remplissage). Les couleurs doivent être indiquées en style HTML numérique hexadécimal.

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

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

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

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

TypeScript

// 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;

JavaScript

// 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;
Voir un exemple

Essayer l'exemple

Supprimer un rectangle

Pour supprimer un rectangle de la carte, appelez la méthode setMap() qui transmet null comme argument.

rectangle.setMap(null);

Notez que cette méthode ne supprime pas le rectangle. Elle supprime le rectangle de la carte. Si vous souhaitez plutôt supprimer le rectangle, vous devez le retirer de la carte, puis le définir lui-même sur null.

Cercles

En plus de la 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 dans la mesure où vous pouvez définir des couleurs, des épaisseurs et des opacités personnalisées pour le bord du cercle (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone à l'intérieur du cercle (le remplissage). Les couleurs doivent être indiquées au format numérique HTML hexadécimal.

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

  • center spécifie le 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 la section Formes modifiables par l'utilisateur ci-dessous. De même, vous pouvez définir la propriété draggable pour permettre aux utilisateurs de faire glisser le cercle.

TypeScript

// 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;

JavaScript

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;
Voir un exemple

Essayer l'exemple

Supprimer un cercle

Pour supprimer un cercle de la carte, appelez la méthode setMap() qui transmet null comme argument.

circle.setMap(null);

Notez que cette méthode ne supprime pas le cercle. Elle supprime le cercle de la carte. Si vous souhaitez plutôt supprimer le cercle, supprimez-le de la carte, puis définissez le cercle sur null.

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

Rendre une forme modifiable ajoute des poignées qui permettent aux utilisateurs de repositionner, remodeler et redimensionner la forme directement sur la carte. Vous pouvez également rendre une forme déplaçable afin que les utilisateurs puissent la déplacer vers un autre emplacement sur la carte.

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

Rendre une forme modifiable

Toutes les formes (polylignes, polygones, cercles et rectangles) peuvent être définies comme modifiables par l'utilisateur, en définissant editable sur true dans les options de la forme.

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 un exemple

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 vers un autre emplacement sur la carte, définissez draggable sur true dans les options de la forme.

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

Lorsque vous activez le déplacement d'un polygone ou d'une polyligne, vous devez également envisager de rendre le polygone ou la polyligne géodésique en définissant sa propriété geodesic sur true.

Un polygone géodésique conservera sa véritable forme géographique lorsqu'il sera déplacé, ce qui le fera apparaître déformé lorsqu'il sera déplacé vers le nord ou le sud dans la projection de Mercator. Les polygones non géodésiques conserveront toujours leur apparence initiale à l'écran.

Dans une polyligne géodésique, les segments de la polyligne sont tracés comme le tracé le plus court entre deux points sur la surface de la Terre, en supposant que la Terre soit une sphère, par opposition aux lignes droites de 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 de taille et de dimensions à peu près identiques. 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 un exemple

Écouter des événements de modification

Lorsqu'une forme est modifiée, un événement est déclenché à la fin de la modification. Ces événements sont listés ci-dessous.

Forme Événements
Circle 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 comporte plusieurs tracés, un écouteur doit être défini pour chaque tracé.

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

Consultez un exemple de gestion d'un événement de modification sur un rectangle : voir un exemple.

Écouter des événements de déplacement

Lorsqu'une forme est déplacée, les événements sont déclenchés au début et à la fin de l'action de déplacement, ainsi que lors du 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 en savoir plus sur la gestion des événements, consultez la documentation sur les événements.