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**
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);
});
}
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false®ion=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);
?>