Generating Google Maps markers From Database

Question

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

i am saving the latitude longitude in one column called Location in this format 38.425424, -5.477177

my problem is the markers do not appear in the map

script type="text/javascript">
     var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                    "title": '<%# Eval("Cust_Name") %>',
                    "Location": '<%# Eval("Location") %>',
                "description": '<%# Eval("description") %>'
            }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
 ];
</script>
<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].Location),
            zoom: 8,
            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 < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.Location);
            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(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>

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

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

    }

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

What does your JavaScript look like on the client side? Is there any data in the array you're trying to create with the repeater? — Jerreck, Aug 11 '15 at 01:05
Yes, that's what is happening on the server side, but when you are in your browser what does your script look like after the page has rendered? Does the markers array have any items in it? — Jerreck, Aug 11 '15 at 01:11
Oh, looks like you're rendering the markers' latitude and longitude as a single string. The google.maps.LatLng() constructor takes two arguments, and it's likely seeing the single string and throwing a runtime error. What errors are you getting in the console when your page runs? — Jerreck, Aug 11 '15 at 01:20
Try manually entering the lat and long into your script that initializes the map. I'd bet money that it's because it's treating that string as a single argument and it needs two doubles. — Jerreck, Aug 11 '15 at 01:32
yes i have tried that with this values 38.425424, -5.477177 its works but is there any way to get from one column that has these values — Ayman, Aug 11 '15 at 01:36

score 1 · Accepted Answer · edited May 23 '17 at 10:30

You're rendering the markers' latitude and longitude as a single string. The google.maps.LatLng() constructor takes two arguments, one double for latitude and one for longitude. It's seeing the single string value that you're storing both lat and long in and throwing a runtime error because the constructor requires them to be two separate arguments.

Instead of storing both lat and long as one field in your database, separate them into two fields, then split them into two indices in your array, then pass them individually to the corresponding parameters of the google.maps.LatLng() constructor.

Or if you can't change your database schema, split the single string into two values before passing it into the constructor.

Generating Google Maps markers From Database

1 Answers1

Linked