Personnaliser les markers

Pour personnaliser les markers sur la Google Map, il existe les classes GMarkerOptions et GIcon.

Dans un premier temps, il faut tout d’abord créer un Marker avec la classe GMarker puis renseigner une icône personnalisée (objet de type GIcon) comme paramètre optionnel du marker (classe GMarkerOptions).

Personnalisation d’un marker sur la Google Map

<script type="text/javascript">

   Cette fonction affiche un marker sur la carte :
   Ce marker sera déplaçable et aura pour attribut title :
   Ceci est mon marker perso + le nom de la ville
   L'icône le représentant est ici personnalisée.

   function addThisMarker(point, myIcon, ville){
     var marker = new GMarker(point, {icon : myIcon, draggable : true,
				     title : 'Ceci est mon marker perso : ' + ville});
     /* Création du marker. Ce marker est déplaçable. (draggable : true)
     et dispose d'un titre qui s'affichera au survol de ce marker */
     return marker;
   }    

   var myIcon = new GIcon(G_DEFAULT_ICON, "arrow_bg_inv.png");
   // Déclaration de notre icône personnalisée avec l'image arrow_bg_inv.png
   myIcon.iconSize = new GSize(35,35);
   // Redimensionnement de l'icône (35*35)
   myIcon.dragCrossSize = new GSize(32,32);
   // Redimensionnement de la croix située sous le marker
   // pendant son déplacement (32*32)
   myIcon.imageMap = new Array[0, 0, 0, 35, 35,35, 35, 0];
   // Déclaration de la zone réactive sur le marker
   myIcon.shadow = '';
   // Ici, le marker n'aura pas d'ombre
   myIcon.iconAnchor = new GPoint(26,1);
   // Le point d'accroche de l'icône représentant le marker
   // sera décalé de 26px vers la gauche et de 1px vers le haut

   var map = new GMap2(document.getElementById('map'), { size: new GSize(655,300)});
   /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
   avec une taille de 655 * 300 pixel */

   var myPoints = [];
   /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */

   var bounds = new GLatLngBounds();
   /* Instanciation de la classe GLatLngBounds */

   myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
   myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
   myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille 
   /* On remplit notre tableau  */

   var villePoint = [];
   villePoint.push('Paris');
   villePoint.push('Brest');
   villePoint.push('Lille');
   // Association du nom de la ville au marker

   for(var i = 0; i < myPoints.length; i++){
     bounds.extend(myPoints[i]);
     var thisMarker = addThisMarker(myPoints[i], myIcon, villePoint[i]);
     map.addOverlay(thisMarker);
   }
   /* Extension des limites de la carte afin d'y insérer tous les points
   On ajoute également un marker pour chacun
   de ces points sur la carte   */ 

   On peut ensuite utiliser une méthode map State de la classe GMap2
   intitulée getBoundsZoomLevel qui récupère le zoom nécessaire pour afficher
   la carte en fonction de ses limites.

   var newZoom = map.getBoundsZoomLevel(bounds);

   De la même manière, on récupère le centre de la région (objet GLatLngBounds)
   à l'aide de la méthode getCenter().

   var newCentre = bounds.getCenter();

   Il suffit ensuite d'initialiser la carte avec ces éléments.

   map.setCenter(newCentre, newZoom);

</script>

visualisation des markers personnalisés

Une Réponse à “Personnaliser les markers”

  1. Sliven :

    merci pour les tutos ça m’a trop aidé.
    pour la ligne suivant :
    // pendant son déplacement (32*32)
    myIcon.imageMap = new Array [0, 0, 0, 35, 35,35, 35, 0];
    a généré une erreur au niveau du script, bon pour moi j’ai remplacé les “[]” par “()”.

Laisser une réponse

Security Code: