Show data on map Jquery

scropio gurl

10y1.1k

I try to plot data from gridview on map like this

[WebMethod]
public static string mapgriddata(string FID,string ObtID)
{
try
{
string result = "";
FID = HttpContext.Current.Session["FID"].ToString();
ObID = HttpContext.Current.Session["ObID"].ToString();
Entities w = new Entities();
List gt = w.spgetdata_ffid(FFID).ToList();
DataTable dt = new DataTable();
dt.Columns.Add("NO", typeof(string));
dt.Columns.Add("Longitude", typeof(float));
dt.Columns.Add("Latitude", typeof(float));
foreach (var t in gt)
{
dt.Rows.Add(t.No, t.Longitude, t.Latitude);
}
string No = HttpContext.Current.Session["No"].ToString();
float Latitude = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
float Longitude = Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
result = DataSetToJSON(dt);
return result;
}
catch (Exception)
{
throw new Exception();
}
}

jquery

"text/javascript">
$(function () {
var FID = '<%=Session["FID"]%>';
var ObID = '<%=Session["ObID"]%>';
var No = '<%=Session["No"]%>';
var longi = '<%=Session["Longitude"]%>';
var latit = '<%=Session["Latitude"]%>';
var obj = {};
obj.FID = FID;
obj.ObID = ObID;
obj.No = No;
obj.longi = longi;
obj.latit = latit;
getdata(obj);
return falase;
});
$(function getdata(obj) {
$.ajax({
type: "POST",
url: "home.aspx/mapgriddata",
contentType: "application/json;charset=utf-8",
data: (data.FFID, data.ObID),
datatype: "json",
async: true,
cache: false,
success: function (result) {
window.onload = function () {
alert("map2");
debugger;
var latlng = new google.maps.LatLng(24.0895898, 67.0998546);
debugger;
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
debugger;
var infoWindow = new google.maps.InfoWindow();
debugger;
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
debugger;
for (i = 0; i < obj.length; i++) {
var data = obj[i]
var myLatlng = new google.maps.LatLng(obj.latlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
debugger;
(function (marker, obj) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(obj.FID,obj.No,obj.latit,obj.longi);
infoWindow.open(map, obj);
});
})(marker, data);
}
}
},
error: function (error) {
alert(error);
}
});
});

page load

protected void Page_Load(object sender, EventArgs e)
{
mapgriddata(Convert.ToString(Session["FID"]),Convert.ToString(Session["ObID"]));
}
}

but this show error

Object reference not set to an instance of an object.

14 Replies

Know the answer? Post it — somebody with the same question will find it here.

Midhun Tp10y ago
Hi,
Instead of setting values to t.No and all, just add values directly to datatable -
Comment out below lines -
t.No=Convert.ToString(HttpContext.Current.Session["No"]);
t.Latitude=Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
t.Longitude=Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
dt.Rows.Add(t.No,t.Latitude,t.Longitude);

Use below line only -
dt.Rows.Add(Convert.ToString(HttpContext.Current.Session["No"]),Convert.ToSingle(HttpContext.Current.Session["Latitude"]),Convert.ToSingle(HttpContext.Current.Session["Longitude"]));
scropio gurl10y ago
@
Midhun T Pcheck update actually i am getting 3 values by mistake i write 5 please edit your answer
Midhun Tp10y ago
Hi,
There is no issue with taking them from database. But you have to make it correct.
In your below code,
dt.Rows.Add(t.RegNo,t.DateTimeTD,t.Status,t.Speed,t.Latitude,t.Longitude);
You are adding 5 values to a datatable which consists only 3 columns. You should get error there.
scropio gurl10y ago
@
Midhun T Pbut i want get these values through database
Midhun Tp10y ago
Hi,
Also don't make marker longitude & latitude to some other points outside of map. Make it as below -
var marker=new google.maps.Marker
(
{
position:new google.maps.LatLng(23.0895898,60.0998546),
map:map,
title:'Clickme'
}
);
scropio gurl10y ago
ok now i got marker with hard coded data but actual thing is i want to get data from database. for this i try
"text/javascript">
$(function(){
varFID='<%=Session["FID"]%>';
varObID='<%=Session["ObID"]%>';
varNo='<%=Session["No"]%>';
varlongi='<%=Session["Longitude"]%>';
varlatit='<%=Session["Latitude"]%>';
varobj={};
obj.FID=FID;
obj.ObID=ObID;
obj.No=No;
obj.longi=longi;
obj.latit=latit;
getdata(obj);
returnfalse;
});
functiongetdata(obj){
$.ajax({
type:"POST",
url:"home.aspx/mapgriddata",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(obj),
datatype:"json",
async:true,
cache:false,
success:function(result){
//window.onload=function(){
alert("map2");
varmap;
debugger;
varlatlng=newgoogle.maps.LatLng(21.0895898,62.0998546);
debugger;
varmyOptions={
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
debugger;
map=newgoogle.maps.Map(document.getElementById("map_canvas"),myOptions);
debugger;
varmarker=newgoogle.maps.Marker
(
{
position:newgoogle.maps.LatLng(obj.latit,obj.longi),
map:map,
title:'Clickme'
}
);
debugger;
varinfowindow=newgoogle.maps.InfoWindow({
content:'FID:'+obj.FID,
title:'tr'
});
google.maps.event.addListener(marker,'click',function(){
//CallingtheopenmethodoftheinfoWindow
infowindow.open(map,marker);
});
},
error:function(error){
alert(error);
}
});
}
publicstaticstringmapgriddata(stringFID,stringObjID)
{
try
{
stringresult="";
FID=HttpContext.Current.Session["FID"].ToString();
ObID=HttpContext.Current.Session["ObID"].ToString();
Entities w=new Entities();
Listgt=w.spgetdata_fid(FID).ToList();
DataTabledt=newDataTable();
dt.Columns.Add("No",typeof(string));
dt.Columns.Add("Longitude",typeof(float));
dt.Columns.Add("Latitude",typeof(float));
foreach(vartingt)
{
dt.Rows.Add(t.No,t.Longitude,t.Latitude);
t.No=Convert.ToString(HttpContext.Current.Session["No"]);
t.Latitude=Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
t.Longitude=Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
dt.Rows.Add(t.No,t.Latitude,t.Longitude);
}
result=DataSetToJSON(dt);
returnresult;
}
catch(Exception)
{
thrownewException();
}
}
i did not get values in these lines
t.Latitude = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
t.Longitude = Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
dt.Rows.Add(t.RegNo, t.DateTimeTD, t.Status, t.Speed, t.Latitude, t.Longitude);
where as i got values in this lines
dt.Rows.Add(t.No, t.Longitude, t.Latitude);
any solution
Midhun Tp10y ago
Hi,
I think the issue is with below script block. Try commenting out this block and check it once -
debugger;
for(i=0;i
var data=obj[i]
var myLatlng=new google.maps.LatLng(obj.latlng);
var marker=new google.maps.Marker({
position:myLatlng,
map:map,
});
debugger;
(function(marker,obj){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(obj.FID,obj.No,obj.latit,obj.longi);
infoWindow.open(map,obj);
});
})(marker,data);
}
scropio gurl10y ago
@
Midhun T P
ok first i try to do with hard values like this but still marker not display on google map
<scripttype="text/javascript">
$(function(){
var FID='<%=Session["FID"]%>';
var ObjID='<%=Session["ObID"]%>';
var RegNo='2345';
var longi='67.84629';
var latit='25.19055';
var obj={};
obj.FID=FID;
obj.ObjID=ObjID;
obj.No=No;
obj.longi=longi;
obj.latit=latit;
getdata(obj);
returnfalse;
});
function getdata(obj){
$.ajax({
type:"POST",
url:"home.aspx/mapgriddata",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(obj),
datatype:"json",
async:true,
cache:false,
success:function(result){
//window.onload=function(){
alert("map2");
var map;
debugger;
var latlng=new google.maps.LatLng(23.0895898,60.0998546);
debugger;
var myOptions={
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
debugger;
map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
debugger;
var marker=new google.maps.Marker
(
{
position:new google.maps.LatLng(-34.397,150.644),
map:map,
title:'Clickme'
}
);
debugger;
for(i=0;i<obj.length;i++){
var data=obj[i]
var myLatlng=new google.maps.LatLng(obj.latlng);
var marker=new google.maps.Marker({
position:myLatlng,
map:map,
});
debugger;
(function(marker,obj){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(obj.FID,obj.No,obj.latit,obj.longi);
infoWindow.open(map,obj);
});
})(marker,data);
}
debugger;
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
},
error:function(error){
alert(error);
}
});
}
</script>
Midhun Tp10y ago
Hi,
Change below line
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

to
center:latlng,
scropio gurl10y ago
@
Midhun T P
ok i done with this but still markers not display on map according to lat and long values and also error on console

Uncaught ReferenceError: markers is not defined
Midhun Tp10y ago
Hi,
You should write function like below -
function getdata(obj) {
}
instead of
$(function getdata(obj) {
});
scropio gurl10y ago
ok now i try this function
[WebMethod]
publicstaticstringmapgriddata(stringFID,stringObID)
{
try
{
stringresult="";
FID=HttpContext.Current.Session["FID"].ToString();
ObID=HttpContext.Current.Session["ObID"].ToString();
Entitiesw=newEntities();
List(spgetdata_ffid_Result)gt=w.spgetdata_ffid(FFID).ToList();
DataTabledt=newDataTable();
dt.Columns.Add("No",typeof(string));
dt.Columns.Add("Longitude",typeof(float));
dt.Columns.Add("Latitude",typeof(float));
foreach(vartingt)
{
dt.Rows.Add(t.No,t.Longitude,t.Latitude);
t.No=HttpContext.Current.Session["No"].ToString();
t.Latitude=Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
t.Longitude=Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
}
result=DataSetToJSON(dt);
returnresult;
and try jquery above also which i posted on question but this show error on console
home.aspx:156 Uncaught ReferenceError: getdata is not defined
@
Midhun T P
scropio gurl10y ago
on these lines @
Midhun T P
string No = HttpContext.Current.Session["No"].ToString();

float Latitude = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
float Longitude = Convert.ToSingle(HttpContext.Current.Session["Longitude"])
Midhun Tp10y ago
Hi,
In which line are you getting above error?
Please make sure that both session values are not null, else you will get error at below lines.
FID = HttpContext.Current.Session["FID"].ToString();
ObID = HttpContext.Current.Session["ObID"].ToString();

Show data on map Jquery

Midhun T Pcheck update actually i am getting 3 values by mistake i write 5 please edit your answer

Midhun T Pbut i want get these values through database

Midhun T P