asp.net c# print google map with markers

Question

Here's the code I am using that is not working. Gets the map, but no markers even though they display on the screen properly:

<script type="text/javascript">
    function ConvertToImage2(btnExport) {
        html2canvas($('#dvReport').get(0), {
            logging: true, //Enable log (use Web Console for get Errors and Warings)
            useCORS: true,
            onrendered: function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            }
        });
        return false;
    }
</script>

<div class="row">
    <div id="dvReport" class="col-md-6 col-xs-12" style="background-color: white">
        <div class="col-md-6 col-xs-12" style="text-align: center; clear: left">
            <asp:Label ID="label4" runat="server" Text="VATS TRACKING REPORT" BackColor="White"></asp:Label>
        </div>
        <div>
            <asp:Label ID="label1" runat="server" Text="Date:" BackColor="White" Font-Size="Small"></asp:Label><br />
            <asp:Label ID="label2" runat="server" Text="User:" BackColor="White" Font-Size="Small"></asp:Label><br />
            <asp:Label ID="label3" runat="server" Text="Violation Code:" BackColor="White" Font-Size="Small"></asp:Label>
        </div>

        <div class="col-md-6 col-xs-12">
            <cc2:GMap ID="GMap1" runat="server" Width="900px" Height="480px" enableServerEvents="true" OnServerEvent="GMap1_ServerEvent" />
        </div>
    </div>
</div>

Answer 1

According to this tutorial , you should have Marker class that provides you with an option to display a marker to the user for a given location. This example shows you how to create a simple marker.

var marker = new google.maps.Marker
(
    {
        position: new google.maps.LatLng(-34.397, 150.644),
        map: map,
        title: 'Click me'
    }
);

Update:

[code language=”csharp”]
protected void Page_Load(object sender, EventArgs e)
{
string markers=GetMarkers();
Literal1.Text = @"
<script type=’text/javascript’>
function initialize() {

var mapOptions = {
center: new google.maps.LatLng(28.3213, 77.5435),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var myMap = new google.maps.Map(document.getElementById(‘mapArea’),
mapOptions);"
+markers+
@"}
</script>";
}

protected string GetMarkers()
{
string markers = "";
using (SqlConnection con = new
SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConString"].ConnectionString))
{
SqlCommand cmd = new SqlCommand("SELECT Latitude, Longitude, City FROM Locations", con);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
int i = 0;

while (reader.Read())
{
i++;
markers +=
@"var marker"+i.ToString()+@" = new google.maps.Marker({
position: new google.maps.LatLng("+reader["Latitude"].ToString() + ", " +
reader["Longitude"].ToString() +"),"+
@"map: myMap,
title:’" + reader["City"].ToString() + "’});";
}
}
return markers;
}
[/code]