FAQ API Google MapsConsultez toutes les FAQ

Pour créer un marker il faut utiliser le constructeur google.maps.Marker. Ce constructeur prend en paramètre un objet contenant les options à affecter au marker.

Les options minimales à initialiser sont :

• position : position où sera épinglé le marker sur la carte, cette option obligatoire doit être un objet google.maps.latLng ;
• map : la carte sur laquelle sera affiché le marker, peut être précisé après création du marker.

Exemple #1 :

  var oMarker = new google.maps.Marker({
    'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte
    'map' : oMap                                              // l'objet carte sur lequel est affiché le marker
  });

Exemple #2 :

  // création de l'objet option
  var markerOption = {
    'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte
    'map' : oMap                                              // l'objet carte sur lequel est affiché le marker
  };
  // création du marker
  var oMarker = new google.maps.Marker( markerOption);

Ne pas mettre de virgule après la dernière déclaration de propriété.

D'autres options peuvent être initialisées à la création du marker :

• anchorPoint (Point)
  Décalage, en pixel, de l'affichage de l'InfoWindow par rapport à la position du marker ;
• animation (Animation)
  Effet lors de l'affichage du marker ;
• clickable (boolean)
  La valeur par défaut est true. Si le boolean vaut true, le marker reçoit les événements de la souris ;
• crossOnDrag (boolean)
  La valeur par défaut est true. Si le boolean vaut false, l'effet d'animation sur le déplacement (relevé du marker et affichage d'une croix) est annulé ;
• cursor (string)
  Curseur affiché au survol du marker ;
• draggable (boolean)
  La valeur par défaut est false. Si le boolean vaut true, le marker peut être déplacé ;
• icon (string|Icon|Symbol)
  Image affichée pour le marker ;
• map (Map|StreetViewPanorama)
  Carte sur laquelle est accroché le marker ;
• opacity (number)
  Opacité du maker, la valeur doit être comprise entre 0.0 et 1.0. Avec une opacité de 0.0 le marker n'est pas visible mais reçoit les événements DOM ;
• optimized (boolean)
  La valeur par défaut est true. Méthode de rendu du marker, il est nécessaire de mettre cette option à false si l'on veut afficher des markers issus d'images GIF animés ou d'images PNG ;
• position (LatLng)
  Position du marker, obligatoire ;
• shape (MarkerShape)
  Zone d'interaction de l'image du marker utilisée pour la réaction avec la souris ;
• title (string)
  Texte affiché dans une infobulle au survol du marker ;
• visible (boolean)
  La valeur par défaut est true. Si le boolean vaut false, le marker ne sera pas affiché ;
• zIndex (number)
  Ordre d'affichage des markers, l'empilement en quelque sorte. Un marker avec un zIndex élevé sera affiché par-dessus celui qui possède un zIndex plus faible.

Pour afficher/masquer un marker, il suffit d'utiliser la méthode setVisible() de l'objet google.maps.Marker. Cette méthode accepte un boolean comme paramètre ; true pour afficher, false pour masquer :

 oMarker.setVisible(true);  // affiche le marker
 oMarker.setVisible(false); // masque le marker

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

 oMarker.setOptions({'visible' : true});  // affiche le marker
 oMarker.setOptions({'visible' : false}); // masque le marker

Pour supprimer un marker, il suffit d'utiliser la méthode setMap() ou setOptions() de l'objet google.maps.Marker, en passant en paramètre la valeur null.

Le marker n'est pas réellement supprimé, il est désaffecté de sa map d'origine, cette méthode permet également de rendre invisible un marker :

// supprime le marker 
 oMarker.setMap(null);               // méthode avec setMap
 oMarker.setOptions({'map' : null}); // méthode avec setOptions

Pour le réafficher, il faut lui réaffecter une map en utilisant les mêmes méthodes mais en passant en paramètre la référence à un objet map :

// affecte le marker à l'objet map oMap
 oMarker.setMap(oMap);               // méthode avec setMap
 oMarker.setOptions({'map' : oMap}); // méthode avec setOptions

Pour modifier l'aspect, l'image en fait, d'un marker, il suffit d'utiliser la méthode setIcon() de l'objet google.maps.Marker. Cette méthode accepte une string comme paramètre qui représente l'URL de l'image à afficher :

 oMarker.setIcon('http://maps.google.com/mapfiles/marker_green.png');  // affiche un marker vert
 oMarker.setIcon('http://maps.google.com/mapfiles/marker_yellow.png'); // affiche un marker jaune

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

 oMarker.setOptions({'icon' : 'http://maps.google.com/mapfiles/marker_green.png'});  // affiche un marker vert
 oMarker.setOptions({'icon' : 'http://maps.google.com/mapfiles/marker_yellow.png'}); // affiche un marker jaune

Cette option peut être initialisée directement à la création du marker :

  // création du marker
  var oMarker = new google.maps.Marker({
    'icon' : 'http://maps.google.com/mapfiles/marker_green.png', // affiche un marker vert
    'position' : new google.maps.LatLng(latitude, longitude),    // position d'ancrage du marker sur la carte
    'map' : oMap                                                 // l'objet carte sur lequel est affiché le marker
  });

On peut mettre n'importe quelle image, mais attention toutefois à la position des ancres qui, par défaut, est le milieu bas de l'image.

Pour modifier l'aspect d'un marker au survol de la souris, on utilise la méthode setIcon() de l'objet google.maps.Marker en passant en paramètre l'URL de l'image de remplacement.
On met l'appel à cette méthode à l'intérieur d'un événement via la méthode google.maps.event.addListener de l'objet google.maps.event :

  // changement sur le mouseover
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    if( !this.flagIcon){
      this.savIcon = this.getIcon();  // récupération de l'image via la méthode getIcon()
      this.flagIcon = true;
    }
    this.setIcon( 'http://maps.google.com/mapfiles/marker_yellow.png');
  });
  // restauration sur le mouseout
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.setIcon( this.savIcon);
  });

Lorsqu'il y a un changement d'image du marker, un deuxième événement mouseover est déclenché, ce qui nous oblige à mettre un flag d'initialisation.

Pour modifier l'aspect du curseur de la souris au survol d'un marker, il suffit d'utiliser la méthode setCursor() de l'objet google.maps.Marker. Cette méthode accepte une string comme paramètre qui représente la dénomination CSS du curseur :

 oMarker.setCursor( 'move');      // affiche quatre flèches en croix
 oMarker.setCursor( 'crosshair'); // affiche une croix fine

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

 oMarker.setOptions( {'cursor' : 'move'});      // affiche quatre flèches en croix
 oMarker.setOptions( {'cursor' : 'crosshair'}); // affiche une croix fine

Cette option peut être initialisée directement à la création du marker :

  // création du marker
  var oMarker = new google.maps.Marker( {
    'cursor' : 'move',                                        // affiche quatre flèches en croix au survol
    'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte
    'map' : oMap                                              // l'objet carte sur lequel est affiché le marker
  });

Les markers, tout comme les InfoWindows, sont affichés sur la carte suivant leur latitude, ceux ayant les plus petites latitudes étant affichés au-dessus de ceux ayant une latitude plus grande. En d'autres termes, ceux qui sont en bas de l'écran sont affichés au-dessus de ceux qui sont en haut de l'écran.
Dans le cas où deux markers posséderaient la même latitude, c'est l'ordre d'affichage qui est pris en compte. Le premier affiché passera en dessous du deuxième affiché et ainsi de suite.

Pour gérer l'ordre d'affichage, il suffit d'utiliser la méthode setZIndex() de l'objet google.maps.Marker en passant en paramètre la valeur du zIndex souhaitée :

oMarker.setZIndex( valeur_zIndex);

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

oMarker.setOptions( {'zIndex' : valeur_zIndex});

Important : pour que la gestion soit efficace, il faut que tous les markers aient été initialisés en ce qui concerne le zIndex :

  oMarker = new google.maps.Marker({
    'zIndex' : 0,
    'position' : new google.maps.LatLng( val_latitude, val_longitude),
    'map' : oMap
  });

Les cartes sont constituées à partir d'un empilage de couches (layers) ayant chacune un rôle particulier.
On compte, au-dessus de la carte proprement dite quatre couches, la couche 0 étant la plus basse et la couche 4 la plus haute.

• Couche 0 : (mapPane).
  Cette couche couvre les images constituant la carte, les fameux titles (carreaux de 256x256 pixels).
  
• Couche 1 : (overlayLayer).
  Cette couche contient les polygones, polylines et autres.
  
• Couche 2 : (markerLayer).
  Cette couche contient les markers.
  
• Couche 3 : (overlayMouseTarget).
  Cette couche contient tous les éléments qui reçoivent les événements du DOM, par exemple le clic sur marker via des maparea.
  
• Couche 4 : (floatPane).
  Cette couche contient les InfoWindows, c'est la couche supérieure.

Au vu de cet empilement, on constate que, sauf modification de l'ordre de celui-ci (fortement déconseillé), une InfoWindow sera toujours au-dessus d'un marker.

Nota bene : à l'intérieur d'une même couche, l'ordre des éléments qui s'y trouvent peut être modifié en jouant sur le zIndex de chacun.

Dans les navigateurs supportant le HTML5, les images des marqueurs sont intégrées dans des balises canvas, ôtant par la même occasion l'animation éventuelle. Dans le cas contraire, elles sont intégrées dans des balises div. Par défaut les marqueurs sont créés en "mode" optimisé.

Création marqueur optimisé
La propriété optimized du marqueur prend par défaut la valeur true. Il n'est donc pas nécessaire de l'initialiser dans le code.

// création du marqueur
oMarker = new google.maps.Marker({
  'icon': 'http://www.developpez.net/forums/images/smilies/pingoin2bis.gif',
  'position': position,
  'map': oMap
});

Si le marqueur est animé, votre navigateur ne prend pas en compte la balise canvas.

Création marqueur non optimisé
Pour créer un marqueur avec une image animée, il suffit de mettre à false la valeur de la propriété optimized de ce marqueur.

// création du marqueur
oMarker = new google.maps.Marker({
  'optimized': false,
  'icon': 'http://www.developpez.net/forums/images/smilies/pingoin2bis.gif',
  'position': position,
  'map': oMap
});

Pour modifier la position d'un marker on utilise la méthode setPosition de l'objet google.maps.Marker.
Cette méthode attend un objet au format google.maps.LatLng, ou au format google.maps.LatLngLiteral, comme paramètre qui représente la nouvelle position d'affichage du marker.

// en utilisant un objet LatLng
var newPosition = new google.maps.LatLng(45.188529,5.724524);
// ou en utilisant un objet LatLngLiteral
var newPosition = {'lat': 45.188529, 'lng': 5.724524};
// affectation de la nouvelle position
oMarker.setPosition(newPosition);

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

// en utilisant un objet LatLng
var newPosition = new google.maps.LatLng(45.188529,5.724524);
// ou en utilisant un objet LatLngLiteral
var newPosition = {'lat': 45.188529, 'lng': 5.724524};
// affectation de la nouvelle position
oMarker.setOptions({'position': newPosition});

Pour modifier le texte apparaisant au survol d'un marker, la propriété title, on utilise la méthode setTitle() de l'objet google.maps.Marker.
Cette méthode attend une string comme paramètre qui représente le texte à afficher.

var markerTitle = 'Vous avez le bonjour du marker';
oMarker.setTitle(markerTitle);

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littérale comme suit :

var markerTitle = 'Vous avez le bonjour du marker';
oMarker.setOptions({'title': markerTitle});

Le code HTML n'est pas interprété dans la propriété title.