The DataSourceID of Repeater1 must be the ID of a control of type IDataSource. A control with ID AccessDataSource3 could not be found.

Hi Folks - I used this technique to build an array for use in Google Maps:

http://www.aspsnippets.com/Articles/ASPNet-Google-Maps-V3-with-Multiple-Markers-Database-Example.aspx

I'm using an Access database instead, and I have added a dropdown list to filter the repeater result. I'm having a problem referencing the accessdatasourceID. I get the following error:

I'll assume it's because the Repeater is embedded in the JS.

The DataSourceID of 'Repeater1' must be the ID of a control of type IDataSource.  A control with ID 'AccessDataSource3' could not be found.

HTML/JS:

<%@ Page Title="Cemetery Map" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="mapdatabase.aspx.vb" Inherits="About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style>
#dvMap { width:925px; height:800px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<asp:AccessDataSource ID="AccessDataSource1" runat="server" 
DataFile="~/App_Data/CemeteryRO2003New.mdb" 
SelectCommand="SELECT * FROM [qryGPS]">

</asp:accessDataSource>


var markers = [
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="accessDataSource1">
<ItemTemplate>
{
"CemNumber": '<%# Eval("ceme_no")%>',
"lat": '<%# Eval("lat")%>',
"lng": '<%# Eval("long")%>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>

];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(41.66394593904742, -71.53106658203126),
zoom: 10,
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 redcircle = new google.maps.MarkerImage('http://www.rihistoriccemeteries.org/images/red-circle-lv.png');
var myLatlng = new google.maps.LatLng(data.lat, data.lng);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: redcircle

});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.CemNumber);

infoWindow.open(map, marker);
});
})(marker, data);
}
}

</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div style="margin-top: 10px;">
<p><a href="cemmenu.aspx">Back to Map Menu</a></p>

<asp:DropDownList ID="DropDownList1" runat="server" 
DataSourceID="AccessDataSource2" DataTextField="TOWN" DataValueField="TOWN">
</asp:DropDownList>
<asp:AccessDataSource ID="AccessDataSource2" runat="server" 
DataFile="~/App_Data/CemeteryRO2003New.mdb" 
SelectCommand="SELECT DISTINCT [TOWN] FROM [qryGPS] ORDER BY [TOWN]">
</asp:AccessDataSource>

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:AccessDataSource ID="AccessDataSource3" runat="server" 
DataFile="~/App_Data/CemeteryRO2003New.mdb" 
SelectCommand="SELECT * FROM [qryGPS] WHERE ([TOWN] = ?)">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="TOWN" 
PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:AccessDataSource>

<br />
<hr />
<div id="dvMap">
</div>

</asp:Content>

Code:

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

Repeater1.DataSourceID = "AccessDataSource3"

End Sub

Any thoughts? Thanks.