IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ API Google Maps

FAQ API Google MapsConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 31, dernière mise à jour : 15 juin 2021 

 
OuvrirSommaireGoogle MapsLes markers

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 :

 
Sélectionnez
  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 :

 
Sélectionnez
  // 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.
Mis à jour le 23 février 2015  par NoSmoking

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 :

 
Sélectionnez
 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 :

 
Sélectionnez
 oMarker.setOptions({'visible' : true});  // affiche le marker
 oMarker.setOptions({'visible' : false}); // masque le marker
Créé le 20 novembre 2011  par NoSmoking

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 :

 
Sélectionnez
// 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 :

 
Sélectionnez
// affecte le marker à l'objet map oMap
 oMarker.setMap(oMap);               // méthode avec setMap
 oMarker.setOptions({'map' : oMap}); // méthode avec setOptions
Mis à jour le 21 mai 2013  par NoSmoking

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 :

 
Sélectionnez
 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 :

 
Sélectionnez
 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 :

 
Sélectionnez
  // 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.

Créé le 20 novembre 2011  par NoSmoking

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 :

 
Sélectionnez
  // 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.

Créé le 20 novembre 2011  par NoSmoking

Lien : Comment modifier l'aspect (image) d'un marker ?

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 :

 
Sélectionnez
 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 :

 
Sélectionnez
 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 :

 
Sélectionnez
  // 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
  });
Créé le 20 novembre 2011  par NoSmoking

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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
  oMarker = new google.maps.Marker({
    'zIndex' : 0,
    'position' : new google.maps.LatLng( val_latitude, val_longitude),
    'map' : oMap
  });
Créé le 20 novembre 2011  par NoSmoking

Lien : Comment afficher une InfoWindow au-dessus des autres ?

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.

Mis à jour le 23 février 2015  par NoSmoking

Lien : Comment afficher un marker au-dessus des autres ?
Lien : Comment afficher une InfoWindow au-dessus des autres ?

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.

 
Sélectionnez
// 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.

 
Sélectionnez
// 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
});
Créé le 2 juillet 2012  par NoSmoking

Lien : Page exemple

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.

 
Sélectionnez
// 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 :

 
Sélectionnez
// 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});
Mis à jour le 23 février 2015  par NoSmoking

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.

 
Sélectionnez
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 :

 
Sélectionnez
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.

Mis à jour le 23 février 2015  par NoSmoking

Lien : Page exemple

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.