Help, i am a Javascript illiterate

Question

Ive been asking a lot of Javascript questions, i guess i just have to learn it, but for the moment, i have this scenario, can anybody fill the gaps for me, its like:

Dtabase Table Maps' fields:

Map_ID, Coordinates, MarkerTitle, MarkerField.

Code Behind:

Dim myTableAdapter As New myDatasetTableAdapters.tblMapsTableAdapters
Dim myTable As myDataset.tblMapsDataTable = myTableAdapter.GetAllMaps()

Right now, i am assigning one value at a time to be able to show one googleMap in my page, simply by having Friend Variables and in codebehind which gets their values on PageLoad and i declared variables with the same name in my script that shows the maps, its like:

Code Behind:

Friend coordinates As String
Friend zoom As String
Friend maptitle As String
Friend text As String

Script: <

script type="text/javascript">

     function load() {

    var map = new GMap2(document.getElementById("map"));


    var marker1 = new GMarker(new GLatLng(<%=coordinates%>));


    var html1="<%=maptitle%><br/>" +
         "<%=text%>";


    map.setCenter(new GLatLng(<%=coordinates%>), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker1);

    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());


    marker.openInfoWindowHtml(html1);


    }

    //]]>
    </script>

How can i go from the above procedure to something like: passing a whole tableOfMaps to the Javascript or reading this data their (retrieving database information from within the Javascript side) and then iterating like this:

For Each map In MapsTable
{
var marker1 = new GMarker(new GLatLng(<%=coordinates%>));
var html1="<%=maptitle%><br/>" + "<%=text%>";
map.addOverlay(marker1);
marker.openInfoWindowHtml(html1);
}

I know this is too much to ask, so help will be deeply appreciated...

Answer 1

I'm going to use jQuery to simplify things, hope that's OK...

Perform the database look-ups on the server-side, and emit data into the HTML. You should be looking to produce something like this:

<div id="maps-table">
  <div class="map-entry">
    <span class="map-title">Title 1</span>
    <span class="map-text">Text 1</span>
    <span class="map-coordinates">Coordinates 1</span>
  </div>
  <div class="map-entry">
    <span class="map-title">Title 2</span>
    <span class="map-text">Text 2</span>
    <span class="map-coordinates">Coordinates 2</span>
  </div>
  ...
</div>

If you're using something like ASP.NET you can use an asp:Repeater.

Once you have the data rendered in your HTML, you can query and iterate over it:

$('#maps-table .map-entry').each(function() {

  var title = $(this).find('.map-title').text();
  var text = $(this).find('.map-text').text();
  var coordinates = $(this).find('.map-coordinates').text();

  // Add map markers here, eg:

  var marker = new GMarker(new GLatLng(coordinates));
  var html = title + "<br/>" + text;

  map.addOverlay(marker);
  marker.openInfoWindowHtml(html);

});