Leyendo desde una base de datos de ubicaciones.
-
03-07-2019 - |
Pregunta
Tengo este escenario, ¿alguien puede llenar los huecos por mí? Es así:
Campos de los mapas de la tabla de la base de datos:
Map_ID, Coordenadas, MarkerTitle, MarkerField.
Código detrás:
Dim myTableAdapter As New myDatasetTableAdapters.tblMapsTableAdapters
Dim myTable As myDataset.tblMapsDataTable = myTableAdapter.GetAllMaps()
En este momento, estoy asignando un valor a la vez para poder mostrar un googleMap en mi página, simplemente al tener variables de amigo y en el código que obtiene sus valores en PageLoad y declaré variables con el mismo nombre en mi script que muestra los mapas, es como:
Código detrás:
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>
¿Cómo puedo pasar del procedimiento anterior a algo como: pasar un tableOfMaps completo al JavaScript o leer sus datos (recuperar información de la base de datos desde el lado de JavaScript) y luego iterar de esta manera:
For Each map In MapsTable
{
var marker1 = new GMarker(new GLatLng(<%=coordinates%>));
var html1="<%=maptitle%><br/>" + "<%=text%>";
map.addOverlay(marker1);
marker.openInfoWindowHtml(html1);
}
Sé que esto es mucho pedir, por lo que la ayuda será muy apreciada ...
Solución
Voy a usar jQuery para simplificar las cosas, espero que esté bien ...
Realice las búsquedas en la base de datos en el lado del servidor y emita datos en el HTML. Debería estar buscando producir algo como esto:
<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>
Si estás usando algo como ASP.NET puedes usar un asp: Repeater.
Una vez que tenga los datos representados en su HTML, puede consultarlos e iterarlos:
$('#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);
});