Créer un marker personnalisé

Dans cette démos de l’Api Google Map est abordée la création d’un marker personnalisé.

Il faut au préalable déclarer un objet de type MarkerImage qui contiendra toutes les informations relatives au marker personnalisé.

Ensuite, il suffira d’ajouter la propriété icon au marker auquel on veut associer cette icône personnalisée. Cette proriété icon contiendra l’objet de type MarkerImage déclaré plus haut.

<script type="text/javascript">

/* Déclaration des variables pour afficher la carte */
var map_;
var Paris = new google.maps.LatLng(48.8566667, 2.3509871);
/* Déclaration de l'icône personnalisée */
var monIconPerso = new google.maps.MarkerImage("images/pins_orange.png",
  /* dimensions de l'image */
  new google.maps.Size(64,64),
  /* Origine de l'image 0,0. */
  new google.maps.Point(0,0),
  /* l'ancre (point d'accrochage sur la map) du picto
  (varie en fonction de ces dimensions) */
  new google.maps.Point(32,64)
);

map_ = document.getElementById('map');
 /* Déclaration des options de la map */
var options = {
  zoom: 13,
  center: Paris,
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.HYBRID
}

var map = new google.maps.Map(map_, options);

/* Création du marker */
var marker = new google.maps.Marker({
  position: Paris,
  map: map,
  /* Attribution de l'icône personnalisée à notre marker */
  icon : monIconPerso,
  title:"le title du marker au survol de la souris"
});

</script>

2 Réponses à “Créer un marker personnalisé”

  1. Panama21 :

    Bonjour à tous,
    Je poursuis mon ‘projet ’ et je rencontre une nouvelle difficulté, les ‘markers’ se superposent quand plusieurs positions sont identiques.
    Ces ‘markers’ proviennent d’une bdd et il est possible d’en avoir plusieurs à la même position, par exemple sur Paris ou encore sur une adresse postale précise.
    Comment faire pour éviter ces ‘collisions ’ ?
    Merci pour les infos !

  2. lp177 :

    Bien détaillé, mais je coince pour un cas particulier:

    Quand on génère un itinéraire (DirectionsService) on ne place pas nous même les markers donc pas de \”new google.maps.Marker\”.

    Ma question est donc, peut on changer les icons par défaut par un personnalisé pour tous les markers qui seront déclarés, ou accéder aux marker créés automatiquement?

    Merci par avance pour vos lumières

Laisser une réponse

Security Code: