How do I add multiple markers in Google Maps programmatically?

Question

I have this code in my ASPX page:

<section id="google-map" class="gmap slider-parallax"></section>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>

<script type="text/javascript">
    $('#google-map').gMap({

        address: 'riyadh, saudi arabia',
        maptype: 'ROADMAP',
        zoom: 6,
        markers: [{
            address: "riyadh, saudi arabia",
            html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
            icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] }
        },
    {
        address: "Al Uyaynah العيينة",
        html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
        icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] }
    },
             {
                 address: "Riyadh Province, Saudi Arabia",
                 html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
                 icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] }
             }]
            ,

        doubleclickzoom: false,
        controls: {
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false
        }
    });
</script>

I should load map markers from a database. How can I change the following code using C#?

markers: [{
    address: "riyadh, saudi arabia",
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
    icon: {
        image: "images/icons/map-icon-red.png",
        iconsize: [32, 39],
        iconanchor: [13, 39]
    }
}, {
    address: "Al Uyaynah العيينة",
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
    icon: {
        image: "images/icons/map-icon-red.png",
        iconsize: [32, 39],
        iconanchor: [13, 39]
    }
}, {
    address: "Riyadh Province, Saudi Arabia",
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
    icon: {
        image: "images/icons/map-icon-red.png",
        iconsize: [32, 39],
        iconanchor: [13, 39]
    }
}]

Answer 1

Regarding second question, you should use a web service and convert data table to JSON format and then you are able to consume JSON in JavaScript.

WEB SERVICE

[WebMethod]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public void GetMaps(string mapId)
{
    DataTable dt = new DataTable();

   dt = dataClass.data.get(mapId);

    string jsonString = string.Empty;
    jsonString = JsonConvert.SerializeObject(dt);
    Context.Response.Clear();
    Context.Response.ContentType = "application/json";
    Context.Response.Flush();
    Context.Response.Write(jsonString);

}

Through below code you can get JSON format from webservice

            var senderData = { mapId: "1" }

            $.ajax({
                type: "POST",
                url: "/webservice.asmx/GetMaps",
                processData: false,
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(senderData),

                success: function (response) {

                    //JSON format is in items
                    var items = eval(response.d);


                },
                error: function (error) {
                    console.log(error);
                }


            });