Solved

<asp:repeater issue - not working or missing?

Posted on 2014-02-05
5
1,128 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, just open a new email message. In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…

863 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

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now