How to get google map users Location from the database

Last Reply 6 days ago By dharmendr

Posted 6 days ago

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;
                }
            }
        }
    }

 

Databse Image

 

DataBase Image

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago Modified on 6 days ago

Hi ivinraj25,

Refer the below code to get lat long based on location and add the marker to map.

Add the Newtonsoft dll in your project.

Namespace

using Newtonsoft.Json;

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV8AiebjdcoS-Ratewz-HDkFt7XCq3zOM&libraries=places"></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") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>'
                }
        </ItemTemplate>
        <SeparatorTemplate>
            ,
        </SeparatorTemplate>
        </asp:Repeater>
        ];
    </script>
    <script type="text/javascript">
        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 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.Location + "</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>
</head>
<body>
    <form id="form1" runat="server">
    <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>
        </tr>
    </table>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = GetData(); // Get the datatable from database.
        dt.Columns.Add("Latitude");
        dt.Columns.Add("Longitude");
        foreach (DataRow dr in dt.Rows)
        {
            RootObject jsonData = FindCoordinates(dr["Location"].ToString());
            dr["Latitude"] = Convert.ToString(jsonData.results[0].geometry.location.lat, CultureInfo.InvariantCulture);
            dr["Longitude"] = Convert.ToString(jsonData.results[0].geometry.location.lng, CultureInfo.InvariantCulture);
        }
        rptMarkers.DataSource = dt;
        rptMarkers.DataBind();
    }
}

private DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] 
    { new DataColumn("Id", typeof(int)), new DataColumn("Name"), new DataColumn("Type"), new DataColumn("Description"), new DataColumn("Location") });
    dt.Rows.Add(1, "IVIN", "P", "I m a Pharmacy Employee", "Saidapet");
    dt.Rows.Add(2, "Ratheesh", "D", "I m a Doctor", "Guindy");
    dt.Rows.Add(3, "Assen", "H", "I m a Hospital Employee", "Pallavaram");
    dt.Rows.Add(4, "Mani", "D", "I m a Doctor", "T.Nager");
    dt.Rows.Add(5, "Prabha", "H", "I m a Hospital Employee", "Ramapuram");
    dt.Rows.Add(6, "Ajith", "P", "I m a Pharmacy Employee", "Porur");
    return dt;
}

protected RootObject FindCoordinates(string loc)
{
    string url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + loc + "&sensor=false";
    WebRequest request = WebRequest.Create(url);
    RootObject jsonData = new RootObject();
    using (WebResponse response = (HttpWebResponse)request.GetResponse())
    {
        using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
        {
            var result = reader.ReadToEnd();
            if (!string.IsNullOrEmpty(result))
            {
                jsonData = JsonConvert.DeserializeObject<RootObject>(result);
            }
        }
    }
    return jsonData;
}

public class AddressComponent
{
    public string long_name { get; set; }
    public string short_name { get; set; }
    public List<string> types { get; set; }
}

public class Northeast
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Southwest
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Bounds
{
    public Northeast northeast { get; set; }
    public Southwest southwest { get; set; }
}

public class Location
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Northeast2
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Southwest2
{
    public double lat { get; set; }
    public double lng { get; set; }
}

public class Viewport
{
    public Northeast2 northeast { get; set; }
    public Southwest2 southwest { get; set; }
}

public class Geometry
{
    public Bounds bounds { get; set; }
    public Location location { get; set; }
    public string location_type { get; set; }
    public Viewport viewport { get; set; }
}

public class Result
{
    public List<AddressComponent> address_components { get; set; }
    public string formatted_address { get; set; }
    public Geometry geometry { get; set; }
    public string place_id { get; set; }
    public List<string> types { get; set; }
}

public class RootObject
{
    public List<Result> results { get; set; }
    public string status { get; set; }
}

To find nearby doctors, pharmacy,hospital using google map api and javascript refer the below link.

http://stackoverflow.com/questions/18722477/how-to-find-nearby-hospitals-using-google-map-api-and-javascript

 

 

I agree, here is the link: http://e-iceblue.com/free-api