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>
Posté dans Google map V3 Tags: