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">

<head>

<title> Google Maps in asp.net website</title>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

</script>

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>

</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

Search This Blog

Tutorials Place