Pass resultset value to a javascript function

Question

I have one resultset, How can i pass its value to a javascript function ,and move internal pointer to next row.

<?php 
$q=mysql_query("select * from tbl_map")or die(mysql_error());
$i=0;
?>

<script>
$(document).ready(function() {
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;

function autoUpdate() {

<?php 
mysql_data_seek($q,$i);
$row=mysql_fetch_assoc($q);
$i++;
?>

lat=<?php echo $row['latitude']; ?>;

long=<?php echo $row['longitude']; ?>;

  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(lat, 
                                          long);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);

}

autoUpdate();
      });
</script>

I want to fetch latitude and longitude from database and pass to autoupdate() but i can not move internal pointer ahead. How to fix ?

Duplicate: http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — Quentin, Feb 08 '16 at 08:34

score 1 · Answer 1 · answered Feb 08 '16 at 10:31

Try this: in this method array of latitude and longitude is assigned to a javascript variable json in form of json data.

    <script>

       // ---- PHP Starts here which fetch data and is placed immediately after <script> tag open
       // ---- and store to a variable in json format.

       <?php

            $q = mysql_query("select * from tbl_map")or die(mysql_error());

            $response = array();

            for($i = 0; $i < mysql_num_rows($q) ; $i++ )
            {

                mysql_data_seek($q, $i);

                $row = mysql_fetch_assoc($q);

                array_push( $response, array(
                    'lat'=>$row['latitude'],
                    'long'=>$row['longitude']
                ));

                // ------ Here php assigns the array of data to `json`
                // ------ `var json` is under scope of javascript
                echo 'var json = ' . json_encode($response) . ';';

            }

       ?>

    // ---- PHP part ends here and javascript start
    // ---- Testing the `json` var

    console.log(json);
    console.log(json.length);


    $(document).ready(function() {

        // Initialize the Google Maps API v3
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var c = 0;

        var marker = null;

        function autoUpdate() {

                console.log(json[c].lat);
                console.log(json[c].long);

                navigator.geolocation.getCurrentPosition( function(position)
                {

                    var newPoint = new google.maps.LatLng( json[c].lat, json[c].long );

                    if (marker) {
                        // Marker already created - Move it
                        marker.setPosition(newPoint);
                    }
                    else {
                        // Marker does not exist - Create it
                        marker = new google.maps.Marker({
                            position: newPoint,
                            map: map
                        });
                    }

                    // Center the map on the new position
                    map.setCenter(newPoint);
                });

            if (c == (json.length - 1)) { c = 0; } else { c++; }

            // Call the autoUpdate() function every 5 seconds
            setTimeout(autoUpdate, 5000);

        }

        autoUpdate();

    });

    </script>

Pass resultset value to a javascript function

1 Answers1