Retrieving JSON formated results using php post request in ajax via jquery, to be used in adding google map Marker closed

Question

Just doing a small project relating to google maps.

Basically I have coordinates in a database that I want to retrieve using ajax, and update the map without the need to refresh the page.

php part:-

$deviceID = $_POST['deviceID'];
$sqlLocation = "SELECT * FROM Location WHERE DeviceID = '".$deviceID."' AND Type ='network'";
$sqlResult = mysql_query($sqlLocation); 

while($row = mysql_fetch_assoc($sqlResult))
{
    $response["uid"] = $row["DeviceID"];
    $response["deviceInfo"]["Longitude"] = $row["Longitude"];
    $response["deviceInfo"]["Latitude"] = $row["Latitude"];
    $response["deviceInfo"]["Type"] = $row["Type"];
    $response["deviceInfo"]["latlontime"] = $row["latlontime"];

    echo json_encode($response);
}

the format of the multiple json result :-

{"uid":"*deviceID here*","deviceInfo":
   {"Longitude":"x.xxxxxxx","Latitude":"x.xxxxxxx","Type":"network","latlontime":"2012-05-05 18:55:12"}
}

{"uid":"*deviceID here*","deviceInfo":
   {"Longitude":"y.yyyyyyyyy","Latitude":"y.yyyyyyyyy","Type":"network","latlontime":"2012-05-05 18:55:56"}
}

javaScript part with some pseudo code sorry !

    var map;
var count =0;
function initialize(DeviceID) 
  {
    if(DeviceID!=null)
    {
    $.ajax({
                type:"POST",
                dataType:"json",
                data:{deviceID: DeviceID},
                url: "json_coords.php",
                contentType: "application/json; charset=utf-8",
                success: function(data) 
                {
 *****problem used be here******
                    var len = data.length;
                    for( var i = 0; i<len; i++) 
                    {
                            var json_row = data[i];
                            var latitude = json_row.deviceInfo.Latitude;
                            var longitude = json_row.deviceInfo.Longitude;
                            var title = "pos: "+i+json_row.deviceInfo.Type + " " 
                            +json_row.deviceInfo.latlontime ;
                            //alert_test(latitude,student.Longitude);

                            setMarker(latitude,longitude,title);
*********************************************************************************
                    }

                }
            });
    }

    else 
    {
        // do nothing
    }

    var latloncenter = new google.maps.LatLng(51,-1.4469157);
    var myOptions = 
    {
      zoom: 4,
      center: latloncenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



  }


function setMarker(lat,lon,titletxt)
{

var latlongMarker = new google.maps.LatLng(lat,lon);

var marker = new google.maps.Marker
    (
        {
            position: latlongMarker, 
            map: map,
            title:titletxt
        }
    ); 

}

the initialize function will be called after pressing a certain divs on the website:-

$('#leftcolumn>a').click(function() 
    {
    var deviceID = $(this).attr("name");

      //alert(deviceID);
      initialize(deviceID)
    });

I would really appreciated if you can help me out

Thank you :)

* the original problem was around how to retrieve data from a php page with json results**

Exos · Accepted Answer · 2012-05-09 22:42:18Z

1

the Ajax function of jQuery (in JSON mode) expected a unique json object, you ara sending 2, the format is invalid.

You can do:

$response = array();

while($row = mysql_fetch_assoc($sqlResult))
{
    $response[] = (object) array(
         'uid'        => $row["DeviceID"],
         'deviceInfo' => (object) array  (
               'Longitude'  => $row["Longitude"],
               'Latitude'   => $row["Latitude"],
               'Type'       => $row["Type"],
               'latlontime' => $row["latlontime"]
         )
    );

}

echo json_encode($response);

And onsuccess callback:

success: function(data) {
     $.each(data, function (device) {
          var title = device.Type + ' ' + device.latlontime;
          setmarker( device.Longitude ,device.Latitude , title);
     });
}

answered May 9, 2012 at 22:42

Exos

3,9883 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HeWhoProtects Over a year ago

the $.each didn't work for some reason, I didn't actually needed it... just used a for loop, also you have to say device.deviceInfo.Latitude in order to get the value, I have updated the code if you are interested. But thanks for your hints I was able to make it work ... thanks :)

gunnx · Accepted Answer · 2012-05-09 23:01:12Z

<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=GB"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="height:300px;width:500px"></div>
<a href="#" onclick="loaddata(1);">Load markers</a>
<script type="text/javascript">
 var map;
var count =0;
function initialize() 
  {    
    var latloncenter = new google.maps.LatLng(51,-1.4469157);
    var myOptions = 
    {
      zoom: 4,
      center: latloncenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

function loaddata(DeviceID)
{
if(DeviceID!=null)
    {
    $.ajax({
              type: "POST",
              dataType: "json",
              data:{deviceID: DeviceID },
              url: 'mapdata.php',
       success: function(data) 
       {       
           $.each(data,function(index,value) {
             console.log(value);
              /// I know there is no such thing as data.jsonGetvalueByID just trying to explain what I want to do 
             var longitude = value.deviceInfo.Longitude;
             var latitude = value.deviceInfo.Latitude;
             var type = value.deviceInfo.Type;
             var time = value.deviceInfo.latlontime;
             var title = type + " " +time;
             //calling function to add map marker
             createmarker(longitude, latitude, title);          
            });


       }
    }); 
    }

}

function createmarker(lat,lon,titletxt)
{
var latlongMarker = new google.maps.LatLng(lat,lon);

var marker = new google.maps.Marker
    (
        {
            position: latlongMarker, 
            map: map,
            title:titletxt
        }
    ); 

    return marker;
}
</script>
</body>
</html>
// my ajax file that just fakes the data needed, so replace with your database code.
<?php
$response = array();
$rows = array();
$rows[] = array("DeviceID"=>1,"Type"=>"Network","Longitude"=>"51.4343","Latitude"=>"-2.344","latlontime"=>date("Y-m-d H:i:s"));
$rows[] = array("DeviceID"=>2,"Type"=>"Network","Longitude"=>"55.4343","Latitude"=>"-2.644","latlontime"=>date("Y-m-d H:i:s"));
foreach ($rows as $row)
{
$data["uid"] = $row["DeviceID"];
    $data["deviceInfo"]["Longitude"] = $row["Longitude"];
    $data["deviceInfo"]["Latitude"] = $row["Latitude"];
    $data["deviceInfo"]["Type"] = $row["Type"];
    $data["deviceInfo"]["latlontime"] = $row["latlontime"];

    $response[] = $data;
}

echo json_encode($response);

?>

Collectives™ on Stack Overflow

Retrieving JSON formated results using php post request in ajax via jquery, to be used in adding google map Marker closed

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related