| | auteur : NoSmoking |
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 ;
- map : la carte sur laquelle sera affiché le marker.
Exemple #1 :
var oMarker = new google.maps.Marker({
'position' : new google.maps.LatLng( latitude, longitude),
'map' : oMap
});
|
Exemple #2 :
var markerOption = {
'position' : new google.maps.LatLng( latitude, longitude),
'map' : oMap
};
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 :
- 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 ;
- 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é ;
- flat (boolean)
La valeur par défaut est false. Si le boolean vaut true, l'ombre du marker n'est pas affichée ;
- icon (string|MarkerImage)
Image affichée pour le marker ;
- map (Map|StreetViewPanorama)
Carte sur laquelle est accroché le marker ;
- position (LatLng)
Position du marker sur la carte ;
- raiseOnDrag (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é ;
- shadow (string|MarkerImage)
Image de l'ombre sous le marker ;
- 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.
|
| | auteur : 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 :
oMarker.setVisible(true);
oMarker.setVisible(false);
|
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});
oMarker.setOptions({'visible' : false});
|
|
| | auteur : 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 :
oMarker.setMap(null);
oMarker.setOptions({'map' : null});
|
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 :
oMarker.setMap(oMap);
oMarker.setOptions({'map' : oMap});
|
|
| | auteur : 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 :
oMarker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
oMarker.setIcon('http://maps.google.com/mapfiles/marker_yellow.png');
|
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'});
oMarker.setOptions({'icon' : 'http://maps.google.com/mapfiles/marker_yellow.png'});
|
Cette option peut être initialisée directement à la création du marker :
var oMarker = new google.maps.Marker({
'icon' : 'http://maps.google.com/mapfiles/marker_green.png',
'position' : new google.maps.LatLng(latitude, longitude),
'map' : oMap
});
|
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.
|
| | auteur : 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 :
google.maps.event.addListener( oMarker, 'mouseover', function(){
if( !this.flagIcon){
this.savIcon = this.getIcon();
this.flagIcon = true;
}
this.setIcon( 'http://maps.google.com/mapfiles/marker_yellow.png');
});
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.
|
|
lien : Comment modifier l'aspect (image) d'un marker ?
|
| | auteur : NoSmoking |
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');
oMarker.setCursor( 'crosshair');
|
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'});
oMarker.setOptions( {'cursor' : 'crosshair'});
|
Cette option peut être initialisée directement à la création du marker :
var oMarker = new google.maps.Marker( {
'cursor' : 'move',
'position' : new google.maps.LatLng( latitude, longitude),
'map' : oMap
});
|
|
| | auteur : 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 :
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
});
|
|
lien : Comment afficher une InfoWindow au-dessus des autres ?
|
| | auteur : NoSmoking |
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, au moins sept couches intéressantes.
- Couche 0 : (mapPane, avec un zIndex:100).
Cette couche couvre les images constituant la carte, les fameux titles (carreaux de 256x256 pixels).
- Couche 1 : (overlayLayer, avec un zIndex de 101).
Cette couche contient les polygones, polylines et autres.
- Couche 2 : (overlayShadow, avec un zIndex de 102).
Cette couche contient les images des ombres des markers.
- Couche 3 : (overlayImage, avec un zIndex de 103).
Cette couche contient les markers.
- Couche 4 : (floatShadow, avec un zIndex de 104).
Cette couche contient les images des ombres des InfoWindows.
- Couche 5 : (overlayMouseTarget, avec un zIndex de 105).
Cette couche contient tous les éléments qui reçoivent les événements de la souris, par exemple le clic sur marker via des maparea.
- Couche 6 : (floatPane, avec un zIndex de 106).
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 couche, l'ordre des éléments qui s'y trouvent
peut être modifié en jouant sur le zIndex de chacun.
|
lien : Comment afficher un marker au-dessus des autres ?
lien : Comment afficher une InfoWindow au-dessus des autres ?
|
Consultez les autres F.A.Q.
 
|
|
