Generating Google Maps markers From Database of GPS in one C

Question

Dear all,

I am trying to populate Google Maps V3 with Multiple Markers from SQL Server 2012 Database table.

i am saving the latitude longitude in one column called GPS in this format 11.5642078,104.905664

my problem is the markers is show only one record do not appear all Marker in the maps. Mean that if in table have 20 record it will show 20 marker in maps, But now it can show only one marker in maps.

Please help me.

Thanks in advance

 

I have table tblGPS in SQL Server

 

No	ComName	GPS	Introduction
1	Capitol Guest house & Restaurant	11.5643076,104.9055242	Gust House
2	Sophal Thavy Guest house	11.5526978,104.8258317	House

 

 HTML Code: 

 

 

<script src="Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false">

</script>

<script src="Scripts/jquery-1.7.1.js"></script>

<script type="text/javascript">

var markers = { locationLatitude: "", locationLongitude: "", ComName: "", Introduction: "" };

var markerArray = [];

window.onload = function () {

var t = self.setTimeout(function () {

var size = $('.LocationLabel').length;

for (i = 0; i < size; i++) {

var GPS = $('.LocationLabel').eq(i).text();

var ComName = $('.Cust_NameLabel').eq(i).text();

var Introduction = $('.DescriptionLabel').eq(i).text();

markers.locationLatitude = GPS.split(',')[0];

markers.locationLongitude = GPS.split(',')[1];

markers.ComName = ComName;

markers.Introduction = Introduction;

markerArray.push(markers);

}

var mapOptions = {

center: new google.maps.LatLng(markers.locationLatitude, markers.locationLongitude),

zoom: 15,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var infoWindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

for (i = 0; i < markerArray.length; i++) {

var data = markerArray[i]

var myLatlng = new google.maps.LatLng(data.locationLatitude, data.locationLongitude);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: data.ComName

});

(function (marker, data) {

google.maps.event.addListener(marker, "click", function (e) {

infoWindow.setContent(data.Introduction);

infoWindow.open(map, marker);

});

})(marker, data);

}

}, 20);

}

</script>

<div id="RepaterConntrol">

<asp:Repeater ID="rptMarkers" runat="server">

<ItemTemplate>

<asp:Label ID="lbl_CustName" CssClass="Cust_NameLabel" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "ComName")%>' />

<asp:Label ID="lbl_Location" CssClass="LocationLabel" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "GPS")%>' />

<asp:Label ID="lbl_Description" CssClass="DescriptionLabel" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Introduction")%>' />

</ItemTemplate>

<SeparatorTemplate>

,

</SeparatorTemplate>

</asp:Repeater>

</div>

<div class="panel-body" id="dvMap" style="height:450px;width:450px;">

</div>

 

C# code: 

 

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace KoreanTeam.CMaps

{

public partial class MapViews : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DataTable dt = this.GetData("select * from tblGPS");

rptMarkers.DataSource = dt;

rptMarkers.DataBind();

}

}

private DataTable GetData(string query)

{

string conString = ConfigurationManager.ConnectionStrings["Con"].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;

}

}

}

}

}

}

Result Here:  

http://postimg.org/image/d2zgsx4cd/full/

 

Best regard,

 

Sopheak Lim