I have a sqlserver database table.where there are 5 column.Longitide,Latitude,Plantname,Line name,Machine Name.I wanted to populate these data to google map.So that all Latitude and Longitude will have a marker.when clicking on marker a dropdown should come.where all plant_name should come.For one plant name there are more than one Line is there.So after selecting a plant.A dropdown should come which should have all the available Line Name.Now after selecting the LineName all Machine Name have to be displayed.Please Help.I am able to display all the markers and respective plant name.But not able to populate LineName.
What I have tried:
//this is HTML Code
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Intelligent Cranes - Dashboard
INTELLIGENT CRANES
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"location": '<%# Eval("Location") %>',
"plant": '<%# Eval("PlantName") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
"linename": '<%# Eval("LineName") %>',
"machinename": '<%# Eval("MachineName") %>',
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("plant-management-map"), 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) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<h1 class='popup-heading'>" + data.plant + " </h1><h6 >" + data.location + " </h6><div id='popup-body-content'> <div class='list-group'><a class='list-group-item list-group-item-action'>" + data.linename + "<i class='fa fa-caret-right' aria-hidden='true'></i></a></div></div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
//Here is C# code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class plant_managment_me : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("select * from PlantMgt");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["CraneMonitorConnString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
}
Submit an article or tip