11544 sujets

JavaScript, DOM et API Web HTML5

Fusion d'infowindow

Bonsoir,

Désolé de vous déranger mais je cherche une solution depuis 48 h à ce problème et je bloque totalement.

Mon problème est le suivant. Dans ma table qui alimente mon javascript je déclenche des marqueurs avec infobulles qui ont les mêmes coordonnées de latitude et de longitude. Je voudrais donc fusionner les informations des différentes infobulles dans une seule correspondant au marqueurs des coordonnées. (J'espère que je suis compréhensible?)

Un schéma pour essayé d'être précis :

Plutôt que :
lat
long
info1

lat
long
info2

je cherche à avoir
lat
long
info1
info2

Comme je suis débutant en javascript je suis totalement perdu. J'ai bien lu que la notation json était peut être la solution mais pour l'instant ce n'est pas clair du tout.

Je suis donc à la recherche de quelques conseils si vous le voulez bien.

Voici mon code :

$req=$connexion->query("

select h_lieu,h_dt2, h_ev, h_lat,h_long from historique 
						
"); // on va chercher tous les membres de la table qu'on trie par ordre croissant
$donnees = $req->fetch(PDO::FETCH_ASSOC);
$tableauLieux='';

while($donnees = $req->fetch(PDO::FETCH_ASSOC))
{
if($tableauLieux!='') $tableauLieux.=',';

$tableauLieux.='["'.$donnees['h_lieu'].'",'.$donnees['h_lat'].','.$donnees['h_long'].',"'.$donnees['h_dt2'].'<br/>'.$donnees['h_ev'].'"]';
}

?>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="formcssbis.css" rel="stylesheet" type="text/css" />
<title>Carte globale</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var sites = [<?php echo $tableauLieux; ?>];
var infowindow = null;
	
function initialise() {

	var mesOptions = {
		mapTypeId: google.maps.MapTypeId.HYBRID
	}

	var map = new google.maps.Map(document.getElementById("map_canvas"), mesOptions);
	setZoom(map, sites);
	setMarkers(map, sites);		
	
	infowindow = new google.maps.InfoWindow({
		content: "Loading..."
	});
}

function setMarkers(map, markers) {
	for (var i = 0; i < markers.length; i++) {
		var site = markers[i];
		var siteLatLng = new google.maps.LatLng(site[1], site[2]);
		
		var marker = new google.maps.Marker({
			position: siteLatLng,
			map: map,
			title: site[0],

			html: site[3],
			// Markers drop on the map
			animation: google.maps.Animation.DROP
		});
		google.maps.event.addListener(marker, "click", function () {
			infowindow.setContent(this.html);
			infowindow.open(map, this);
		});
	}
}

function setZoom(map, markers) {
	var boundbox = new google.maps.LatLngBounds();
	for ( var i = 0; i < markers.length; i++ )
	{
	  boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
	}
	map.setCenter(boundbox.getCenter());
	map.fitBounds(boundbox);
}

</script>

</head>
<body onload="initialise()">
<div id="map_canvas" class="carteg"></div>
</body>

Merci d'avance à tous.

Astroma[/i][/i][/i]
Salut,

Avec un petit extrait online, ce serait bien plus facile...
Sinon, côté serveur : json_encode() et côté client : JSON.parse()

tm
Sujet clos
Aller à