Add or Show mark on Google Maps in asp.net website

-

Show mark on Google Maps in asp.net website:



In this post we try to describe how to show or add multiple markers to Google maps V3 from Data Table in asp.net website using JavaScript or JavaScript Show multiple markers in Google maps using Data Table in asp.net. we Consider other google map related post in this tutorial Asp.net Show (add) Markers on Google Map. and Integrate or show Google Maps in asp.net web site

Create DataTable For binding google Mape:

For this First we create a Dynamic data table C# code with some fields.

DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("City"), new DataColumn("Lattiude"), new DataColumn("Longitude") });
        dt.Rows.Add("City1", "12.897400", "80.288000");
        dt.Rows.Add("City2","17.266700", "78.530200");
        dt.Rows.Add("City3","12.897400", "77.519500");

Now we make a page in which we use google Map by google API:

https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false”

Use this link on page in header section.

JavaScript Function for Creating Mark on Map:

function(marker, data) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
}

Create markers to Google Maps in asp.net website:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Google Maps in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
    function initialize()
    {
        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

};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function(marker, data) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 100%; height: 600px"></div>
</form>
</body>
</html>

C# code for Create markers to Google:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;


public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    // convert in  jsonstring
    public string ConvertDataTabletoString()
    {
        
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("City"), new DataColumn("Lattiude"), new DataColumn("Longitude") });
        dt.Rows.Add("City1", "12.897400", "80.288000");
        dt.Rows.Add("City2","17.266700", "78.530200");   
       
              
                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);
            }
        }
   
Add or Show mark on Google Maps in asp.net website




Other ASP.NET Programming Post:      

Comments

Post a Comment