Script pour plusieurs marqueurs

Version imprimable

Voir 40 message(s) de cette discussion en une page

30/12/2013, 17h18
laurent00

pourtant cette fonction marche dans le fichier php plus haut mais pas dans le script !?
LJ
30/12/2013, 17h29
NoSmoking

Je n'avais pas fait attention mais c'est la même erreur que celle en fin de code de ton post #11.

Tu as donc un problème d'intégration de ton PHP dans ta page.
30/12/2013, 17h37
laurent00

Citation:

Envoyé par NoSmoking

Tu as donc un problème d'intégration de ton PHP dans ta page.

Oups !!??

a priori cette écriture résoud le problème de la fonction setQuery
mais rien ne s'affiche sur la map

Code:

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 initCarte()
	{ 
	  <?php //appel tableau de données de la requête 
                    $bdd->setQuery( $query );
                    $tresult = array() ;
                    $res = $bdd->loadObjectList();
                            foreach ( $tresult as $marker ) 
                            {
                                $tResult[] = $marker->lat ;
                                $tResult[] = $marker->lng ; 
                                $tResult[] = $marker->name ;  
                            } 
                    echo "var dataMarker=", json_encode( $tResult), ";\n"; 
          ?>
 
		  var oMap, oMarker, oInfo;
		  var i, nb = dataMarker.length;
		  // création de la carte
		  oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
		    'center' : new google.maps.LatLng( 46.80, 1.70),
		    'zoom' : 6,
		    'mapTypeId' : google.maps.MapTypeId.ROADMAP
		  });
		  // création infobulle
		  oInfo = new google.maps.InfoWindow();
		  // création des markers dans une boucle
		  for( i = 0; i < nb; i++){
		    oMarker = new google.maps.Marker({
		      'position' : new google.maps.LatLng( dataMarker[i].lat, dataMarker[i].lng,
		      'map' : oMap,
		      'title' : dataMarker[i].name
		    });
		    // événement clic sur le marker
		    google.maps.event.addListener( oMarker, 'click', function( data){
		      // affichage position du marker
		      oInfo.setContent( 'position :<br>' +data.latLng.toUrlValue(5));
		      oInfo.open( oMap, oMarker);
		    });
		  }
		}
	// init lorsque la page est chargée
	google.maps.event.addDomListener(window, 'load', initCarte);
</script>

31/12/2013, 08h24
NoSmoking
ATTENTION si tu changes la façon de récupérer tes données de ta Base, il te faut changer la façon de les lire dans le javascript, là tu récupères un Array
Code:

1 2 3 4 5 6 foreach ( $tresult as $marker ) { $tResult[] = $marker->lat ; $tResult[] = $marker->lng ; $tResult[] = $marker->name ; }
31/12/2013, 11h32
laurent00

effectivement maintenant mes données arrivent bien dans le script (je les vois dans le code source) sous la forme

Code:

var dataMarker=[["45.99618399602106","1.428955078125","Le bourg"],["45.169812807708205","1.451171875","Chambon"],["45.95581508086375","1.2015625834465027","Le Malpas"],["45.75242326188913","1.7303466796875","Escoubaniers"],["45.44494795612681","2.208740234375","Vergnolles"]];

mais ne s'affiche pas c'est cette partie d'affichage que je dois modifier

Code:

new google.maps.LatLng( dataMarker[i].[0].lat, dataMarker[i].[1].lng,

Tu n'en es pas loin ;)

Code:

new google.maps.LatLng( dataMarker[i][0], dataMarker[i][1],

sans les points entre les crochets et sans la clé qui n'existe plus, c'est simplement un tableau de tableau
Code:

1 2 3 4 5 6 7 var dataMarker = [ ["45.99618399602106", "1.428955078125", "Le bourg"], ["45.169812807708205", "1.451171875", "Chambon"], ["45.95581508086375", "1.2015625834465027", "Le Malpas"], ["45.75242326188913", "1.7303466796875", "Escoubaniers"], ["45.44494795612681", "2.208740234375", "Vergnolles"] ];

a ouii je récupère les données sous cette forme après ma requête

Code:

1
2
3
4
5
6
7
8
9
$result = array(); 
    foreach ($data as $marker) { 
        // si le tableau est unidimensionnel 
 
         // Si tableau bidimensionnel décommenter ce bloc 
        $result[] = array( $marker->lat, $marker->lng, $marker->name ); 
 
    } 
    $tResult = 'var tMarker=' . json_encode($result) .";\n" ;

31/12/2013, 11h54
laurent00

j'avais essayé cette écriture grâce à ma lecture sur els tableaux array d'hier mais j'avais laissé le point effectivement cela marche maintenant
qu'elle fin d'année ...
je posterais un commentaire final avant résolu
31/12/2013, 11h57
NoSmoking

Ne pas oublier le bouton :resolu:
Bonne année :chin:!

voici donc l'intégrale de mon code qui je le rappelle pour la requête, est sur un site Joomla, la base du script est pris dans la FAQ API Google Maps de ce site

merci à No SMAUG de ce voyage attendu !

LJ

Code:

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
<?php  
defined('_JEXEC') or die('Restricted access');    
 
$user = JFactory::getUser();  
$userid = $user->id;  
 
$bdd = JFactory::getDBO();  
$query = "SELECT name, lat, lng   
    FROM #__batenergie_batenergieep  
    WHERE author='$userid'";  
    $bdd->setQuery ( $query );  
    $data = $bdd->loadObjectList();  
    $result = array(); 
    foreach ($data as $marker) { 
        // si le tableau est unidimensionnel 
        /*$result[] = $marker->lat ;  
        $result[] = $marker->lng ;   
        $result[] = $marker->name ; */
         
         // Si tableau bidimensionnel décommenter ce bloc 
        $result[] = array( $marker->lat, $marker->lng, $marker->name ); 
        
    } 
    $tResult = 'var tMarker=' . json_encode($result) .";\n" ;          
?>  
 
<style type="text/css">  
html, body {  
  height : 100%;  
  width:100%;  
  margin : 0;  
  padding : 0;  
}  
 
#div_main {  
  margin : auto;  
  width : auto;  
}  
#div_carte {  
  margin : auto;  
  width : 1000px;  
  height : 300px;  
  border : 1px solid #c0c0c0;  
}  
</style>  
 
<hr>  
    <div align="left">  
        <h1>Implantation des postes</h1>  
    </div>  
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=fr"></script>  
 
<script type="text/javascript">  
    function initCarte(){
 
	<?php echo $tResult; ?>
 
	  var oMap, oMarker, oInfo;
	  var i, nb = tMarker.length;
	  // création de la carte
	  oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
	    'center' : new google.maps.LatLng( 46.80, 1.70),
	    'zoom' : 6,
	    'mapTypeId' : google.maps.MapTypeId.ROADMAP
	  });
	  // création infobulle
	  oInfo = new google.maps.InfoWindow();
	  // création des markers dans une boucle
	  for( i = 0; i < nb; i++){
	    oMarker = new google.maps.Marker({
	      'position' : new google.maps.LatLng( tMarker[i][0], tMarker[i][1]),
	      'map' : oMap,
	      'title' : tMarker[i][2]
	    });
	    // événement clic sur le marker
	    google.maps.event.addListener( oMarker, 'click', function( data){
	    // affichage position du marker
	    oInfo.setContent( 'position :<br>' +data.latLng.toUrlValue(5));
	    oInfo.open( this.getMap(), this);
	    });
	  }
	}
	// init lorsque la page est chargée
	google.maps.event.addDomListener(window, 'load', initCarte);
</script>  
 
    <div id="div_main">  
      <div id="div_carte"></div>  
    </div>  
<br />

Voir 40 message(s) de cette discussion en une page