How to get google map user's Location from the database?

Question

I've code to show map as per longitude and latitude, but instead of that, I want to show map as per location and type of the store(example pharmacy, hospital) which could be retrieved from database.

 

Body Content

 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var markers = [ <asp:Repeater ID="rptMarkers" runat="server"> <ItemTemplate> { "title": '<%# Eval("Name") %>', "Type": '<%# Eval("Type") %>', "Location": '<%# Eval("Location") %>', "description": '<%# Eval("Description") %>' } </ItemTemplate> <SeparatorTemplate> , </SeparatorTemplate> </asp:Repeater> ];         window.onload = function () { LoadMap(); }         function LoadMap() { 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 latlngbounds = new google.maps.LatLngBounds(); var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var legend = document.getElementById("legend");             legend.innerHTML = ""; for (var 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,                     icon: data.icon                 }); (function (marker, data) {                     google.maps.event.addListener(marker, "click", function (e) {                         infoWindow.setContent("<div style = 'width:100px;height:40px'>" + data.description + "</div>");                         infoWindow.open(map, marker); }); })(marker, data);                 latlngbounds.extend(marker.position);                  legend.innerHTML += "<div style = 'margin:5px'><img align = 'middle' src = '" + marker.icon + "' />&nbsp;" + marker.title + "</div>"; } var bounds = new google.maps.LatLngBounds(); map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); } </script> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div id="dvMap" style="width: 500px; height: 500px"> </div> </td> <td id="legend" style="display:none;"> </td> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV8AiebjdcoS-Ratewz-HDkFt7XCq3zOM&libraries=places&callback=initMap"></script> </tr> </table> </body>

 

 

Page load

 

protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = this.GetData("select * from GetLocations");             rptMarkers.DataSource = dt;             rptMarkers.DataBind(); } }

Get Data

 

private DataTable GetData(string query) { string conString = ConfigurationManager.ConnectionStrings["constr"].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; } } } }