• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1447
  • Last Modified:

<asp:repeater issue - not working or missing?

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
mikegrad7
Asked:
mikegrad7
  • 3
  • 2
1 Solution
 
Robert SchuttSoftware EngineerCommented:
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
 
mikegrad7Author Commented:
thanks! ill try this today and comment!
0
 
mikegrad7Author Commented:
Hi Robert, thanks for you post! im close to getting this working, i may have a few more questions tomorrow.
0
 
Robert SchuttSoftware EngineerCommented:
No problem, I'll be monitoring.
0
 
mikegrad7Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now