2
22 aoû 2008


attention_light.jpgL'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction


Les deux premiers tutoriaux - 1 et 2 - nous ont permis d'afficher une carte Google Maps sur une page Web.
Ce tutoriel explique comment ajouter un marqueur sur la carte et comment ouvrir une infobulle lors d'un clic sur ce marqueur.

Initialisation


Pour ce tutoriel, nous partirons de la carte définie dans le second tutoriel et alimenterons la fonction initialize().

Création du marqueur


Un marqueur se crée de la manière suivante en utilisant la classe GMarker de l'API.
Le première ligne est la création du marqueur.
La seconde ajoute le marqueur sur la carte.

var marker1 = new GMarker(new GLatLng(43.57726664771851, 1.402251992034912));
map.addOverlay(marker1);


Gestion de l'événement 'click' sur le marqueur


La classe GEvent permet de gérer de nombreux événements sur la carte et tous ses éléments contenus.
Il suffit juste de définir un événement lors d'un clic sur le marqueur précédemment défini :

GEvent.addListener(marker1, 'click', function() {
marker1.openInfoWindowHtml(html);
});

Ici un 'clic' sur le marqueur ouvrira une infobulle contenant du HTML :

var html = "Ici vous pouvez insérer des images, du flash, des vidéos ou tout simplement du texte.";


Code complet






<br /> [Google Maps] 3. Introduction sur les marqueurs et première utilisation d'un événement<br />






Démonstration