CodeS-SourceS
Rechercher un code, un tuto, une réponse

Infowindows sur Maps Google ce comportement comme une infobulle

Soyez le premier à donner votre avis sur cette source.

Snippet vu 2 562 fois - Téléchargée 3 fois

Contenu du snippet

DEMO d'utilisation de marker sur maps google V3 avec une infowindows
ayant le comportement d'une infobulle.

<!doctype html5>
<!-- --------------------------------------------------------------------------------------------------------
(C)2015 Patrick MOIRE 
		http:\jeux.cartes.free.fr

DEMO d'utilisation de marker sur maps google V3 avec une infowindows ayant le comportement d'une infobulle.
--------------------------------------------------------------------------------------------------------- -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"type="text/javascript"></script>
			
		<!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et	qu'elle ne peut pas être redimensionnée par l'utilisateur -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		
		<!-- Inclusion de l'API Google MAPS : Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		
		<script type="text/javascript">
		
			$(function() {
			
				// Creation de la carte
				var latlng = new google.maps.LatLng(48.183333, .666667);
				var options = {
					center: latlng,
					zoom: 11,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var carte = new google.maps.Map(document.getElementById("carte"), options);

				// Initialisation
				marker = Array();
				
				// Pour chaques points
				$("*[name='latitude']",document.ville).each( function(index) {
				
					// création d'un object servant de conteneur au marker, infowindows, ...
					marker[index] = { mark:undefined, infowindow:undefined, etat:undefined };
				
					// création du marqueur
					marker[index].mark = new google.maps.Marker({
						position: new google.maps.LatLng(document.ville.latitude[index].value, document.ville.longitude[index].value),
					  	     map: carte
					});
					
					// Création infowindows
					marker[index].infowindow = new google.maps.InfoWindow({
					  content: 	'<div>'
							+		'<b>'+document.ville.nom[index].value+'</b><br>'
							+		'<p>Code postale : '+document.ville.cp[index].value+'<br>'
							+		'INSEE : '+document.ville.insee[index].value+'<br></p>'
							+		'<br>'
							+		'<a href="javascript:append_marker('+index+');">Ajouter</a>'
							+	"</div>"
					});
					
					google.maps.event.addListener(marker[index].mark, 'mouseover', function() {
					
						// Suppression de la précédente
						if (typeof(window.timer)!='undefined') {
							clearTimeout(timer);
							timer = undefined;
						}
						if (typeof(window.infoopened)!='undefined')	{
							infoopened.close();
							infoopened = undefined;
						}
						
						// Création de la nouvelle...
						timer = setTimeout( function () {
							marker[index].infowindow.open(carte,marker[index].mark);
							infoopened = marker[index].infowindow;
						},1000);
						
						// Gestion effacement si la souris passe sur l'infowindows puis la quitte
						google.maps.event.addListener(marker[index].infowindow, 'domready', function() {
							$('.gm-style-iw').parent().mouseover( function() {
								if (typeof(window.timer)!='undefined') {
									clearTimeout(timer);
									timer = undefined;
								}
							});
							$('.gm-style-iw').parent().mouseout( function() { 
								if (typeof(window.timer)=='undefined') {
									timer = setTimeout( function () {
										if (typeof(window.infoopened)!='undefined') {
											infoopened.close();
											infoopened = undefined;
										}
										timer = undefined;
									},500);
								}
							});
						});
					
					});
					
					// Gestion effacement de l'infowindows si quitte le marqueur sans passer sur l'infowindows
					google.maps.event.addListener(marker[index].mark, 'mouseout', function() {
						if (typeof(window.timer)!='undefined') {
							clearTimeout(timer);
							timer = undefined;
						}
						if (typeof(window.infoopened)!='undefined') {
							timer = setTimeout( function () {
								if (typeof(window.infoopened)!='undefined') {
									infoopened.close();
									infoopened = undefined;
								}
								timer = undefined;
							},500);
						}
					});
				
					// suppression infowindows sur click Map
					google.maps.event.addListener(carte, 'click', function() {
						if (typeof(window.timer)!='undefined') {
							clearTimeout(timer)
							timer = undefined;
						}
						if (typeof(window.infoopened)!='undefined')	{
							infoopened.close();
							infoopened = undefined;
						}
					}); 
					
					// Ajout le marker sur click
					google.maps.event.addListener(marker[index].mark, 'click', function() {
						append_marker(index);
					}); 
					
				// Fin Ajout d'un Marqueur
				});
				
			// Fin Chargement page	
			});
			
			// Ajout d'un marker à la liste des taches
			function append_marker(index) {
				if (window.ind_letter==undefined) ind_letter = 0;
				if (marker[index].etat!='disaled') {
					marker[index].etat = 'disaled';
					marker[index].mark.setIcon('http://www.google.com/mapfiles/marker'+String.fromCharCode(65+ind_letter++)+'.png');
					marker[index].infowindow.setContent('<div>'
											+		'<b>'+document.ville.nom[index].value+'</b><br>'
											+		'<p>Code postale : '+document.ville.cp[index].value+'<br>'
											+		'INSEE : '+document.ville.insee[index].value+'<br></p>'
											+	 '</div>');
				}
			}
	</script>
	</head>

	<body>
		<form name="ville" action="ville.php" method="post" enctype="multipart/form-data">
	
			<div id="carte" style="width:100%; height:100%;"  ></div>
			
			<input type="hidden" name="nom"  	  value=" La Ferté-Bernard ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72132">
			<input type="hidden" name="latitude"  value="48.183333">
			<input type="hidden" name="longitude" value=".666667">
			<input type="hidden" name="nom"  	  value=" Cherreau ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72081">
			<input type="hidden" name="latitude"  value="48.2">
			<input type="hidden" name="longitude" value=".683333">
			<input type="hidden" name="nom"  	  value=" Cormes ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72093">
			<input type="hidden" name="latitude"  value="48.166667">
			<input type="hidden" name="longitude" value=".716667">
			<input type="hidden" name="nom"  	  value=" Souvigné-sur-Même ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72342">
			<input type="hidden" name="latitude"  value="48.216667">
			<input type="hidden" name="longitude" value=".633333">
			<input type="hidden" name="nom"  	  value=" Avezé ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72020">
			<input type="hidden" name="latitude"  value="48.233333">
			<input type="hidden" name="longitude" value=".683333">
			<input type="hidden" name="nom"  	  value=" Courgenard ">
			<input type="hidden" name="cp"  	  value="72320">
			<input type="hidden" name="insee"  	  value="72105">
			<input type="hidden" name="latitude"  value="48.15">
			<input type="hidden" name="longitude" value=".733333">
			<input type="hidden" name="nom"  	  value=" Saint-Martin-des-Monts ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72302">
			<input type="hidden" name="latitude"  value="48.15">
			<input type="hidden" name="longitude" value=".6">
			<input type="hidden" name="nom"  	  value=" La Chapelle-du-Bois ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72062">
			<input type="hidden" name="latitude"  value="48.216667">
			<input type="hidden" name="longitude" value=".6">
			<input type="hidden" name="nom"  	  value=" Saint-Aubin-des-Coudrais ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72267">
			<input type="hidden" name="latitude"  value="48.166667">
			<input type="hidden" name="longitude" value=".583333">
			<input type="hidden" name="nom"  	  value=" Saint-Jean-des-Échelles ">
			<input type="hidden" name="cp"  	  value="72320">
			<input type="hidden" name="insee"  	  value="72292">
			<input type="hidden" name="latitude"  value="48.133333">
			<input type="hidden" name="longitude" value=".716667">
			<input type="hidden" name="nom"  	  value=" Préval ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72245">
			<input type="hidden" name="latitude"  value="48.233333">
			<input type="hidden" name="longitude" value=".616667">
			<input type="hidden" name="nom"  	  value=" Villaines-la-Gonais ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72375">
			<input type="hidden" name="latitude"  value="48.133333">
			<input type="hidden" name="longitude" value=".6">
			<input type="hidden" name="nom"  	  value=" Ceton ">
			<input type="hidden" name="cp"  	  value="61260">
			<input type="hidden" name="insee"  	  value="61079">
			<input type="hidden" name="latitude"  value="48.225">
			<input type="hidden" name="longitude" value=".75">
			<input type="hidden" name="nom"  	  value=" Lamnay ">
			<input type="hidden" name="cp"  	  value="72320">
			<input type="hidden" name="insee"  	  value="72156">
			<input type="hidden" name="latitude"  value="48.116667">
			<input type="hidden" name="longitude" value=".716667">
			<input type="hidden" name="nom"  	  value=" Dehault ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72114">
			<input type="hidden" name="latitude"  value="48.216667">
			<input type="hidden" name="longitude" value=".566667">
			<input type="hidden" name="nom"  	  value=" Boëssé-le-Sec ">
			<input type="hidden" name="cp"  	  value="72400">
			<input type="hidden" name="insee"  	  value="72038">
			<input type="hidden" name="latitude"  value="48.133333">
			<input type="hidden" name="longitude" value=".566667">
				
		</form>
	</body>
</html>

A voir également

Ajouter un commentaire

Commentaires

Donnez votre avis

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.