[RÉGLÉ] affichage de marqueurs sur un google map

[laurent00]

bonsoir
je cherche à extraire des données de ma bdd pour els afficher sur une google map
mais cela bloque voici le code de mon script tout se passe dans la partie en php
merci d'une aide
LJ

<script type="text/javascript">
	function initialize() {
	  var myLatlng = new google.maps.LatLng(45.7363882,1.1044922);
	  var mapOptions = {
	    zoom: 8,
	    center: myLatlng
	  };

	  var map = new google.maps.Map(document.getElementById('div_carte'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://www.ingall-niger.org/images/stories/Documents/87.kml'
  });
  ctaLayer.setMap(map);

	  var contentString = '<h1>coucou</h1><br>';

	  var infowindow = new google.maps.InfoWindow({
	      content: contentString
	  });

	  /*var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      title: 'Moov it !'
	  });*/


        <?php
	  $user = JFactory::getUser();
	  $userid = $user->id;        
	//Connection a la base de donnée
	$bdd =& JFactory::getDBO();
        $sql = "SELECT name, lat, lng 
		FROM #__batenergie	
		WHERE author='$userid'";
        $bdd = setQuery($sql);
 
		while($data = mysql_fetch_assoc($bdd))
                {
			echo 'var marker = new google.maps.Marker({
				position: new google.maps.LatLng('.$data['lat'].','.$data['lng'].'), 
				map: map,
                                title: \''.$data['name'].'\'
			});
 
			google.maps.event.addListener(marker);
 
			';	
		}
       ?>

	  google.maps.event.addListener(marker, 'click', function() {
	    infowindow.open(map,marker);
	  });
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>

[sharky]

Re : affichage de marqueurs sur un google map

Si tu cherches les infos, détails, de la carte : ils sont dans le fichier kml?

http://www.ingall-niger.org/images/stories/Documents/87.kml

[laurent00]

Re : affichage de marqueurs sur un google map

non ce n'est pas ce que je cherche, le kml sert juste d'habillage de mon territoire
je souhaite afficher des marqueurs qui sont dans ma bdd avec le
$sql = "SELECT name, lat, lng
FROM #__batenergie
WHERE author='$userid'";
LJ

[laurent00]

Re : affichage de marqueurs sur un google map

bonjour
mon, code évolue et le problème maintenant c'est que j'ai ceci dans un script qui ramène une

<b>Fatal error</b>: Call to undefined function setQuery() in ... 

pourtant plus haut dans mon fichier le même setQuery fonctionne après ma requête !?

function initCarte(){
        //appel tableau de donnée de la requête
        <?php $bdd = setQuery($query);
        $tResult = array(); 
            while($marker = mysql_fetch_object( $bdd)) {
              $tResult[] = $marker;
            }
        echo "var dataMarker=", json_encode( $tResult), ";\n";
        ?>
...

ce code est destiné à appeler un tableau de données issues d'une requête en amont du script

LJ

[jisse03]

Re : affichage de marqueurs sur un google map

Bonjour,

Dans la fonction initCarte, $bdd n'est pas visible (règle de portée des variables)
Soit passer $bdd en argument à la fonction, soit soit utiliser un JFacrory::getDBO() pour accéder à l'instance de la base de données.

De plus en mixant un setQuery() Joomla! avec des fonctions mysql_fetch* tu casses tout.

public function initCarte($bdd, $query )
{ 
    //appel tableau de donnée de la requête 
    $bdd->setQuery( $query ) ;
    $tresult = array() ;
    $res = $bdd->loadObjectList();
    foreach ( $tresult as $marker ) 
    {
        $tResult[] = $marker->champ_voulu ; 
    } 
    echo "var dataMarker=", json_encode( $tResult), ";\n"; 
} 

par exemple, fonctionnerait beaucoup mieux.

[laurent00]

Re : affichage de marqueurs sur un google map

comment est-ce que j'insère cela dans mon script ?

<script type="text/javascript">
    function initCarte(){
        //appel tableau de donnée de la requête
        <?php $bdd = setQuery($query);
        $tResult = array(); 
            while($marker = mysql_fetch_object( $bdd)) {
              $tResult[] = $marker;
            }
        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>

[jisse03]

Re : affichage de marqueurs sur un google map

Mais là, à voir un peu plus de ton code, tu fais un mix de JavaScript et PHP !

[laurent00]

Re : affichage de marqueurs sur un google map

oui c'est un script js google maps dans lequel la partie php appelle le tableau de données
en tout cas ta solution enlève l'erreur SetQuery mais la map ne s'affiche pas

<script type="text/javascript">
function initCarte($bdd, $query )
    { 
        //appel tableau de donnée 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> 

[jisse03]

Re : affichage de marqueurs sur un google map

Il t emanque les balises <?php et ?> entre la partie PHP et la partie JavaScript.

Et dans la fonction, comment lui passes-tu ses paramètres ? depuis autre chose qui l'appelle en PHP ?

Évites autant que possible ces mixtures indigestes en organisant ton code de manière cohérente (le PHP d'un côté, le JavaScript d'un autre), ces mélanges façon spaghetti, ça donne du code illisible et non maintenable.

[laurent00]

Re : affichage de marqueurs sur un google map

mes données viennent d'une bd par une requete sql spécifique à chaque user
je souhaite appeler dans le script ces données pour les afficher
LJ

[jisse03]

Re : affichage de marqueurs sur un google map

Si c'est un fichier js le truc, pas moyen.

Si c'est du PHP, il faut organiser le tout de manière cohérente.

[laurent00]

Re : affichage de marqueurs sur un google map

c un fichier default_map.php ci dessous qui est appelé par une vue default.php

<?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();
    //echo var_dump($data);

        
?>

<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 //appel tableau de données de la requête 
              $bdd->setQuery( $query );
            $tresult = array() ;
            $tresult = $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>

    <div id="div_main">
      <div id="div_carte"></div>
    </div>
<br>

[jisse03]

Re : affichage de marqueurs sur un google map

Ceci est plus clair et propre (enfin, il faudrait aussi veiller à envoyer le CSS et les scripts dans le head du document.

<?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 dataMarker=' . 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 = 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> 

    <div id="div_main"> 
      <div id="div_carte"></div> 
    </div> 
<br />

[laurent00]

Re : affichage de marqueurs sur un google map

merci un petit aménagement pour la lecture des données dnas le new google.maps.LatLng
et c'est ok pour moi
ci-desosus le script final
merci

<?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 />