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

Symboles

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

Introduction

Les symboles sont utiles lorsque vous souhaitez utiliser une icône vectorielle sur un marqueur ou ajouter une image à une polyligne.

Un objet Symbol est une image vectorielle qui peut être affichée sur un objet Marker ou Polyline. La forme du symbole est définie par un tracé au moyen d'une notation de tracé SVG. Bien que la propriété path soit la seule requise, l'objet Symbol prend en charge un éventail de propriétés qui vous permettent de personnaliser ses aspects visuels, tels que la couleur et l'épaisseur du trait et du remplissage. Voir la liste des propriétés ci-dessous.

Plusieurs symboles prédéfinis sont disponibles via la classe SymbolPath. Voir la liste ci-dessous.

Propriétés d'un symbole

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

Un objet Symbol prend en charge les propriétés suivantes :

  • path (obligatoire) désigne le tracé qui donne sa forme au symbole. Vous pouvez utiliser l'un des tracés prédéfinis dans google.maps.SymbolPath ou définir un tracé personnalisé en utilisant une notation de tracé 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 fractionnelle, par exemple 0.2, pour que les points résultants mis à l'échelle tiennent dans le carré.
  • anchor définit la position du symbole par rapport au marqueur 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'objet anchor, respectivement. Par défaut, un symbole est ancré aux coordonnées (0, 0). La position du symbole est exprimée dans le même système de coordonnées que son tracé.
  • fillColor désigne la couleur de remplissage du symbole (c'est-à-dire la zone délimitée par le trait). Toutes les couleurs CSS3 sont prises en charge, à l'exception des noms de couleurs étendus. Pour les symboles sur des marqueurs, la couleur par défaut est le noir. Pour les symboles sur des polylignes, la couleur par défaut est celle du trait de la polyligne correspondante.
  • fillOpacity désigne l'opacité relative (c'est-à-dire le manque de transparence) du remplissage du symbole. Les valeurs sont échelonnées de 0.0 (totalement transparent) à 1.0 (totalement opaque). Par défaut, l'opacité est définie sur 0.0.
  • rotation désigne l'angle de rotation du symbole, exprimé en degrés en sens horaire. Par défaut, la rotation d'un symbole de marqueur est de 0 et la rotation d'un symbole de polyligne est définie par l'angle du bord sur lequel il repose. 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 mise à l'échelle de la taille du symbole. Pour les symboles de marqueur, l'échelle est définie par défaut sur 1. Après sa mise à l'échelle, le symbole peut être de 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 pixels centré sur l'ancre du symbole.
  • strokeColor désigne 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 marqueurs, la couleur par défaut est le noir. 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 le manque de transparence) du trait du symbole. Les valeurs sont échelonnées de 0.0 (totalement transparent) à 1.0 (totalement opaque). Pour les symboles de marqueur, cette valeur est définie par défaut sur 1.0. Pour les symboles sur des polylignes, la valeur par défaut est celle de l'opacité du trait de la polyligne.
  • strokeWeight définit l'épaisseur du contour du symbole. Cette valeur est par défaut la valeur scale du symbole.

Symboles prédéfinis

Google Maps JavaScript API fournit des symboles intégrés que vous pouvez ajouter à des marqueurs ou à des polylignes via la classe SymbolPath.

Les symboles par défaut incluent un cercle et deux types de flèches. Tant des flèches pointant vers l'avant que des flèches pointant 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 marqueur

Pour afficher une icône vectorielle sur un objet marker, transmettez un littéral objet Symbol avec le tracé souhaité à la propriété icon du marqueur.

L'exemple ci-dessous crée une icône en utilisant l'un des tracés vectoriels prédéfinis.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    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 uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Voir l'exemple (marker-symbol-predefined)

L'exemple suivant utilise une notation de tracé SVG afin de créer une icône personnalisée pour un marqueur.

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    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 uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Voir l'exemple (marker-symbol-custom)

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 objets IconSequence, avec les propriétés suivantes :

  • icon (obligatoire) désigne le symbole à représenter sur la ligne.
  • offset détermine la distance à laquelle représenter l'icône à partir du début de 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'). Par défaut, la distance est '100%'.
  • repeat indique 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 parfaitement contrôler l'aspect des polylignes sur votre carte. Veuillez trouver 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 l'exemple (overlay-symbol-arrow)

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 l'exemple (overlay-symbol-dashed)

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 l'exemple (overlay-symbol-custom)

Animer un symbole

Vous pouvez animer un symbole le long d'un tracé en utilisant la fonction window.setInterval() de l'élément DOM pour changer le décalage du symbole à des intervalles fixes.

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

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 an animated symbol to a polyline.

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

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

Voir l'exemple (overlay-symbol-animate)

Envoyer des commentaires concernant…

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