Symboles (icônes vectorielles)

  1. Introduction
  2. Propriétés d'un symbole
  3. Symboles prédéfinis
  4. Ajouter un symbole à un repère
  5. Ajouter un symbole à une polyligne
  6. Animer un symbole

Introduction

Un Symbol est une icône vectorielle qui peut s'afficher sur un Marker ou un objet Polyline. La forme du symbole est définie par un tracé au format SVG. Bien que path soit la seule propriété obligatoire, l'objet Symbol accepte de nombreuses propriétés vous permettant de personnaliser les aspects visuels, comme la couleur et l'épaisseur du trait et du remplissage. Consultez la liste des propriétés.

Plusieurs symboles prédéfinis sont disponibles via la classe SymbolPath. Vous pouvez en consulter la liste ci-dessous.

Propriétés d'un symbole

Notez que le comportement par défaut d'une propriété Symbol varie légèrement selon qu'elle apparaît sur un repère ou sur une polyligne. Ces différences sont décrites dans la liste des propriétés ci-dessous.

Un Symbol est compatible avec les propriétés suivantes :

  • path (obligatoire) correspond au tracé qui définit la forme du symbole. Vous pouvez utiliser l'un des tracés prédéfinis dans google.maps.SymbolPath ou définir un tracé personnalisé au format SVG. Remarque : les tracés vectoriels sur une polyligne doivent tenir dans un carré de 22 x 22 pixels. Si votre tracé inclut des points en dehors de ce carré, vous devez définir la propriété scale du symbole sur une valeur fractionnaire, par exemple "0.2", afin que les points ainsi ajustés se trouvent dans le carré.
  • anchor définit la position du symbole par rapport au repère ou à la polyligne. Les coordonnées du tracé du symbole sont traduites vers la gauche et le haut par les coordonnées x et y de l'ancre, respectivement. Par défaut, un symbole est ancré à (0, 0). La position du symbole est exprimée dans le même système de coordonnées que son tracé.
  • fillColor est la couleur de remplissage du symbole (c'est-à-dire la région bordée par le trait). Toutes les couleurs CSS3 sont compatibles, à l'exception des noms de couleurs étendus. Pour les symboles sur des repères, la couleur par défaut est le noir ('black'). Pour les symboles sur des polylignes, la couleur par défaut est celle du trait de la polyligne correspondante.
  • fillOpacity définit l'opacité relative (c'est-à-dire la non-transparence) du remplissage du symbole. Les valeurs sont comprises entre 0.0 (totalement transparent) et 1.0 (totalement opaque). La valeur par défaut est 0.0.
  • rotation est l'angle de rotation du symbole, exprimé en degrés dans le sens des aiguilles d'une montre. Par défaut, la rotation d'un symbole de repère est de 0 et la rotation d'un symbole de polyligne est définie par l'angle du bord sur lequel il s'appuie. Définir la rotation d'un symbole sur une polyligne maintient cette rotation de sorte qu'elle ne suive plus la courbe de la ligne.
  • scale définit la taille de l'ajustement du symbole. Pour les repères de symboles, l'ajustement par défaut est de 1. Après l'ajustement, le symbole peut avoir n'importe quelle taille. Pour les symboles sur une polyligne, l'échelle par défaut est celle de l'épaisseur du trait de la polyligne. Après la mise à l'échelle, le symbole doit tenir dans un carré de 22 x 22 px centré sur l'ancre du symbole.
  • strokeColor est la couleur du contour du symbole. Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus. Pour les symboles sur des repères, la couleur par défaut est le noir ('black'). Pour les symboles sur une polyligne, la couleur par défaut est celle du contour de la polyligne.
  • strokeOpacity détermine l'opacité relative (c'est-à-dire la non-transparence) du trait du symbole. Les valeurs sont comprises entre 0.0 (totalement transparent) et 1.0 (totalement opaque). Pour les repères de symboles, la valeur par défaut est de 1.0. Pour les symboles sur des polylignes, la valeur par défaut est l'opacité du trait de la polyligne.
  • strokeWeight définit l'épaisseur du contour du symbole. La valeur par défaut est le scale du symbole.

Symboles prédéfinis

L'API Maps JavaScript fournit des symboles intégrés que vous pouvez ajouter aux repères ou aux polylignes via la classe SymbolPath.

Les symboles par défaut incluent un cercle et deux types de flèches. Des flèches pointant vers l'avant et vers l'arrière sont disponibles. Cela s'avère particulièrement utile pour les polylignes, parce que l'orientation d'un symbole sur une polyligne est fixe. On désigne par "l'avant" la direction finale de la polyligne.

Vous pouvez modifier le trait ou le remplissage des symboles prédéfinis en utilisant les options de symbole par défaut.

Les symboles prédéfinis suivants sont inclus :

Nom Description Exemple
google.maps.SymbolPath.CIRCLE Cercle
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Flèche fermée sur tous les côtés orientée vers l'arrière
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Flèche fermée sur tous les côtés orientée vers l'avant
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Flèche ouverte d'un côté orientée vers l'arrière
google.maps.SymbolPath.FORWARD_OPEN_ARROW Flèche ouverte d'un côté orientée vers l'avant

Ajouter un symbole à un repère

Pour afficher une icône vectorielle sur un AdvancedMarkerElement, utilisez un élément XML SVG. L'exemple suivant montre comment ajouter un élément XML SVG à un AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

Ajouter un symbole à une polyligne

Pour afficher des symboles sur une polyligne, définissez la propriété icons[] de l'objet PolylineOptions. Le tableau icons[] utilise un ou plusieurs littéraux d'objets IconSequence, avec les propriétés suivantes :

  • icon (obligatoire) correspond au symbole à afficher sur la ligne.
  • offset détermine la distance à partir du début de la ligne à laquelle une icône doit être affichée. Cette distance peut être exprimée en pourcentage de la longueur de la ligne (par exemple, "50%") ou en pixels (par exemple, "50px"). La valeur par défaut est "100%".
  • repeat détermine la distance entre des icônes consécutives sur la ligne. Cette distance peut être exprimée en pourcentage de la longueur de la ligne (par exemple, "50%") ou en pixels (par exemple, "50px"). Pour désactiver la répétition de l'icône, spécifiez "0". La valeur par défaut est "0".

En combinant des symboles et la classe PolylineOptions, vous pouvez contrôler l'apparence des polylignes sur votre carte. Vous trouverez ci-dessous quelques exemples de personnalisations à appliquer.

Flèches

Utilisez la propriété IconSequence.offset pour ajouter des flèches au début ou à la fin de votre polyligne.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Voir un exemple

Lignes en pointillés

Vous pouvez obtenir un effet de ligne en pointillés en définissant l'opacité de votre polyligne sur 0 et en plaçant en superposition un symbole opaque sur la ligne à des intervalles réguliers.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Voir un exemple

Tracés personnalisés

Les symboles personnalisés vous permettent d'ajouter de nombreuses formes différentes à une polyligne.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Voir un exemple

Animer un symbole

Vous pouvez animer un symbole le long d'un tracé à l'aide de la fonction window.setInterval() du DOM pour modifier le décalage du symbole à intervalles fixes.

TypeScript

// This example adds an animated symbol to a polyline.

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

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

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

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
Voir un exemple