Show data on map jquery

Question

0.00/5 (No votes)

See more:

, +

I try to plot data from gridview on map like this

[WebMethod]  
        public static string mapgriddata(string FID,string ObID)  
        {  
            try  
            {  
                string result = "";  
                FID = HttpContext.Current.Session["FID"].ToString();  
                ObID = HttpContext.Current.Session["ObID"].ToString();  
                Entities w = new Entities();  
List(spgetdata_ffid_Result) 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); 
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);  
                return result;  
  
            }  
            catch (Exception)  
            {  
                throw new Exception();  
            }   
        }

What I have tried:

query

<script type="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);  
                }  
            });  
        } 
  
              
          
        
</script>

page load

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

but this show error on console
home.aspx:156 Uncaught ReferenceError: getdata is not defined

Posted 18-Sep-16 23:08pm

super_user

Updated 19-Sep-16 0:27am

v9

Add a Solution

Comments

super_user 19-Sep-16 5:14am

[WebMethod]
public static string mapgriddata(string FID,string ObID)
{
try
{
string result = "";
FID = HttpContext.Current.Session["FID"].ToString();
ObID = HttpContext.Current.Session["ObID"].ToString();
Entities w = new Entities();
List(spgetdata_ffid_Result) 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();
}
}

Karthik_Mahalingam 19-Sep-16 5:15am

Object reference not set to an instance of an object.
which line

super_user 19-Sep-16 5:18am

on these lines @Karthik Bangalore
string No = HttpContext.Current.Session["No"].ToString();
float Latitude = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
float Longitude = Convert.ToSingle(HttpContext.Current.Session["Longitude"]);

Karthik_Mahalingam 19-Sep-16 5:23am

replace this line to string No = Convert.ToString( HttpContext.Current.Session["No"]);

super_user 19-Sep-16 5:44am

check updated question please @Karthik Bangalore

Karthik_Mahalingam 19-Sep-16 5:47am

place break point and check, are you getting the list in
List(spgetdata_ffid_Result) gt = w.spgetdata_ffid(FFID).ToList();

super_user 19-Sep-16 5:53am

yes @Karthik Bangalore i am getting the list

Karthik_Mahalingam 19-Sep-16 6:12am

{t.No = HttpContext.Current.Session["No"].ToString();
t.Latitude = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
t.Longitude = Convert.ToSingle(HttpContext.Current.Session["Longitude"]);
dt.Rows.Add(t.No, t.Longitude, t.Latitude);
}

i guess it should be like this

super_user 19-Sep-16 6:15am

still i got this error on console . Uncaught ReferenceError: getdata is not defined

Karthik_Mahalingam 19-Sep-16 6:21am

check the solution.

super_user 19-Sep-16 5:36am

when i try this ..
string No = Convert.ToString(HttpContext.Current.Session["No"]);
float latit = Convert.ToSingle(HttpContext.Current.Session["Latitude"]);
float longi = Convert.ToSingle(HttpContext.Current.Session["Longitude"]);

then No , latit and longi shows null like this ""

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-09-19T00:20:00

Solution 1

Quote:
Uncaught ReferenceError: getdata is not defined

getdata function is enclosed with jquery, remove it.

 $( function getdata(obj) {

and remove ) at the end of the function.

Posted 19-Sep-16 0:20am

Karthik_Mahalingam

Comments

super_user 19-Sep-16 6:32am

i already do this correction still no markers is display on google map when i check sources jqyery look like

Karthik_Mahalingam 19-Sep-16 6:33am

does any error in console window?

super_user 19-Sep-16 6:37am

means still i did not get values in these 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"]);

Karthik_Mahalingam 19-Sep-16 6:37am

make sure you are setting the session values before accessing them

super_user 19-Sep-16 6:42am

yes in this line i got the values
dt.Rows.Add(t.No, t.Longitude, t.Latitude);
and then i try to save these values in session and then try to call this session in jquery but i did not get values in these 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"]);

Karthik_Mahalingam 19-Sep-16 6:44am

i think you cannot access session values inside javascript block.
use ajax call to get the session values using web method.

super_user 19-Sep-16 6:46am

like this ?

$(function () {
var FID = '<%=Session["FFID"]%>';
var ObID = '<%=Session["ObjID"]%>';
var No = '<%=Session["No"]%>';
var longi = '<%=Session["Longitude"]%>';
var latit = '<%=Session["Latitude"]%>';

var obj = {};
obj.FID = FFID;
obj.ObjID = ObjID;

obj.No = No;
obj.longi = longi;
obj.latit = latit;
getdata(obj);
return false;

});
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");
debugger;
var latlng = new google.maps.LatLng(12.0895898, 34.099);
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);
}
});
}

Karthik_Mahalingam 19-Sep-16 6:47am

window.onload = function () {
this is of no use. remove it

super_user 19-Sep-16 6:55am

ok removed then ?

Karthik_Mahalingam 19-Sep-16 6:57am

anyhow you are calling this server method url: "home.aspx/mapgriddata",
so dont pass the session values, instead get those values in the mapgriddata method. cs.

try hardcoding the value and check

super_user 19-Sep-16 7:03am

ok i hard code value like this
var FFID = '2012';
var ObjectID = '0';

var RegNo = '2345';

var longi = '69.84629';
var latit = '21.19055';
but markers not display according to lat and long values

Karthik_Mahalingam 19-Sep-16 7:05am

can you post a screeenshot

super_user 19-Sep-16 7:26am

yes sure this is link of screen shot http://i.imgur.com/0yx2sft.png

and this is the updated jquery code

$(function () {

var FID = '<%=Session["FID"]%>';
var ObjID = '<%=Session["ObjID"]%>';

var RegNo = '2345';
var longi = '69.84629';
var latit = '21.19055';

var obj = {};
obj.FID = FID;
obj.ObID = ObID;
obj.No = No;
obj.longi = longi;
obj.latit = latit;

getdata(obj);
return false;

});
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(67.0998546,24.0895898);
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(-38.397, 140.644),
map: map,
title: 'Click me'
}
);
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 () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});

},
error: function (error) {
alert(error);
}
});
}

Karthik_Mahalingam 19-Sep-16 7:33am

actually, what you wnat to do in the map ?

super_user 19-Sep-16 7:34am

i want display markers or any image according to these lat and long values var longi = '69.84629';
var latit = '21.19055'; if these values change then marker/image position must change

Karthik_Mahalingam 19-Sep-16 7:36am

did you refer google map doc in w3cshool ?

super_user 19-Sep-16 7:36am

no?? how i do this ?

super_user 19-Sep-16 7:36am

and when i click on that image then small content window display with lat and long values ..

Karthik_Mahalingam 19-Sep-16 7:37am

all you will get in the below link

super_user 19-Sep-16 7:33am

i mentioned rough lat and long values

Karthik_Mahalingam 19-Sep-16 7:36am

http://www.w3schools.com/graphics/google_maps_reference.asp

Karthik_Mahalingam 19-Sep-16 7:45am

see this
http://www.w3schools.com/graphics/tryit.asp?filename=trymap_overlays_icon

super_user 19-Sep-16 8:11am

ok i got marker through hard coded values through this jquery but the problem is i want to get values through method and still there is null value

$(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 = ID;
obj.ObID = ObID;
obj.No = No;
obj.longi = longi;
obj.latit = latit;

getdata(obj);
return false;

});
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(27.0895898, 64.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(35.19055,57.84629),
map: map,
title: 'Click me'
}
);
debugger;
var infowindow = new google.maps.InfoWindow({
content: 'FID:'+obj.FID,
title:'tr'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
},
error: function (error) {
alert(error);
}
});
}

public static string mapgriddata(string FID,string ObjID)
{

try
{
string result = "";
FID = HttpContext.Current.Session["FID"].ToString();
ObID = HttpContext.Current.Session["ObID"].ToString();
Entities w = new Entities();
List(spgetdata_fid_Result) gt = w.spgetdata_fid(FID).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);

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);
return result;

}
catch (Exception)

Karthik_Mahalingam 19-Sep-16 8:12am

dont use like this
var FID = '<%=Session["FID"]%>';
var ObID = '<%=Session["ObID"]%>';
get value from json ajax

super_user 19-Sep-16 8:20am

how?

super_user 19-Sep-16 8:21am

problem is not on these lines problem on these lines
var No ='<%=Session["No"]%>';
var longi = '<%=Session["Longitude"]%>';
var latit = '<%=Session["Latitude"]%>';

Karthik_Mahalingam 19-Sep-16 8:25am

thats what i am telling,, reading session values from Javascript is not working..
pass the values from webmethod as result.

super_user 20-Sep-16 2:09am

how???? @Karthik Bangalore

Karthik_Mahalingam 20-Sep-16 7:37am

in ajax success method.
you have done this many times

super_user 21-Sep-16 1:49am

but this is not working i guess

Karthik_Mahalingam 21-Sep-16 1:51am

console window is your friend, which will help to figure out what the issue is.

super_user 21-Sep-16 4:31am

i try 2-3 times but not getting result

Karthik_Mahalingam 21-Sep-16 4:35am

correct time matters.
divide the task into n number of pieces and fix it one by one.

super_user 22-Sep-16 0:45am

@Karthik Bangalore ok i done with this .. now the problem is there is two records in grid dt but on map this show only 1 record means there is no looping on map so how i loop this .. map code

$(function () {
var No = '';
var Status = '';

var obj = {};

obj.No = No;
obj.Status = Status;

getdata(obj);
return false;
});

function getdata(obj) {
$.ajax({
type: "POST",
url: "home.aspx/info",
contentType:"application/json;charset=utf-8",
data: "{'id':'CU-8442'}",
datatype: "json",
async: true,
cache: false,

success: function (result) {
alert("map2");

$("#tabledata").empty();

var table_data = JSON.parse(result.d).response;

console.log(JSON.parse(result.d).response);

$("#tabledata").empty();
if (table_data.length > 0) {
$("#tabledata").append(
"NoLongitudeLatitude");

for (var i = 0; i < table_data.length; i++) {
if (table_data[i] !== null) {
$("#tabledata").append("" +
table_data[i][0] + " " +
table_data[i][1] + " " +
table_data[i][2] + " " +
table_data[i][3] + " ");
Status = table_data[i][2];
No = table_data[i][0];
}
}
}
else {
$("#tabledata").hide();
}

var map;
debugger;
var latlng = new google.maps.LatLng(24.0895898, 67.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(obj.latit,obj.longi),
map: map,
title: 'Click me'
}
);
debugger;
var infowindow = new google.maps.InfoWindow({
content: 'No:' + No + 'Status:' + Status,
title:'tr'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
},
error: function (error) {
alert(error);
alert("error");
}
});
}

Karthik_Mahalingam 22-Sep-16 1:09am

what you are getting in
console.log(JSON.parse(result.d).response);

super_user 22-Sep-16 1:11am

i am getting data -.. 2 rows

Karthik_Mahalingam 22-Sep-16 1:14am

refer this and do
http://stackoverflow.com/a/3059129

super_user 22-Sep-16 1:24am

i think i already done like this but this show no marker
success: function (result) {
// window.onload = function () {
alert("map2");

$("#tabledata").empty();

var table_data = JSON.parse(result.d).response;

console.log(JSON.parse(result.d));

$("#tabledata").empty();
if (table_data.length > 0) {
$("#tabledata").append(
"NoLongitudeLatitude");

for (var i = 0; i < table_data.length; i++) {
if (table_data[i] !== null) {
$("#tabledata").append("" +
table_data[i][0] + " " +
table_data[i][1] + " " +
table_data[i][2] + " ");

Status = table_data[i][2];
No = table_data[i][0];
}
}
}
else {
$("#tabledata").hide();
}

var center = new google.maps.LatLng(24.0895898, 67.0998546);

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var markers = [];
for (var i = 0; i < table_data.length; i++) {
var location = yourData.location[i];
var latLng = new google.maps.LatLng(location.latitude,
location.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

google.maps.event.addDomListener(window, 'load', initialize);

Karthik_Mahalingam 22-Sep-16 1:55am

wheather it is working fine with 1 marker?

super_user 22-Sep-16 2:09am

when i try above code both marker not display

Karthik_Mahalingam 22-Sep-16 2:10am

with 1 marker is it working?

Karthik_Mahalingam 22-Sep-16 2:37am

getting any error in console window when loading 2 ?

Karthik_Mahalingam 22-Sep-16 2:53am

post your code in js fiddler and share the link, i will look, this is so confusing.

super_user 22-Sep-16 2:58am

in jsfiddle i think data is not populated .. so here i share separate links ..
this is link for

1 marker is display through this code
http://www.codesend.com/view/d15d5839083152a217071a168f38c1ef/

and this link for when both marker not display and also map not display

http://www.codesend.com/view/dce4c75055bc6fa461f86533c17f40b1/

super_user 22-Sep-16 4:22am

ok now i done with both marker now will you please tell me how i call id from web method to jquery in this line data: "{'id':'442'}",

beacuse i hard code id in this line but i want id through webmethod

Karthik_Mahalingam 22-Sep-16 5:58am

what about ajax web method return?

super_user 22-Sep-16 6:13am

I try this to get ID from webmethod

$(function () {

var RegNo = '';
var Status = '';
var latit = '';
var longi = '';
var ID = '<%=Session["ID"]%>'.val();
var obj = {};
obj.ID=ID;
getdata(obj);
return false;

});

function getdata(obj) {

$.ajax({
type: "POST",
url: "home.aspx/info",
contentType: "application/json;charset=utf-8",

data:JSON.stringify(obj.ID),
datatype: "json",
async: true,
cache: false,
success: function (result) {
//map code

},
error: function (error) {
alert(error);
alert("error");
}
});
}

i try to pass id through web method in this line data:JSON.stringify(obj.ID),

when i do this there is error on console

Uncaught TypeError: "442".val is not a function

and when i remove .val() this show error
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Karthik_Mahalingam 22-Sep-16 6:41am

i am at office, i will debug this code at home and let you know the issue.

super_user 19-Sep-16 6:34am

$(function () {
var FID = '2012';
var ObID = '0';
var No = '';

var longi = '';
var latit = '';

var obj = {};
obj.FID = FID;
obj.ObID = ObID;
obj.No = No;
obj.longi = longi;
obj.latit = latit;

getdata(obj);
return false;

});

Karthik_Mahalingam 19-Sep-16 6:35am

caption pls