Changer le texte dans un addListener

**webrunner** · 17/07/2009, 14h23

Bonjour, tout d'abord merci pour votre attention. Pour commencer, sachez que je suis au tout début de la compréhension du JavaScript et des API. Mon script fonctionne parfaitement bien, il permet à un utilisateur de déplacer un seul et unique marqueur sur une Google Map et de sauvegarder la nouvelle position dans une BDD...

Mon problème concerne purement l'affichage de données informatives après sauvegarde et est le suivant : avec PHP/MySql je récupère en début de page les données d'un utilisateur (latitude et longitude) sauvées dans la BDD, que j'intègre dans la variable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$saved="<p>Cet objet est d&eacute;j&agrave; g&eacute;olocalis&eacute; : </p><div class='geo'>GEO: <span class='latitude'>".$lat."</span>, <span class='longitude'>".$long."</span></div>";

Dans mon JS Google Maps, je récupère cette variable dans une variable globale Javascript "saved" pour l'afficher lors d'un click ou d'un dragend sur l'unique marqueur de la map. Ceci permet de rappeler à l'utilisateur la position toujours enregistrée dans la base.

En cliquant sur un bouton de formulaire dans l'InfoWindow, un script php sauve les nouvelles coordonnées...

Mais comment faire pour remettre à jour ma var "saved" ? Je veux juste que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

saved="<p>Cet objet est d&eacute;j&agrave; g&eacute;olocalis&eacute; : </p><div class='geo'>GEO: <span class='latitude'>"+lat+"</span>, <span class='longitude'>"+lng+"</span></div>";

soit mise à jour depuis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {

mais je ne vois pas comment faire, merci !

Voici le code de toute la partie JS... J'imagine de même qu'il n'est pas super propre

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
<script type="text/javascript">
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		map.setMapType(G_PHYSICAL_MAP);
        map.setCenter(new GLatLng(<?php echo $center_lat.', '.$center_long; ?>), 13);
        map.setUIToDefault();
		var point = new GLatLng(<?php echo $lat.', '.$long; ?>);
		marker = new GMarker(point, {draggable:true});
        map.addOverlay(marker);
		var saved = "<?php echo $saved; ?>";
		GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });
		GEvent.addListener(marker, "dragstart", function() {
			marker.closeInfoWindow();
			});
		GEvent.addListener(marker, "click", function() {
			var point2 = marker.getPoint();		
			var coord2 = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point2.lat().toFixed(7) + "</span>, <span class='longitude'>" + point2.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord2+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
			});
      }
    }
 
	function saveData() {
      var latlng = marker.getLatLng();
      var lat = latlng.lat().toFixed(7);
      var lng = latlng.lng().toFixed(7);
	  var gestion = <?php echo $gestion; ?>;
      var url = "phpsqlinfo_addrow.php?lat=" + lat + "&lng=" + lng + "&gestion=" + gestion;
      GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
        var html = "<h1><?php echo $nom; ?></h1>" + "Votre position a bien &eacute;t&eacute; enregistr&eacute;e,<br/>vous pouvez continuer &agrave; d&eacute;placer le marqueur si vous voulez corriger cette position.";
        marker.openInfoWindow(html);
        }
      });
    }
    </script>

**webrunner** · 18/07/2009, 11h41

ça a l'air si dur que ça ? Il n'y a que quelques lignes de JS à checker merci d'avance !

**emmanuel.remy** · 18/07/2009, 12h10

Salut webrunner,

Envoyé par webrunner

ça a l'air si dur que ça ? Il n'y a que quelques lignes de JS à checker merci d'avance !

Premièrement, et ne le prends pas mal, c'est un forum d'entraide animé et fréquenté par des bénévoles passionnés. Il n'y a aucune notion d'obligation de résultats donc doucement sur le "Il n'y a que quelques lignes de JS à checker merci d'avance". D'autant plus que tu as posté un vendredi après-midi, c'est le we, il fait beau et on est en plein juillet

Ceci étant, ta variable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var saved = "<?php echo $saved; ?>"

est locale à ta fonction initialize et donc inaccessible depuis ta fonction saveData.

Change ton script ainsi:

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
<script type="text/javascript">
    var saved = "<?php echo $saved; ?>";

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		map.setMapType(G_PHYSICAL_MAP);
        map.setCenter(new GLatLng(<?php echo $center_lat.', '.$center_long; ?>), 13);
        map.setUIToDefault();

		var point = new GLatLng(<?php echo $lat.', '.$long; ?>);
		marker = new GMarker(point, {draggable:true});
        map.addOverlay(marker);
		
		GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });
		GEvent.addListener(marker, "dragstart", function() {
			marker.closeInfoWindow();
			});
		GEvent.addListener(marker, "click", function() {
			var point2 = marker.getPoint();		
			var coord2 = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point2.lat().toFixed(7) + "</span>, <span class='longitude'>" + point2.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord2+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
			});
			
      }
    }
	
	function saveData() {
      var latlng = marker.getLatLng();
      var lat = latlng.lat().toFixed(7);
      var lng = latlng.lng().toFixed(7);
	  var gestion = <?php echo $gestion; ?>;
      var url = "phpsqlinfo_addrow.php?lat=" + lat + "&lng=" + lng + "&gestion=" + gestion;
      GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
        var html = "<h1><?php echo $nom; ?></h1>" + "Votre position a bien &eacute;t&eacute; enregistr&eacute;e,<br/>vous pouvez continuer &agrave; d&eacute;placer le marqueur si vous voulez corriger cette position.";
        saved="<p>Cet objet est d&eacute;j&agrave; g&eacute;olocalis&eacute; : </p><div class='geo'>GEO: <span class='latitude'>"+lat+"</span>, <span class='longitude'>"+lng+"</span></div>";
 
        marker.openInfoWindow(html);
        }
      });
    }
    </script>

Ainsi la portée est respectée et les variables lat et lng utilisées sont celles de saveData. Cela doit faire l'affaire.

Bon dev et bon we,

ERE

**webrunner** · 18/07/2009, 14h25

Merci, je ne voulais pas me montrer désobligeant ni trop pressé, je me suis mal exprimé

. Je vais essayer ça cet après-midi. Merci de m'avoir donné de ton temps.

**webrunner** · 18/07/2009, 21h29

Bon cela ne fonctionne pas et c'est logique :
dans la partie suivante, GEvent est initialisé une fois pour toutes, et on ne peut plus toucher au contenu du texte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });

Comment adapter le code pour qu'une fois que les coordonnées ont été sauvées, elles soient répercutées à l'affichage de l'info window ?

**webrunner** · 18/07/2009, 22h06

Bon, j'ai trouvé tout seul, il suffisait de réécrire les deux addListener "dragend" et "click" à chaque fois que la sauvegarde est effectuée dans if (responseCode == 200 && data.length <= 1) {
... Il ne reste plus qu'à alléger le code par des fonctions et ce sera nickel ! Aux gens intéressés, je rappelle que ce code permet à un utilisateur loggé d'entrer sa position (une seule et unique) sur une Google Map et de la sauvegarder dans une BDD. La sauvegarde est modifiable...

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
 
    function initialize() {
		var saved = "<?php echo $saved; ?>";
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		map.setMapType(G_PHYSICAL_MAP);
        map.setCenter(new GLatLng(<?php echo $center_lat.', '.$center_long; ?>), 13);
        map.setUIToDefault();
		var point = new GLatLng(<?php echo $lat.', '.$long; ?>);
		marker = new GMarker(point, {draggable:true});
        map.addOverlay(marker);
		var dragMarker = GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });
		GEvent.addListener(marker, "dragstart", function() {
			marker.closeInfoWindow();
			});
		var clickMarker = GEvent.addListener(marker, "click", function() {
			var point2 = marker.getPoint();		
			var coord2 = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point2.lat().toFixed(7) + "</span>, <span class='longitude'>" + point2.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord2+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
			});
      }
    }
 
	function saveData() {
      var latlng = marker.getLatLng();
      var lat = latlng.lat().toFixed(7);
      var lng = latlng.lng().toFixed(7);
	  var gestion = <?php echo $gestion; ?>;
      var url = "phpsqlinfo_addrow.php?lat=" + lat + "&lng=" + lng + "&gestion=" + gestion;
      GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
		var html = "<h1><?php echo $nom; ?></h1>" + "Votre position a bien &eacute;t&eacute; enregistr&eacute;e,<br/>vous pouvez continuer &agrave; d&eacute;placer le marqueur si vous voulez corriger cette position.";
        saved="<p>Cet objet est d&eacute;j&agrave; g&eacute;olocalis&eacute; : </p><div class='geo'>GEO: <span class='latitude'>"+lat+"</span>, <span class='longitude'>"+lng+"</span></div>";
		marker.openInfoWindow(html);
		dragMarker = GEvent.addListener(marker, "dragend", function() {
			point = marker.getPoint();		
			coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });
		clickMarker = GEvent.addListener(marker, "click", function() {
			point2 = marker.getPoint();		
			coord2 = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point2.lat().toFixed(7) + "</span>, <span class='longitude'>" + point2.lng().toFixed(7) + "</span></div>" + saved;
            html = coord2+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
			});
        }
      });
    }

**emmanuel.remy** · 19/07/2009, 10h54

Salut,

Envoyé par webrunner

Bon cela ne fonctionne pas et c'est logique :
dans la partie suivante, GEvent est initialisé une fois pour toutes, et on ne peut plus toucher au contenu du texte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;
            var html = coord+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });

Comment adapter le code pour qu'une fois que les coordonnées ont été sauvées, elles soient répercutées à l'affichage de l'info window ?

Autant pour moi je n'ai pas été assez vigilant sur l'appel de la fonction; il fallait en fait écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
		GEvent.addListener(marker, "dragend", function() {
			var point = marker.getPoint();		
			var coord = function() { return "<h1><?php echo $nom; ?></h1>" + "<p>Position actuelle</p><div class='geo'>GEO: <span class='latitude'>" + point.lat().toFixed(7) + "</span>, <span class='longitude'>" + point.lng().toFixed(7) + "</span></div>" + saved;};
            var html = coord()+"<p class='input_button'><input type='button' value='Sauvegarder' onclick='saveData()'/></p>";
            marker.openInfoWindow(html);
            });

Ainsi on force la variable saved à être évaluée à chaque fois ce qui n'était pas le cas dans le premier contexte.

ERE

Changer le texte dans un addListener

APIs Google

Discussions similaires

Partager

Partager