5

I have following code to show multiple marker on gmap

<script type="text/javascript">

        function init() {
            var locations = [
              ['Bondi Beach', -33.890542, 151.274856, 4],
              ['Coogee Beach', -33.923036, 151.259052, 5],
              ['Cronulla Beach', -34.028249, 151.157507, 3],
              ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
              ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
            return false;
        }
    </script>

I want to make this dynamic so i have to pass this

 var locations = [
              ['Bondi Beach', -33.890542, 151.274856, 4],
              ['Coogee Beach', -33.923036, 151.259052, 5],
              ['Cronulla Beach', -34.028249, 151.157507, 3],
              ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
              ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

from c# code to this js .

I have tried Hidden Field and this code

 List<String> oGeocodeList = new List<String>
                                         {
                                            "'Bondi Beach', -33.890542, 151.274856, 4",
                                            "'Coogee Beach', -33.923036, 151.259052, 5",
                                            "'Cronulla Beach', -34.028249, 151.157507, 3",
                                            "'Manly Beach', -33.80010128657071, 151.28747820854187, 2",
                                            "'Maroubra Beach', -33.950198, 151.259302, 1"
                                        };

        var geocodevalues = string.Join(",", oGeocodeList.ToArray());
        ClientScript.RegisterArrayDeclaration("locations", geocodevalues);

But NO luck any reference will be helpful to me

5 Answers 5

7

Essentially what I believe you're trying to do is create a JSON string. JSON allows you to pass objects in a serialized string format between many languages, including JavaScript and C#. I'd recommend taking a look at the JSON .NET library. It's a fantastic library that will allow you to safely and effeciently serialize items to-and-from strings in C#.

I'd also recommend, instead of passing a multi-dimensional array, that you create a more OOP structure. To do this you'll want to create a class for your locations, I'm going to assume the following:

public class Location
{
    public string Name { get; set; }
    public double Lat { get; set; }
    public double Lng { get; set; }
}

You'll then want to construct a List<Location>, and then serialize that using the JSON .NET library, which will be as easy as this:

List<Location> oGeocodeList = new List<Location>() {
    //...
};

string json = JsonConvert.SerializeObject(oGeocodeList);

With this JSON, you'll either want to write it to a hidden field, or to a variable within the JavaScript. This will then allow you to reference it on your page through the JavaScript. There is also pretty comprehensive documentation, which proves very useful!

This can then be accessed in your JavaScript as any other js object, like so:

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].Lat, locations[i].Lng),
        map: map
    });

    // ...
}
Sign up to request clarification or add additional context in comments.

2 Comments

But that would output a json like [{"Name":"Bondi Beach","Lat":-33.890542,"Lng":151.274856},...]. Not what OP wants.
I've updated my answer to better reflect that this will not only answer the question, but also applies better coding practices. :)
5

I think what you can do is create a List.

Example:

List<T> data = new List<T>();

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

return serializer.Serialize(data);

Thats it.

I hope it work

1 Comment

You dont even need to reference any other dll.
3

Using Json.Net

var obj = new[] { 
    new object[] { "Bondi Beach", -33.890542, 151.274856, 4 },
    new object[] { "Coogee Beach", -33.923036, 151.259052, 5 },
    new object[] { "Cronulla Beach", -34.028249, 151.157507, 3 },
    new object[] { "Manly Beach", -33.80010128657071, 151.28747820854187, 2 },
    new object[] { "Maroubra Beach", -33.950198, 151.259302, 1 },
};
var json = JsonConvert.SerializeObject(obj);

2 Comments

I have taken <input type="hidden" id="hdnLink" runat="server"/> and use same code as you mention and try to set that json string to hidden field and get the hidden field value in js location variable , but marker are not displaying there
also i matched the hiddedn field value with static ones , both are exact same
2

you must use it something like this: in your controller:

 var locations = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];
var locationsString = JsonConvert.SerializeObject(locations);
ViewBag.locationsString = locationsString;
return View();

and in your java script use it like this:

var data = JSON.parse(@ViewBag.locationsString);

and you can have your data in array and use it in javascript each function:

$.each(data, function (i, item) {
//enter your code
}

for javascript not jquery use:

for (var i = 0; i < data.length; i++) {
       addMarker(data[i], map);
    }

Comments

1

I would encode the C# into Json using Json.Net or the C# Json encoder. Then write it into the hidden field. Then decode it on the JavaScript side using Json2

1 Comment

you can also write eg var jsVarialbe = <%= JsonConvert.Serialize(list) %> ... no need for a hiddenfield

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.