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**

Answer 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);
     });
}