Bonjour,

tout d'abord, je connais tres mal javascript et je n'ai obtenu mon resultat que grace au bidouillage d'un code existant.

J'utilise le code suivant pour envoyer un lien dans une <div> grace a la fonction document.getElementById.

Ce lien permettra d'afficher la bulle du marqueur lorsque l'on clique dessus

J'ai modifie un code existant et je vais chercher les id avec l'attribut categorie (idcat).

Cela afin de faire correspondre le nom de ma DIV dans javascript et dans mon tableau fait avec php



cela fonctionne presque car je n'obtiens le lien "voir bon plan" que pour une seul div comme si javascript arretait sa boucle apres. Par contre j'ai bien tous les marquers sur la carte.

j'obtiens le message : Message: 'document.getElementById(...)' is null or not an object


Voici le code javascript

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<script type="text/javascript" src="http://www.google.com/jsapi?key="></script>
<script type="text/javascript">
 
google.load("maps", "2.x",{"other_params":"sensor=false"});
 
var maCarte;
 
var tableauMarqueurs = [];
 
var urlXml = "data1.php";
 
 
function creationDuMarqueur(point, nom, html, categorie) {
    var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "marker.png";
icon.iconSize = new GSize(18, 32);
	var marqueur = new google.maps.Marker(point,icon);
	marqueur.marqueurCategorie = categorie; 
	marqueur.marqueurNom = nom;
	google.maps.Event.addListener(marqueur, "click", function() {
		if(!marqueur.isHidden()){
			marqueur.openInfoWindowHtml(html);
		}
	});
 
	tableauMarqueurs.push(marqueur);
	return marqueur;
}
 
function afficheCategorie(categorie) {
 
	for (var i=0; i<tableauMarqueurs.length; i++) {
		if (tableauMarqueurs[i].marqueurCategorie == categorie) {
			tableauMarqueurs[i].show();
		}
	}
 
	document.getElementById("listeSelection"+categorie).style.display = "";
}
 
function masqueCategorie(categorie) {
	for (var i=0; i<tableauMarqueurs.length; i++) {
		if (tableauMarqueurs[i].marqueurCategorie == categorie) {
			tableauMarqueurs[i].hide();
		}
	}
 
	document.getElementById("listeSelection"+categorie).style.display = "none";
	maCarte.closeInfoWindow();
}
 
 
function clickLienListe(i) {
	google.maps.Event.trigger(tableauMarqueurs[i],"click");
}
 
function creationDeLaListeDeSelection() {
	var htmlalpha = "";
	for (var i=0; i<tableauMarqueurs.length; i++) {
			htmlalpha = '<div><a href="javascript:clickLienListe(' + i + ')">voir bon plans</a></div>';
	document.getElementById("listeSelection"+tableauMarqueurs[i].marqueurCategorie ).innerHTML=htmlalpha;
 
	}
 
}
 
 
function initialize() {
 
	maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
	maCarte.addControl(new google.maps.LargeMapControl());
	maCarte.addControl(new google.maps.MenuMapTypeControl());
	maCarte.setCenter(new google.maps.LatLng(47.382544, 0.690765), 9);
	google.maps.DownloadUrl(urlXml, function(doc) {
 
	var xmlDoc = google.maps.Xml.parse(doc);
	var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < marqueurs.length; i++) {
		var nom = marqueurs[i].getAttribute("nom"); 
		var adresse = marqueurs[i].getAttribute("adresse"); 
		var longitude = parseFloat(marqueurs[i].getAttribute("lng")); 
		var latitude = parseFloat(marqueurs[i].getAttribute("lat")); 
		var categorie = marqueurs[i].getAttribute("idcat");            
		var point = new google.maps.LatLng(latitude,longitude);
		var html =  "<b>" + nom;
		var marqueur = creationDuMarqueur(point, nom, html, categorie);
		maCarte.addOverlay(marqueur);
		tableauMarqueurs.sort();
	}
 
	creationDeLaListeDeSelection();
	});
}
 
google.setOnLoadCallback(initialize);
</script>

pour afficher la carte


Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="EmplacementDeMaCarte" style="width: 100%; height:  100%">


et pour creer la liste des <div> ou vontapparaitre les lien


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
$sql = "SELECT * FROM menu WHERE pays='Canada' AND type='fastfood' ";
 
$requete1 = mysql_query( $sql, $link ) or die( "ERREUR MYSQL numéro: ".mysql_errno()."<br>Type de cette erreur: ".mysql_error()."<br>\n" );
 
while( $result1 = mysql_fetch_array( $requete1) )
{
echo '<table width="435" border="0" cellspacing="2" cellpadding="0">
 
  <tr>
    <td width="87" rowspan="2" valign="top"><div id="listeSelection'.$result1["id"].'"></div></td>
    
  </tr>
  </table>';
}
 
 
?>
Un grand merci pour votre aide.