Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
Node is saved as draft in My Content >> Draft
  • Passing custom data in google map info window

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 35
    Comment on it

    While displaying data in the google map you have scenarios where you want to do it in the customized manner.

     

     

      public string ConvertDataTabletoString()
        {
            DataTable dt = new DataTable();
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand("select title=Company,lat=latitude,lng=longitude,image from MapDimension", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }
                    return serializer.Serialize(rows);
                }
            }

     

     

    So for this you need to fetch or get the values form the datasource and fill into the map API.

     

     

            var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
            var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //  marker:true
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var image;
    for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    
    var contentString = '<div id="content" style="margin-left:15px; margin-top:3px;overflow:hidden;">' +
    '<div id="bodyContent">' + '<img src=' + data.image + ' style="width:172px;height:45px;"  alt="WebStreet.in"/>' + '<br><font style="color:darkblue;font:11px tahoma;margin-left:5px;">' + data.title + ' Your Trusted IT Solutions Provider</font>' +
    '</div>' +
    '</div>';

     

     

    Here we have get the data from the datasource and filled it with the google map API map window according to our need.

    .net

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: