Question

I have this scenario, can anybody fill the gaps for me? Its like this:

Database 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);  });