Logo TouraineVerte

Panoramio Library - Bibliothèque Panoramio

PanoramioMouseEvent

Google Maps API & Google Web Services

Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Structure de l'objet évènement PanoramioMouseEvent

Tutoriel publié le

PanoramioMouseEvent

Voici la structure et les propriétés de l'objet événement PanoramioMouseEvent crée lors d'un click de souris sur une des icônes photos présente sur la couche PanoramioLayer.

Objet PanoramioMouseEvent : structure

  • featureDetails: { google.maps.panoramio.PanoramioFeature }
    • author: { string }
    • photoId: { string }
    • title: { string }
    • url: { string }
    • userId: { string }
  • infoWindowHtml: { string }
  • latLng: { google.maps.LatLng }
  • pixelOffset: { google.maps.Size }

Objet PanoramioMouseEvent : schéma

Objet PanoramioMouseEvent

Objet PanoramioMouseEvent : notation pointée

Notation pointéeDescription
objetEvenement.featureDetailsRetourne un objet PanoramioFeature décrivant les caractéristiques de la photo Panoramio cliquée.
objetEvenement.featureDetails.authorRetourne le nom d'utilisateur de l'usager qui a téléchargé cette photo.
Ex : "RitaVitrol".
objetEvenement.featureDetails.photoIdRetourne l'identifiant unique de la photo.
Ex : "17052330".
objetEvenement.featureDetails.titleRetourne le titre de la photo.
Ex : "Pont Wilson".
objetEvenement.featureDetails.urlRetourne l'URL de la photo.
Ex : "http://www.panoramio.com/photo/17052330".
objetEvenement.featureDetails.userIdRetourne l'identifiant unique de l'utilisateur qui a téléchargé la photo.
Ex : "2592318".
objetEvenement.infoWindowHtmlRetourne le code HTML permettant l'affichage de la photo Panoramio dans une infobulle.

Ex code HTML infobulle :

"<div jstcache="0" style="width: 300px;"><b jstcache="1" jscontent="data['title']">Pont Wilson</b></div><div jstcache="0" style="margin-top: 5px; width: 300px; vertical-align: middle;"><div jstcache="0" style="width: 300px; height: 180px; overflow: hidden; text-align: center;"><img src="http://mw2.google.com/mw-panoramio/photos/small/17052330.jpg" jstcache="2" jsvalues=".src:host + thumbnail" style="border: medium none;"></div><div jstcache="0" style="margin-top: 3px;" width="300px"><span jstcache="0" style="display: block; float: left;"><small jstcache="0"><a href="http://www.panoramio.com/photo/17052330" jstcache="3" jsvalues=".href:data['url']" target="panoramio"><div jstcache="5" jsvalues=".innerHTML:view_message">Afficher dans <img jstcache="0" src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_panoramio.png" style="width:73px;height:14px;vertical-align:bottom;border:none"></div></a></small></span><div jstcache="0" style="text-align: left; display: block; float: right;"><small jstcache="0"><a href="http://www.panoramio.com/user/2592318" jstcache="4" jsvalues=".href:host + 'www.panoramio.com/user/' + data['userId']" target="panoramio" jscontent="attribution_message">De RitaVitrol</a></small></div></div></div>"

Affiche :

Pont Wilson
objetEvenement.latLngRetourne un objet LatLng indiquant la position d'ancrage de l'infobulle.
objetEvenement.pixelOffsetRetourne un objet Size précisant le décalage à appliquer à la position d'ancrage ci-dessus de la pointe de l'infobulle.

Comment récupérer et exploiter l'objet PanoramioMouseEvent

Dans le code ci-dessous, on crée une carte sur laquelle vient se superposer la couche Panoramio. Celle-ci a pour options optionsCouchePanoramio :

  • map: maCarte. La couche Panoramio va venir se superposer à la carte nommée maCarte,
  • suppressInfoWindows: true. Précise que tout click sur une icône photo ne déclenchera pas l'ouverture de son infobulle associée.
function initialisation(){
	var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
	var optionsCarte = {
		zoom: 4,
		center: centreCarte,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	var optionsCouchePanoramio = {
		map: maCarte,
		suppressInfoWindows: true,
	}
	var couchePanoramio = new google.maps.panoramio.PanoramioLayer( optionsCouchePanoramio );
}
 google.maps.event.addDomListener(window, 'load', initialisation);

Le but est :

  • d'interdire l'ouverture de l'infobulle associée à l'icône photo cliquée (suppressInfoWindows: true)
  • d'afficher les informations normalement contenues dans l'infobulle, dans une balise <div id="photoPanoramio"></div> située à l'extérieur de la carte.

Dans un premier temps il faut détecter le click sur l'icône photo. Ceci est rendu possible grâce à la méthode statique google.maps.event.addListener à laquelle on passe trois paramètres :

  • L'objet sur lequel on écoute les événements: couchePanoramio
  • Le type d'événement à écouter: "click"
  • La fonction à exécuter une fois le click détecté sur l'objet: function(objetEvenement){ ...blablabla... }

google.maps.event.addListener(couchePanoramioo, "click", function(objetEvenement){

... code à exécuter une fois le click détecté sur une icône photo.

});

objetEvenement contenu dans : function(objetEvenement){ ...blablabla... } va servir à transmettre l'objet événement PanoramioMouseEvent, généré automatiquement lors du click sur une photo sur la couche Panoramio, à l'intérieur de la fonction afin de pouvoir l'exploiter. Vous pouvez remplacer objetEvenement par toto si vous le souhaitez.

Première méthode avec objetEvenement.featureDetails

La structure de l'objet événement objetEvenement (PanoramioMouseEvent), décrite au tout début de ce tutoriel, va nous permettre d'accéder directement aux informations recherchées à l'aide de la notation pointée.

Ainsi, pour obtenir les informations sur la photo sélectionnée, il suffit de les extraire de l'objet : objetEvenement.featureDetails.

function initialisation(){
	var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
	var optionsCarte = {
		zoom: 4,
		center: centreCarte,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	var optionsCouchePanoramio = {
		map: maCarte,
		suppressInfoWindows: true
	}
	var couchePanoramio = new google.maps.panoramio.PanoramioLayer( optionsCouchePanoramio );
	google.maps.event.addListener(couchePanoramio, "click", function(objetEvenement){
		var auteurPhoto = objetEvenement.featureDetails.author;
		var idPhoto = objetEvenement.featureDetails.photoId;
		var titrePhoto = objetEvenement.featureDetails.title;
		var urlPhoto = objetEvenement.featureDetails.url;
		var userIdPhoto = objetEvenement.featureDetails.userId;
		alert(auteurPhoto + ' - ' + idPhoto + ' - ' + titrePhoto + ' - ' + urlPhoto + ' - ' + userIdPhoto);
	});
	/**
	 * Autre façon de coder le gestionnaire d'évènement : 
	 * faire une boucle sur l'objet objetEvenement.featureDetails.current
	 * et extraire la valeur de chacune de ses propriétés.
	 *
	 * google.maps.event.addListener(couchePanoramio, "click", function(objetEvenement){
	 *	var objetPhotoPanoramio = objetEvenement.featureDetails;
	 *	var texte = "";
	 *	for(propriete in objetPhotoPanoramio){
	 *		texte += '  ' + objetPhotoPanoramio[propriete];
	 *	};
	 *	alert(texte);
	 * }
	 *
	 */
}
google.maps.event.addDomListener(window, 'load', initialisation);

Seconde méthode avec objetEvenement.infoWindowHtml

Mais il y a mieux et plus simple ! L'objet objetEvenement comporte également une propriété infoWindowHtml qui renferme le code HTML permettant d'afficher les informations contenues dans l'infobulle associée à une icône photo. Il ne reste plus qu'à récupérer ces informations pour les afficher dans notre balise <div id="photoPanoramio"></div> située à l'extérieur de la carte.

  • Extraire le code HTML contenu dans l'infobulle : var htmlMeteo = objetEvenement.infoWindowHtml

function initialisation(){
	var divPhotoPanoramio = document.getElementById('photoPanoramio');
	var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
	var optionsCarte = {
		zoom: 4,
		center: centreCarte,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	var optionsCouchePanoramio = {
		map: maCarte,
		suppressInfoWindows: true
	}
	var couchePanoramio = new google.maps.panoramio.PanoramioLayer( optionsCouchePanoramio );
	google.maps.event.addListener(couchePanoramio, "click", function(objetEvenement){
		divPhotoPanoramio.innerHTML = objetEvenement.infoWindowHtml;
	});
}
google.maps.event.addDomListener(window, 'load', initialisation);

Puis entre les balises <body></body> ajoutez la balise <div> qui va accueillir les données météorologiques :

<div id="photoPanoramio"></div>
Cliquez sur une icône photo et les informations correspondantes s'afficheront ici.

Comment visualiser l'objet événement PanoramioMouseEvent dans mon navigateur ?

La plupart des navigateurs modernes proposent une console permettant de debuger le code JavaScript :

  • Firefox: installer le plug in Firebug, puis taper sur la touche [ F12 ],
  • Chrome: Taper sur la touche [ F12 ],
  • Safari: cliquer sur le cafard noir en haut à gauche (Start Firebug Lite),
  • Internet Explorer 9: Taper sur la touche [ F12 ].

Pour vous montrer comment utiliser la console JavaScript, copiez/collez le code ci-dessous dans une page, puis consultez la dans Firefox avec le plugin Firebug installé.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#EmplacementDeMaCarte{
				height: 100%;
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=panoramio"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 4,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCouchePanoramio = {
					map: maCarte
				}
				var couchePanoramio = new google.maps.panoramio.PanoramioLayer( optionsCouchePanoramio );
				google.maps.event.addListener(couchePanoramio, "click", function(objetEvenement){
					/**
					 * Pour afficher l'évènement objetEvenement dans le navigateur on utilise :
					 * console.dir() ou console.log()
					 * puis on place entre les parenthèses l'objet que l'on souhaite
					 * visualiser dans la console. Ici objetEvenement.
					 */
					console.dir(objetEvenement);
				});
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

Dans l'observateur d'évènement lié à la couche couchePanoramio, la ligne de code ci-dessous a été ajoutée afin de visualiser l'objet évènement objetEvenement dans la console dès qu'un click sur une icône photo sera détecté :

console.dir(objetEvenement);

Une fois la page affichée dans Firefox, ouvrez la console en sélectionnant l'une des trois méthodes suivantes :

  • tapez sur la touche [ F12 ],
  • menu : Outils / Développeur web / Firebug,
  • cliquez sur le cafard orange .
La console s'affiche en bas de votre écran. Cliquez sur l'onglet Console puis assurez-vous que Activé est coché. Rafraîchissez la page.

Console JavaScript Firebug

Cliquez sur une icône photo. L'objet événement objetEvenement s'affiche dans la console.

Console JavaScript objetEvenement

Cliquez sur tous les [+] pour afficher tous les objets et leurs contenus.

Vous retrouvez la structure de l'objet PanoramioMouseEvent schématisée au début de ce tutoriel.

Console JavaScript objetEvenement