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:
| 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); } , |
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
Rashmiranjan DalabeheraPosted Sep 23, 2015, 7:57 AM