<?php et ?> a l’intérieur de la balise <script>

Résolu
sarajb Messages postés 40 Statut Membre -  
sarajb Messages postés 40 Statut Membre -
bonjour tout le monde, j’espère que vous allez bien

J'ai besoin de mettre dans une variable javascript des informations contenues dans la BDD.
J'ai donc fait ceci: 

       <?php
       $connect=pg_connect("host=localhost port=5432 dbname=poste_electrique user=postgres password=jbaida");
       $sql= "SELECT x,y FROM poste";
       $result= pg_query($connect,$sql);
       if ($result) {        
        while($row =pg_fetch_assoc($result)){ 
      ?>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 32.29489618847768, lng:-9.233858585357666}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
   var locations = [
   {lat:<?php echo '$row["x"]';?>, lng: <?php echo '$row["y"]';?> }
   ]
    </script>
        <?php
       }
        }   
        ?>


merci d'anvance

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

3 réponses

  1.
    NHenry Messages postés 15235 Date d'inscription   Statut Modérateur Dernière intervention   387
     
    Quelle est la question ?
    0
    1. sarajb Messages postés 40 Statut Membre
       
      j'ai dans la base de données les latitudes et longitudes,je veux les récupérer pour les mettre ici : var locations = [
      {lat:<?php echo '$row["x"]';?>, lng: <?php echo '$row["y"]';?> }
      ] lorsque j'affecte des valeur directement,ceci marche à merveille, aussi le code php récupère les données correctement,mais lorsque je les combine, ceci ne marche plus
      0
    2. NHenry Messages postés 15235 Date d'inscription   Statut Modérateur Dernière intervention   387
       
      As-tu regardé le code HTML généré ?
      0
    3. sarajb Messages postés 40 Statut Membre
       
      uii voila mon code tout entier 




      <!DOCTYPE html>
<html lang="en">
<head>
      <style>
       #map {
        height: 600px;
        width: 100%;
       }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Accueil</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="wrapper">
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php">Accueil</a>
            </div>
            <ul class="nav navbar-top-links navbar-right">
                
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                                                       <li>
                                    <a href="login.php">Login</a>
                                </li>
                    </ul>
                </li>
            </ul>
            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                        </li>
                        <li>
                            <a href="tables.php"><i class="fa fa-table fa-fw"></i> Table des postes électriques</a>
                        </li>
                </div>
            </div>
        </nav>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Carte</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>

  <div id="map">
  </div>
       <?php
       $connect=pg_connect("host=localhost port=5432 dbname=poste_electrique user=postgres password=jbaida");
       $sql= "SELECT x,y FROM poste";
       $result= pg_query($connect,$sql);
       if ($result) {        
        while($row =pg_fetch_assoc($result)){
        
       
      ?>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 32.29489618847768, lng:-9.233858585357666}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
   var locations = [
   {lat:<?php echo $row['x']; ?> , lng: <?php echo $row['y']; ?> }
   ]
    </script>
        <?php
       }
        }   
        ?>  
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNKh96HTNCff6GluMzf3zqh44Im1aNtS8&callback=initMap">
    </script>
     </div>
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="vendor/raphael/raphael.min.js"></script>
    <script src="vendor/morrisjs/morris.min.js"></script>
    <script src="data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="dist/js/sb-admin-2.js"></script>
<div>
</body>

</html>


      EDIT : Ajout des balises de code (la coloration syntaxique).
      Explications disponibles ici : ICI

      Merci d'y penser dans tes prochains messages.
      0
    4. NHenry Messages postés 15235 Date d'inscription   Statut Modérateur Dernière intervention   387
       
      Je te parlais du HTML généré, pas du code PHP.
      0
    5. sarajb Messages postés 40 Statut Membre
       
      voila
      0
  2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    Bonjour,

    Ta récupération de variable n'est pas bonne.
    De plus.. tu créés X fois la fonction iniMap dans ta boucle...

    regarde ceci : 
    
<?php
   $connect=pg_connect("host=localhost port=5432 dbname=poste_electrique user=postgres password=jbaida");
   $sql= "SELECT x,y FROM poste";
   $result= pg_query($connect,$sql);
   if ($result) {        
    while($row =pg_fetch_assoc($result)){
      $locations[] = array('lat'=>$row['x'], 'lng'=>$row['y']);
   }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
     #map {
      height: 600px;
      width: 100%;
     }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Accueil</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div id="wrapper">
      <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">Accueil</a>
        </div>
        <ul class="nav navbar-top-links navbar-right">
            
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                                                   <li>
                                <a href="login.php">Login</a>
                            </li>
                </ul>
            </li>
        </ul>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                    </li>
                    <li>
                        <a href="tables.php"><i class="fa fa-table fa-fw"></i> Table des postes électriques</a>
                    </li>
            </div>
        </div>
      </nav>

      <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Carte</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div id="map"></div>
    </div>
    
     <!-- ------------------------------ -->
     <! -- INLUCDE DES JS -->
     <!-- ------------------------------ -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="vendor/raphael/raphael.min.js"></script>
    <script src="vendor/morrisjs/morris.min.js"></script>
    <script src="data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="dist/js/sb-admin-2.js"></script>
    
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNKh96HTNCff6GluMzf3zqh44Im1aNtS8&callback=initMap"> </script>
    
    <script type="text/javascript">

      var locations = <?php echo json_encode($locations); ?>;
      console.log('locations : ');
      console.log(locations);
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat: 32.29489618847768, lng:-9.233858585357666}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
  
    </script>
  </body>
</html>


    NB: On place le maximum de code PHP AVANT le HTML

    NB² : Regarde dans la CONSOLE de ton navigateur si il y a des choses qui apparaissent. J'ai ajouté des CONSOLE.LOG et ça te montrera aussi les éventuelles erreurs de script.

    0
  3. sarajb Messages postés 40 Statut Membre
     
    C bon ça marche Merci beancoup
    0

Discussions similaires

recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
une erreur est survenue dans le script de cette page
PichuDory -
ChariduP -

3 réponses
Joomla et php 5.3
Japan-O-Fan -
spacedelta -

6 réponses