How do I show data from MySQL using PHP and Javascript into leaflet popup on the marker?


Ok, this is my first time asking a question here. Please don't bully me.

This has been asked before and I tried to solve it myself, yet it just won't work.

Here is my problem: As stated in the question, I can't seem to call the data from MySQL into the marker's popup.

I tried to use<code>json_encode</code> to print it in the Javascript popup.The result is eithershow [object] [object] in the popup, or the leaflet map won't load at all. If I remove the<code>marker.bindPopup()</code>, the code works fine.

Here is the code :

<div id="map" class="page_speed_2012192989"></div>

                  $result = mysqli_query($konek,"SELECT dep,mag FROM data_gempa_jawa");
                  $rows = array();
                  while($r = mysqli_fetch_assoc($result)) {
                      $rows[] = $r;

              <!-- This is for the leaflet maps -->
              <script type="text/javascript">

                <?php include "planelatlong.php"; ?>

                var tiles = L.tileLayer('//{s}{z}/{x}/{y}.png', {
                  maxZoom: 18,
                  attribution: '&copy; <a href="//">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'

                var map ='map', {
                  center: L.latLng(-6.6, 106.42),
                  zoom: 5,
                  layers: [tiles]

                var mcg = L.markerClusterGroup({
                  chunkedLoading: true,
                  //singleMarkerMode: true,
                  spiderfyOnMaxZoom: true

                for (var i = 0; i < planelatlong.length; i++) {
                  marker = new L.marker([planelatlong[i][1],planelatlong[i][2]]);
                  marker.bindPopup("<?php print json_encode($rows); ?>");
                  marker.on('click', onClick);
                  function onClick(e) {
                    var popup =;
                    var content = popup.getContent();


Here is the "planelatlon.php" code :

    include "koneksi.php";
    $select = mysqli_query($konek,"SELECT id,lat,lon FROM data_gempa_jawa");

    if ( ! $select ) {
        echo mysqli_error();

    $data = array();

    echo "var planelatlong = [";

    for ($x = 0; $x < mysqli_num_rows($select); $x++) {
        $data[] = mysqli_fetch_assoc($select);
        echo "[",$data[$x]['id'],",",$data[$x]['lat'],",",$data[$x]['lon'],"]";
        if ($x <= (mysqli_num_rows($select)-2) ) {
            echo ",";
        echo "];";


Thanks a lot!




You can generate a geojson file from php and then process it like any other from leaflet.

onEachFeature: function(feature, layer) {
        layer._leaflet_id =;

        var popupText = 

People are also looking for solutions to the problem: php - Laravel How to attach generated PDF to Email


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.