Affichage marqueurs sur carte Leaflet

Bonjour à tous,

Dans le cadre d'un projet je dois réalisé une carte dynamique (Leaflet ) sur laquelle j'affiche des marqueurs contenant des informations (différents stages effectués par différentes personnes).
J'ai donc une base de donnée dans laquelle sont stockés toutes ces données.
Ensuite grâce à un script php je boucle pour récupérer ces valeurs en format JSON.

Le code PHP (connect.php):

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
<?php 
 
header('Content-type:application/json; charset=utf-8');
 
$host = "localhost";
    $username = "root"; 
    $password = "";   
    $database = "bdd";
 
    //Créer la connexion avec la base de donnée //
    $connection = new mysqli($host, $username, $password, $database);
 
 
    // Vérification de la connexion //
    if ($connection->connect_error) {
        die("Erreur de connexion ( " . $connection->connect_errno . ")"
                .$connection->connect_error);
    }
 
    // Ajout des accents à la française //
    $connection->set_charset("utf8");
 
 
    // On lance une requête //
    $requete = "SELECT 	*
	,	REPLACE(COALESCE(Latitude, 200), ',', '.') 	AS Latitude
	,	REPLACE(COALESCE(Longitude, 200), ',', '.') AS Longitude
    FROM 3aeeo20142015";
 
    $resultat = $connection->query($requete);
 
    $rows = array();
    while($row = mysqli_fetch_assoc($resultat)){
        $rows[] = $row;
    }
 
 
    echo json_encode($rows);
 
 
?>

Cela me retourne bien ce que je veux:

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
[
  {
    "Elève": "BERLIOZ LATOUR JADE",
    "Activité": "Reprise des développements d'un portail intranet de suivi des remontées client.",
    "Etablissement": "Mediamobile",
    "lieu de stage": "27 boulevard Hippolyte Marquès 94200 IVRY SUR SEINE FRANCE",
    "date début stage": "01/06/2015",
    "date fin stage": "10/07/2015",
    "signataire": "GOUDAL Philippe",
    "Latitude": "48.8184834",
    "Longitude": "2.371158"
  },
  {
    "Elève": "CHABIN MELANIE",
    "Activité": "- Conception d’un simulateur CAN pour la qualification des HIM,\n- Autres petits sujets liés à l’organisation du laboratoire électronique et aux « directories ».\n",
    "Etablissement": "OTIS",
    "lieu de stage": "Avenue des Montoires 45504 GIEN FRANCE",
    "date début stage": "29/06/2015",
    "date fin stage": "24/07/2015",
    "signataire": "JUSSELIN Stéphanie",
    "Latitude": "47.704203",
    "Longitude": "2.623451"
  },  
 {
    "Elève": "VILLIEU CYRIL",
    "Activité": "Immertion dans le milieu professionnel",
    "Etablissement": "USI'PLAST Sologne",
    "lieu de stage": "Rue de l'Europe 41600 LAMOTTE BEUVRON FRANCE",
    "date début stage": "01/07/2015",
    "date fin stage": "31/07/2015",
    "signataire": "HINNIGER Grégory",
    "Latitude": "200",
    "Longitude": "200"
  }
]

J'ai pas tout mis car il y en a beaucoup plus.

Donc jusqu'à la tout va bien mais c'est ensuite que je bloque.
Je veux récupérer ce fichier en javascript pour le boucler et afficher les marqueurs sur ma carte.
Voici mon code (index.html) :

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
<!DOCTYPE html>
<html>
<head>
    <title>La carte des stages</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
    <!-- Insertion du fichier CSS -->
    <link rel="stylesheet" href="style.css"/>
 
    <!-- Insertion du Leaflet CSS -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
 
</head>
<body>
 
    <!-- On donne un nom à la carte -->
    <div id="macarte"></div>
 
    <!-- On insère le leaflet Jacascript -->
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
 
    <!-- Intégration du php -->
    <?php include 'connect.php'; ?>
 
    <!-- On récupère la variable contenant les infos de la bdd-->
    <!--<script>var latlong = <php echo $latlong ?>;</script>
 
    <!-- La variable du dessus viens dans ce fichier jss 
    <script src="app.js"></script> -->
 
    <script>
// On déclare les variables//
var L;
var marker;
 
// On initialise la carte à une certaine position //
var carte = L.map('macarte').setView([43.600, 1.433], 5);
 
 
// On ajoute un pack de texture sur la carte //
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
maxZoom: 18,
minZoom: 3
}).addTo(carte);
 
 
// Ajount d'un icone custom EEO(GPSE) //
var IconEOO = L.icon({
            iconUrl: 'LOGO/LogoEEO.png',
            iconSize: [30, 30],
            popupAnchor:  [0, -20]});
 
 
// Boucle pour afficher les markers //
$.getJSON("connect.php", function (data) { 
          for (var i = 0; i < data.length; i++) { 
            var location = new L.LatLng(data[i].Latitude, data[i].Longitude); 
            var marker = new L.Marker(location,{icon:IconEOO}); 
            var ll = marker.getLatLng();
 
          marker.bindPopup("$mdr").addTo(carte); 
 
             } 
        }); 
 
    </script>

Voila, cependant quand je lance le code j'ai cette erreur :

Code:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Je n'arrive pas à régler ce soucis, je suis à sec donc si quelqu'un est calé sur le sujet je suis preneur :D