Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

<asp:repeater issue - not working or missing?

Posted on 2014-02-05
5
Medium Priority
?
1,357 Views
Last Modified: 2014-02-07
I copied some code of the net to plot multiple markers on a google map, taking the longs and lats from a db call.  my page doesnt return any errors, but no map either - nothing at all. I am passing the parameters thru the URL, and have validated using sql trace that the procedure is running. Im assuming its returning rows since the same syntax in SSMS returns rows.

i do notice that i get a error with the squggly underline under my <asp: tag saying  "expected expression".  And intellisense doesnt include a repeater when i retype the <asp:, so maybe a library is missing?

Code from the ASP page is below. Thanks in advance.

"
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Market Map</title>
</head>
<body>
     <div id="dvMap" style="width: 500px; height: 500px">
    </div>
</body>
</html>

   <script type="text/javascript" src="http://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") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "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].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (j = 0; j < markers.length; j++) {
                var data = markers[j]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                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>
"
0
Comment
Question by:mikegrad7
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 39838788
The code is mostly valid (usually a capital R is used for asp:Repeater and script blocks would be put just before the /body tag) but Visual Studio has a problem displaying the asp tags within the <script> tags.

You can see this by making sure the javascript doesn't error when the markers array is empty by changing this line:
center: new google.maps.LatLng(markers.length ? markers[0].lat : 51.228, markers.length?markers[0].lng:5.727),

Open in new window

The map will show, just no markers...

The reason is because the repeater needs to be bound to the data, for example:
<asp:Repeater ID="rptMarkers" runat="server" DataSourceID="SqlDataSource1">

Open in new window


Anyway, another way to do this is using code behind (maybe easier, especially if your database code is already in code-behind). In the aspx, use this:
<body>
    <form id="form1" runat="server">
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
    </form>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var markers = [
// start of generated objects from code-behind

<%=getMarkerObjects() %>

// end of generated objects from code-behind
    ];

    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 map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (j = 0; j < markers.length; j++) {
            var data = markers[j]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            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>

</body>
</html>

Open in new window

Then in the code-behind (F7), add this:
Protected Function getMarkerObjects() As String
        Const indent As String = "    "
        Dim dt = New DataTable
        dt.Columns.AddRange({New DataColumn("Name", GetType(String)), New DataColumn("Latitude", GetType(Double)), New DataColumn("Longitude", GetType(Double)), New DataColumn("Description", GetType(String))})
        dt.Rows.Add({"p1", 51.228, 5.727, "p1"})
        dt.Rows.Add({"p2", 45.912, 12.782, "p2"})
        Dim ret As String = String.Empty
        For Each r In dt.Rows
            ret &= IIf(ret.Equals(String.Empty), "", indent & "," & vbCrLf) & _
                indent & "{" & vbCrLf & _
                    indent & indent & """title"": '" & r("Name") & "'," & vbCrLf & _
                    indent & indent & """lat"": '" & r("Latitude") & "'," & vbCrLf & _
                    indent & indent & """lng"": '" & r("Longitude") & "'," & vbCrLf & _
                    indent & indent & """description"": '" & r("Description") & "'" & vbCrLf & _
                indent & "}" & vbCrLf
        Next
        Return ret
    End Function

Open in new window

0
 
LVL 1

Author Comment

by:mikegrad7
ID: 39838823
thanks! ill try this today and comment!
0
 
LVL 1

Author Comment

by:mikegrad7
ID: 39842181
Hi Robert, thanks for you post! im close to getting this working, i may have a few more questions tomorrow.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39842911
No problem, I'll be monitoring.
0
 
LVL 1

Author Comment

by:mikegrad7
ID: 39843000
so i have it working, and points awarded. What you showed me was a great starting point and really helped with the multiple point aspect. I did have to move things around a bit, based on what i read on some Google Maps API documentation.

What really messed me up was that once i had the DB connection working, it wouldnt work for more than 2 at a time. after digging around for awhile, i noticed my Name data had single quotes in it. on the 3rd item the single quote messed up the code generated, and crashed the page.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question