Show markers on map from code behind

Question

I am trying to implement google maps Jquery version i.e. GMAP3

I am calling the script from the following c# code

EDIT:

void drawMap(List<beatWithCurrentStatus> mapList, bool IsMap)
{       
    ScriptManager.RegisterStartupScript(this, this.GetType(), "functiona", "designMap(" + ConvertToJSON(mapList) + ");", true);
}

and the following is my script

function designMap(JSONData) {
var ll = [];
var address = [];

for (var i = 0; i < JSONData.length; i++) {
    //        ll[i] = '{latLng:\'[' + data[i].lastlatitude + ',' + data[i].lastlongitude + ']\',data:\'' + data[i].lastaddress + '\'}';
    ll[i] = { latLng: [JSONData[i].lastlatitude, JSONData[i].lastlongitude], data: JSONData[i].lastaddress };
}
alert(ll);
$('#mapDiv').gmap3({
    map:
{
    options: {
        center: [JSONData[5].latitude, JSONData[5].longitude],
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        streetViewControl: true
    }

},
    marker: {
        values: ll,
        options: {
            draggable: false
        }
    }

});
}

Edit: This is the JSON I am getting from ConvertToJSON(mapList) function

[{"number":1,"accountID":"primecomforts","deviceID":"911227400024706","place":"Noida Region","status":1,"statusString":null,"requestTimestamp":"\/Date(1346265000000)\/","mobileNumber":null,"latitude":28.535516,"longitude":77.391026,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1360653137000)\/","laststatusCode":61715,"lastlatitude":47.787773,"lastlongitude":-2.449187,"lastspeedKPH":0,"lastheading":0,"lastaddress":"D151,56140 Bohal,,France","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"1","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":2,"accountID":"primecomforts","deviceID":"911227400024706","place":"Delhi Region","status":1,"statusString":null,"requestTimestamp":"\/Date(1346265000000)\/","mobileNumber":null,"latitude":28.635308,"longitude":77.22496,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":3,"accountID":"primecomforts","deviceID":"911227400024706","place":"Noida","status":1,"statusString":null,"requestTimestamp":"\/Date(1347474600000)\/","mobileNumber":null,"latitude":28.535516,"longitude":77.391026,"distance":13.64,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":4,"accountID":"primecomforts","deviceID":"911227400023872","place":"State Highway 264, Maharashtra, India","status":1,"statusString":null,"requestTimestamp":"\/Date(1347906600000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1349955039000)\/","laststatusCode":61715,"lastlatitude":27.22787287,"lastlongitude":77.99955692,"lastspeedKPH":0,"lastheading":0,"lastaddress":"Agra, Uttar Pradesh,India","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"21","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":5,"accountID":"primecomforts","deviceID":"911227400023872","place":"State Highway 264, Maharashtra, India","status":1,"statusString":null,"requestTimestamp":"\/Date(1347993000000)\/","mobileNumber":null,"latitude":20.593685,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":6,"accountID":"primecomforts","deviceID":"911227400023872","place":"233-277324079","status":1,"statusString":null,"requestTimestamp":"\/Date(1348425000000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(-62135596800000)\/","laststatusCode":0,"lastlatitude":0,"lastlongitude":0,"lastspeedKPH":0,"lastheading":0,"lastaddress":null,"lastodometerKM":null,"stringDateTime":null,"lastVDOP":null,"lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null},{"number":7,"accountID":"primecomforts","deviceID":"911227400077050","place":"B-89,TEACHERS COLONY ,SAMAYPUR BADLI,DELHI","status":1,"statusString":null,"requestTimestamp":"\/Date(1348597800000)\/","mobileNumber":null,"latitude":20.593684,"longitude":78.96288,"distance":1,"summary":null,"url":"Image/default-location-image.png","charrgingStatus":0,"lasttimestamp":"\/Date(1360642473000)\/","laststatusCode":61715,"lastlatitude":28.63164532,"lastlongitude":77.34991008,"lastspeedKPH":0,"lastheading":-42.464634,"lastaddress":"National Highway 24 Bypass, Vaishali, Ghaziabad, Ghaziabad, Ghaziabad, Uttar Pradesh, 201010, India","lastodometerKM":null,"stringDateTime":null,"lastVDOP":"62","lastCharrgingStatus":0,"smsType":null,"pointsource":0,"sno":null,"cellTowerId":null,"data":null,"latLng":null}]

Edit2:

string ConvertToJSON(List<beatWithCurrentStatus> receivePoints)
{
    JavaScriptSerializer jss1 = new JavaScriptSerializer();
    return jss1.Serialize(receivePoints);
}

How should I pass the markers in the map??? Please help..! I've tried all methods but none is working. However if I hard code the values, It shows up on the map.

Please help.. :(

score 0 · Accepted Answer · answered Feb 12 '13 at 08:18

the items of ll are not objects, you create strings(which cannot be accessed like an object) use this instead:
```
ll[i] = {latLng:[JSONData[i].lat,JSONData[i].lng],data:JSONData[i].address};
```
pass ll directly to the values-property of markers, not as an item of an array(ll already is an array)

    marker: {
        values: ll,
        options: {
            draggable: false
        }
    }

These are the 2 required modifications, when it still doesn't work you must post at least JSONData

It suddenly started working... Clearing the cache worked.. ^_^ Thanks for the help..! :) — writeToBhuwan, Feb 12 '13 at 10:29

Show markers on map from code behind

1 Answers1