Solved

<asp:repeater issue - not working or missing?

Posted on 2014-02-05
5
1,209 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone 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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

749 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