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

Résolu
sarajb -  
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

  • Votes
  • Date
  • Date décroissante
  1. NHenry Modérateur
    Quelle est la question ?
    1. sarajb Auteur
      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
    2. NHenry Modérateur
      As-tu regardé le code HTML généré ?
    3. sarajb Auteur
      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.
    4.  NHenry Modérateur
      Je te parlais du HTML généré, pas du code PHP.
    5. sarajb Auteur
      voila
  2. jordane45 Modérateur
    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.

    Discussions similaires

    recherche script "les visiteurs"
    stoukboy

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

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

    6 réponses