Introduction

Un marqueur identifie un emplacement sur une carte. Par défaut, un marqueur utilise une image standard. Les marqueurs peuvent afficher des images personnalisées, auquel cas elles sont généralement appelées «icônes». Les marqueurs et les icônes sont des objets de type Marker. Vous pouvez définir une icône personnalisée dans le constructeur du marqueur ou en appelant setIcon() sur le marqueur. En savoir plus sur la personnalisation de l’image du marqueur ci-dessous.

De manière générale , les marqueurs sont un type de superposition. Pour plus d’informations sur les autres types de superposition, voir Dessin sur la carte.

Les marqueurs sont conçus pour être interactifs. Par exemple, ils reçoivent par défaut "click", afin que vous puissiez ajouter un écouteur d’événements pour faire apparaître une fenêtre d’informations affichant des informations personnalisées. Vous pouvez autoriser les utilisateurs à déplacer un marqueur sur la carte en définissant le marqueur « s draggable à true. Pour plus d’informations sur les marqueurs déplaçables, voir ci-dessous.

Ajouter un marqueur

Le constructeur google.maps.Marker prend un seul Marker options littéral d’objet, spécifiant les propriétés initiales du marqueur.

Les champs suivants sont particulièrement importants et couramment définis lors de la construction d’un marqueur:

• position (obligatoire) spécifie un LatLng identifiant l’affectation initiale du marqueur. Une façon de récupérer un LatLng consiste à utiliser le service de géocodage.
• map (facultatif) spécifie le Map sur lequel placer le marqueur. Si vous ne spécifiez pas la carte lors de la construction du marqueur, le marqueur est créé mais n’est pas attaché (ou affiché sur) la carte. Vous pouvez ajouter le marqueur plus tard en appelant le marqueur « s setMap().

L’exemple suivant ajoute un simple marqueur à une carte à Uluru, au centre de l’Australie:

Dans l’exemple ci-dessus, le marqueur est placé sur la carte lors de la construction du marqueur à l’aide de la propriété map dans les options du marqueur. Vous pouvez également ajouter le marqueur directement sur la carte en utilisant le marqueur « s setMap(), comme illustré dans l’exemple ci-dessous:

Le marqueur « s title apparaîtra comme une info-bulle.

Si vous ne souhaitez passer aucun Marker options dans le constructeur du marqueur, passez plutôt un objet vide {} dans le dernier argument du constructeur.

Voir l’exemple

Supprimer un marqueur

Pour supprimer un marqueur de la carte, appelez le setMap() méthode passant null comme argument.

marker.setMap(null);

Notez que ce qui précède ne supprime pas le marqueur. Il supprime le marqueur de la carte. Si à la place vous souhaitez supprimer le marqueur, vous devez le supprimer de la carte, puis définir le marqueur lui-même sur null.

Si vous souhaitez gérer un ensemble de marqueurs, vous devez créer un tableau pour contenir les marqueurs. En utilisant ce tableau, vous pouvez ensuite appeler setMap() sur chaque marqueur du tableau à tour de rôle lorsque vous devez supprimer les marqueurs. Vous pouvez supprimer les marqueurs en les supprimant de la carte, puis en définissant le tableau « s length sur 0, ce qui supprime toutes les références au marqueurs.

Voir l’exemple

Animer un marqueur

Vous pouvez animer les marqueurs afin qu’ils présentent un mouvement dynamique dans diverses circonstances. Pour spécifier la manière dont un le marqueur est animé, utilisez la propriété marker « s animation, de type google.maps.Animation. Les valeurs Animation suivantes sont acceptées:

• DROP indique que le marqueur doit tomber du haut de la carte à son emplacement final lors de son premier placement sur la carte. L’animation cessera une fois que le marqueur sera immobilisé et animation reviendra à null. Ce type d’animation est généralement spécifié lors de la création de Marker.
• BOUNCE indique que le marqueur doit rebondir dans lieu. Un marqueur de rebond continuera à rebondir jusqu’à ce que sa propriété animation soit explicitement définie sur null.

Vous peut lancer une animation sur un marqueur existant en appelant setAnimation() sur l’objet Marker.

Si vous avez plusieurs marqueurs , vous ne voudrez peut-être pas les déposer sur la carte en une seule fois. Vous pouvez utiliser setTimeout() pour espacer les animations de vos marqueurs « en utilisant un modèle comme celui illustré ci-dessous:

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

Voir l’exemple

Personnaliser une image de marqueur

Si vous souhaitez afficher une lettre ou un chiffre sur un marqueur, vous pouvez utiliser une étiquette de marqueur.Si vous avez besoin d’une plus grande personnalisation, vous pouvez définir une icône à afficher à la place de l’image du marqueur par défaut. La définition d’une icône implique de définir un certain nombre de propriétés qui déterminent le comportement visuel du marqueur.

Les sections ci-dessous décrivent les étiquettes de marqueur, les icônes simples, les icônes complexes et les symboles (icônes vectorielles).

Étiquettes de marqueur

Une étiquette de marqueur est une lettre ou un chiffre qui apparaît à l’intérieur d’un marqueur. L’image du marqueur dans cette section affiche une étiquette de marqueur avec la lettre «B» dessus. Vous pouvez spécifier un libellé de marqueur sous forme de chaîne ou d’objet MarkerLabel comprenant une chaîne et d’autres propriétés d’étiquette.

Lors de la création d’un marqueur, vous pouvez spécifier un label dans l’objet MarkerOptions. Vous pouvez également appeler setLabel() sur l’objet Marker pour définir le libellé sur un marqueur existant.

L’exemple suivant affiche des marqueurs étiquetés lorsque l’utilisateur clique sur la carte :

Icônes simples

Dans le cas le plus simple, une icône peut indiquer une image à utiliser à la place de l’icône de punaise Google Maps par défaut. Pour spécifier une telle icône, définissez la propriété du marqueur « s icon sur l’URL d’une image. L’API Maps JavaScript dimensionnera l’icône automatiquement.

Icônes complexes

Vous pouvez spécifier des formes complexes pour indiquer les régions cliquables et spécifier comment les icônes doivent apparaître par rapport aux autres superpositions (leur « ordre d’empilement »). Les icônes spécifiées de cette manière doivent définir leur icon propriétés d’un objet de type Icon.

Icon objets définissent une image. Ils définissent également le size de l’icône, le origin de l’icône (si l’image souhaitée fait partie d’un image dans un sprite, par exemple) et le anchor où le hotspot de l’icône doit être situé (qui est basé sur l’origine).

Si vous utilisez une étiquette avec un marqueur personnalisé, vous pouvez positionner l’étiquette avec la propriété labelOrigin dans la objet.

Conversion d’objets MarkerImage en type Icon

Jusqu’à la version 3.10 de l’API JavaScript Maps, les icônes complexes étaient définies comme des objets MarkerImage. Le littéral d’objet Icon a été ajouté dans la version 3.10 et remplace MarkerImage à partir de la version 3.11. Les littéraux d’objet Icon prennent en charge les mêmes paramètres que MarkerImage, ce qui vous permet de convertir facilement un MarkerImage à un Icon en supprimant le constructeur, en encapsulant les paramètres précédents dans {} « s et en ajoutant les noms de chaque paramètre. Par exemple:

devient

Symboles

En plus des images raster, un marqueur prend en charge l’affichage de chemins vectoriels appelés Symbols . Pour afficher un chemin vectoriel, transmettez un littéral d’objet Symbol avec le chemin souhaité à la propriété du marqueur « s icon. Vous pouvez utiliser l’un des chemins prédéfinis dans google.maps.SymbolPath ou définir un chemin personnalisé à l’aide de la notation de chemin SVG.

Pour plus d’informations, consultez la documentation des symboles.

Créer un marqueur déplaçable

Pour permettre aux utilisateurs de faire glisser un marqueur vers un autre emplacement sur la carte, définissez draggable sur true dans les options du marqueur.

Personnalisation supplémentaire du marqueur

Pour un marqueur entièrement personnalisé, voir l’exemple contextuel personnalisé.